'use client'
import { useState } from 'react'
import type { BrandConfig } from '@/lib/types'

interface ConsentScreenProps {
  brandConfig: BrandConfig | null
  onAccept: (consentOperativo: boolean, consentMacroN1: boolean) => void
}

export function ConsentScreen({ brandConfig, onAccept }: ConsentScreenProps) {
  const [operativo, setOperativo] = useState(false)
  const [macroN1, setMacroN1] = useState(false)

  const orgName = brandConfig?.org_name ?? 'tu empresa'

  return (
    <div className="consent-container" role="main">
      <h1 className="consent-title">Antes de comenzar</h1>

      <section className="consent-section" aria-labelledby="consent-intro-heading">
        <h2 id="consent-intro-heading" className="consent-section-title">
          ¿Qué vamos a hacer con tus respuestas?
        </h2>
        <p>
          Esta encuesta tiene dos propósitos que podés autorizar por separado:
        </p>
        <ol className="consent-list">
          <li>
            <strong>Diagnóstico interno de {orgName}:</strong> tus respuestas ayudan a la empresa
            a entender la realidad de las personas que cuidan a familiares con discapacidad o adultos
            mayores, para diseñar apoyos más adecuados. Solo se trabaja con{' '}
            <strong>datos agregados</strong> — nunca accede a respuestas individuales.
          </li>
          <li>
            <strong>Estudio país (opcional):</strong> tus respuestas anonimizadas contribuyen a un
            mapeo nacional sobre la economía del cuidado en Paraguay. Los datos se procesan de
            forma irreversiblemente desvinculada de cualquier empresa o persona.
          </li>
        </ol>
      </section>

      {/* Párrafo OBLIGATORIO: anonimato y no-revocación (ADR-003) */}
      <section className="consent-anon-box" role="note" aria-label="Sobre el anonimato">
        <p>
          <strong>Esta encuesta es completamente anónima.</strong> No guardamos ningún dato que
          te identifique (nombre, número de documento, correo ni ningún otro identificador personal).
          Por ser anónima, <strong>no es posible revocar ni eliminar tu respuesta una vez enviada</strong>,
          ya que no habría forma de encontrarla entre las demás.
        </p>
      </section>

      <section className="consent-checkboxes" aria-labelledby="consent-choices-heading">
        <h2 id="consent-choices-heading" className="consent-section-title">
          Tus decisiones
        </h2>

        {/* Checkbox 1: operativo — REQUERIDO */}
        <label className="consent-checkbox-label" htmlFor="consent-operativo">
          <input
            type="checkbox"
            id="consent-operativo"
            checked={operativo}
            onChange={(e) => setOperativo(e.target.checked)}
            aria-required="true"
            className="consent-checkbox-input"
          />
          <span className="consent-checkbox-text">
            <strong>Acepto</strong> que mis respuestas se usen para el diagnóstico interno de{' '}
            {orgName} sobre cuidado y discapacidad.{' '}
            <span className="consent-required-badge">Requerido para continuar</span>
          </span>
        </label>

        {/* Checkbox 2: macro_n1 — OPCIONAL */}
        <label className="consent-checkbox-label" htmlFor="consent-macro">
          <input
            type="checkbox"
            id="consent-macro"
            checked={macroN1}
            onChange={(e) => setMacroN1(e.target.checked)}
            className="consent-checkbox-input"
          />
          <span className="consent-checkbox-text">
            <strong>También acepto</strong> que mis respuestas anonimizadas contribuyan al estudio
            país sobre economía del cuidado (sin identificarme en ningún caso).{' '}
            <span className="consent-optional-badge">Opcional</span>
          </span>
        </label>
      </section>

      <div className="consent-footer">
        <button
          type="button"
          disabled={!operativo}
          onClick={() => onAccept(operativo, macroN1)}
          className={`btn ${operativo ? 'btn-primary' : 'btn-primary btn-disabled'}`}
          aria-disabled={!operativo}
        >
          Comenzar la encuesta
        </button>
        {!operativo && (
          <p className="consent-required-hint" role="status" aria-live="polite">
            Necesitás marcar el primer checkbox para continuar.
          </p>
        )}
      </div>
    </div>
  )
}