import { Link } from '@inertiajs/react'
import { CircleXIcon, DownloadIcon, PencilIcon, RotateCcwIcon, SparklesIcon } from 'lucide-react'
import type { ReactNode } from 'react'

import { EmptyState } from '@/components/EmptyState'
import { GenerationStateBadge } from '@/components/GenerationStateBadge'
import { SectionCard } from '@/components/SectionCard'
import { Button } from '@/components/ui/button'
import { t } from '@/lib/i18n'

import { generationErrorText } from './labels'
import { GENERATION_STEPS, LoaderPanel } from './Loader'
import type { Generation } from './types'

interface Props {
  generation: Generation
  /**
   * Volver a habilitar los contenedores con las respuestas de este pedido, para
   * cambiar algo y pedir otra vez sin recargar. Sin esto —un pedido v1, que no
   * tiene contenedores— el botón no se dibuja.
   */
  onAdjust?: () => void
  /** Adónde va «Generate another»: la misma foto y el mismo análisis, contenedores en blanco. */
  anotherHref: string
  /**
   * Cuándo terminó, ya dibujado por quien tiene el contexto de la página.
   *
   * `DataTimestamp` lee la zona horaria de la cuenta desde Inertia, y esta
   * pieza se dibuja también fuera de una página —en la suite—, así que la
   * fecha entra como ranura ciega en vez de resolverse acá.
   */
  timestamp?: ReactNode
}

/**
 * El pedido que se está mirando: en cola, en curso, terminado o fallido.
 *
 * Terminado, el resultado va **al lado de la foto original** para comparar
 * (R26): dos columnas en escritorio, apiladas en móvil. Las acciones —bajar,
 * ajustar, generar otro— son sobre el resultado y no compiten con el lado a
 * lado. Si falló, dice por qué con el código traducido; el pedido fallido
 * queda en el registro.
 */
export function ResultSection({ generation, onAdjust, anotherHref, timestamp }: Props) {
  const running = generation.state === 'QUEUED' || generation.state === 'RUNNING'

  if (generation.state === 'COMPLETED' && generation.result_url) {
    return (
      <SectionCard
        title={{ text: t('ai.result.title') }}
        description={t('ai.result.description')}
        id="result"
        actions={
          // El estado y su hora, juntos arriba: «Completed» ya dice que
          // terminó, así que abajo no hace falta repetirlo.
          <div className="flex flex-col items-end gap-1">
            <GenerationStateBadge state={generation.state} />
            {timestamp}
          </div>
        }
        footer={
          <div className="flex flex-wrap gap-2">
            <Button asChild>
              <a href={generation.result_url} download="design.jpg">
                <DownloadIcon aria-hidden />
                {t('ai.result.download')}
              </a>
            </Button>
            {onAdjust ? (
              <Button type="button" variant="outline" onClick={onAdjust}>
                <PencilIcon aria-hidden />
                {t('ai.result.adjust')}
              </Button>
            ) : null}
            <Button asChild variant="ghost">
              <Link href={anotherHref}>
                <SparklesIcon aria-hidden />
                {t('ai.result.another')}
              </Link>
            </Button>
          </div>
        }
      >
        <div className={generation.source_url ? 'grid gap-4 md:grid-cols-2' : 'grid gap-4'}>
          {generation.source_url ? (
            <figure className="flex min-w-0 flex-col gap-2">
              <figcaption className="text-muted-foreground text-xs">
                {t('ai.result.original')}
              </figcaption>
              <img
                src={generation.source_url}
                alt={t('ai.result.originalAlt')}
                className="bg-muted w-full rounded-md border object-contain"
              />
            </figure>
          ) : null}
          <figure className="flex min-w-0 flex-col gap-2">
            <figcaption className="text-muted-foreground text-xs">
              {t('ai.result.generated')}
            </figcaption>
            <img
              src={generation.result_url}
              alt={t('ai.result.alt')}
              className="bg-muted w-full rounded-md border object-contain"
            />
          </figure>
        </div>
      </SectionCard>
    )
  }

  if (generation.state === 'FAILED') {
    return (
      <SectionCard
        title={{ text: t('ai.failed.title') }}
        id="result"
        actions={<GenerationStateBadge state={generation.state} />}
      >
        <EmptyState
          icon={CircleXIcon}
          title={t('ai.failed.heading')}
          description={generationErrorText(generation.error_code)}
          className="border-0"
          action={
            onAdjust ? (
              <Button type="button" onClick={onAdjust}>
                <RotateCcwIcon aria-hidden />
                {t('ai.failed.tryAgain')}
              </Button>
            ) : (
              <Button asChild>
                <Link href={anotherHref}>
                  <SparklesIcon aria-hidden />
                  {t('ai.result.another')}
                </Link>
              </Button>
            )
          }
        />
      </SectionCard>
    )
  }

  return (
    <SectionCard
      title={{ text: t('ai.loader.title') }}
      description={t('ai.loader.description')}
      id="result"
      actions={<GenerationStateBadge state={generation.state} />}
    >
      <LoaderPanel steps={GENERATION_STEPS} active={running} eta={t('ai.loader.eta')} />
    </SectionCard>
  )
}