import { SectionCard } from '@/components/SectionCard'
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldLabel,
  FieldSet,
  FieldTitle,
} from '@/components/ui/field'
import { Switch } from '@/components/ui/switch'
import { t } from '@/lib/i18n'

import { guardLabel, guardState } from './labels'
import type { CatalogGuard } from './types'

interface Props {
  /** Los guards del catálogo, en el orden en que se leen. */
  guards: CatalogGuard[]
  /** Los bajados, por id. Lo que no está acá está levantado. */
  lowered: Record<string, boolean>
  onGuard: (guard: string, raised: boolean) => void
  disabled?: boolean
}

/** Las tres reglas que ningún control levanta. Se leen, no se tocan. */
const FIXED = ['people', 'photo', 'realistic'] as const

export function guardControlId(guard: string): string {
  return `guard-${guard}`
}

/**
 * Lo que la IA no va a hacer: lo que se puede bajar, y lo que no.
 *
 * Un guard no describe trabajo —eso lo hacen las áreas y el servicio—: describe
 * una restricción. Bajarlo no pide nada, sólo deja de prohibirlo, y lo que pasa
 * después lo dirigen las notas. Por eso la tarjeta va antes de «Notas
 * especiales»: primero hasta dónde se puede llegar, después qué se pide.
 *
 * Las tres de abajo no tienen interruptor y no es una omisión: son las que el
 * producto promete y ningún pedido levanta. Van en la misma tarjeta porque la
 * pregunta que contestan es la misma —«¿qué no va a hacer?»— y separarlas
 * dejaría a la persona buscando la lista completa en dos lugares.
 */
export function GuardsSection({ guards, lowered, onGuard, disabled }: Props) {
  return (
    <SectionCard
      title={{ text: t('ai.guards.title') }}
      description={t('ai.guards.description')}
      id="guards"
    >
      <div className="flex flex-col gap-5">
        {guards.map((guard) => {
          const raised = lowered[guard.id] !== false
          const id = guardControlId(guard.id)
          return (
            // La misma tarjeta que un toggle del contenedor: el rótulo nombra
            // la regla y la línea de abajo dice qué está pasando ahora, no qué
            // pasaría al tocarlo.
            <FieldLabel key={guard.id} htmlFor={id}>
              <Field orientation="horizontal">
                <FieldContent>
                  <FieldTitle>{guardLabel(guard.id)}</FieldTitle>
                  <FieldDescription>{guardState(guard.id, raised)}</FieldDescription>
                </FieldContent>
                <Switch
                  id={id}
                  checked={raised}
                  disabled={disabled}
                  onCheckedChange={(checked) => onGuard(guard.id, checked)}
                />
              </Field>
            </FieldLabel>
          )
        })}
      </div>

      <FieldSet className="gap-1 border-t pt-4">
        <FieldDescription>{t('ai.guards.fixed.title')}</FieldDescription>
        <ul className="text-muted-foreground flex flex-col gap-1 text-xs">
          {FIXED.map((rule) => (
            <li key={rule} className="flex gap-1.5">
              <span aria-hidden>*</span>
              <span>{t(`ai.guards.fixed.${rule}` as 'ai.guards.fixed.people')}</span>
            </li>
          ))}
        </ul>
      </FieldSet>
    </SectionCard>
  )
}