import type { FormValueDto } from '@impuestos/contracts';
import { formatGs } from '@impuestos/i18n';
import { cn } from '@/lib/utils';

/**
 * The declaration laid out the way the official form is, casilla by casilla, so the
 * numbers can be transcribed straight across into Marangatu.
 *
 * The labels are Spanish in every locale, deliberately: this mirrors the DNIT form, and a
 * form whose labels have been translated is harder to copy from, not easier
 * (COPY.md multi-language policy). The caption around it says so in the reader's language.
 */
export function FormPreview({
  formCode,
  period,
  values,
  draft,
  labels,
}: {
  formCode: string;
  period: string;
  values: FormValueDto[];
  draft: boolean;
  labels: { title: string; spanishNote: string; casilla: string; concept: string; amount: string; draftMark: string };
}) {
  // The official designation, Spanish in every locale: COPY.md keeps "Formulario 120"
  // and "515" as-is in English, and this block mirrors the DNIT form.
  const officialTitle = `Formulario ${formCode}`;

  return (
    <div className="space-y-2">
      <div className="flex flex-wrap items-baseline justify-between gap-2">
        <h2 className="font-semibold tracking-tight">{labels.title}</h2>
        <span className="text-xs text-[var(--text-muted)]">{labels.spanishNote}</span>
      </div>

      <div className="relative overflow-hidden rounded-2xl border bg-[var(--surface-raised)]">
        {draft ? (
          <span
            aria-hidden
            className="pointer-events-none absolute inset-0 flex items-center justify-center text-5xl font-bold tracking-widest text-overdue/10 -rotate-12"
          >
            {labels.draftMark}
          </span>
        ) : null}

        <div className="border-b px-5 py-4">
          <p className="font-semibold tracking-tight">{officialTitle}</p>
          <p className="tnum text-sm text-[var(--text-muted)]">{period}</p>
        </div>

        <table className="w-full text-sm">
          <thead>
            <tr className="border-b text-left text-xs text-[var(--text-muted)]">
              <th scope="col" className="px-5 py-2 font-medium">
                {labels.casilla}
              </th>
              <th scope="col" className="py-2 font-medium">
                {labels.concept}
              </th>
              <th scope="col" className="px-5 py-2 text-right font-medium">
                {labels.amount}
              </th>
            </tr>
          </thead>
          <tbody>
            {values.map((value) => (
              <tr key={value.casilla} className="border-b last:border-0">
                <td className="px-5 py-2.5 font-mono text-xs text-[var(--text-muted)]">
                  {value.casilla}
                </td>
                <td className="py-2.5">{value.label}</td>
                <td className={cn('tnum px-5 py-2.5 text-right font-medium')}>
                  {formatGs(value.amount)}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}