import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@/components/ui/accordion'
import { t } from '@/lib/i18n'

import { PromptText } from './PromptText'

interface Props {
  /** El prompt armado a la vista, con la misma receta que usa el servidor. */
  prompt: string
}

const DEBUG_ITEM = 'debug'

/**
 * Lo que sirve para entender qué se va a mandar, y que no es parte de pedirlo.
 *
 * El prompt estaba en una tarjeta propia al final del formulario, del tamaño de
 * lo que dice —cuarenta líneas en inglés— y justo arriba del botón de generar:
 * el recorrido terminaba leyendo un texto que nadie tiene que aprobar. No es un
 * paso de verificación; lo que se verifica son las respuestas, y para eso están
 * las tarjetas de arriba.
 *
 * Así que baja al pie, sin tarjeta y detrás de un acordeón cerrado, con el
 * rótulo más chico de la pantalla. Y el acordeón no se llama «Prompt» sino
 * «Debug»: es el cajón, y el prompt es lo primero que hay adentro. Lo que venga
 * después —el análisis crudo, los tiempos— entra como otro ítem y no como otra
 * tarjeta al final del formulario.
 */
export function DebugSection({ prompt }: Props) {
  return (
    // Alineado a la derecha y con el disparador del ancho de su texto: a lo
    // ancho, un acordeón vacío se lee como una sección más de la pantalla.
    <Accordion type="single" collapsible>
      <AccordionItem value={DEBUG_ITEM} className="border-b-0">
        <AccordionTrigger className="text-muted-foreground hover:text-foreground ml-auto flex-none gap-2 text-xs font-normal">
          {t('ai.debug.show')}
        </AccordionTrigger>
        <AccordionContent className="flex flex-col gap-2">
          <div className="flex flex-col gap-0.5">
            <h3 className="text-sm font-medium">{t('ai.debug.prompt.title')}</h3>
            <p className="text-muted-foreground text-xs">{t('ai.debug.prompt.description')}</p>
          </div>
          <PromptText prompt={prompt} />
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}