'use client';

import type { DeclarationDto } from '@impuestos/contracts';
import { formatGs, formatMonthName, type Locale } from '@impuestos/i18n';
import { addMonths, formatPeriod } from '@impuestos/rules';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { FileCheck } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import { EmptyState } from '@/components/ui/empty-state';
import { Skeleton } from '@/components/ui/skeleton';
import { Link, useRouter } from '@/i18n/navigation';
import { useT } from '@/i18n/t';
import { api } from '@/lib/api';
import { cn } from '@/lib/utils';

/** Flow D1: grouped by year, newest first, with a way to prepare the open period. */
export function DeclarationsScreen({ locale }: { locale: string }) {
  const t = useT();
  const router = useRouter();
  const queryClient = useQueryClient();

  const declarations = useQuery({
    queryKey: ['declarations'],
    queryFn: ({ signal }) => api.listDeclarations(undefined, signal),
  });

  // The month just closed is the one there is a complete picture for.
  const now = new Date();
  const openPeriod = addMonths(formatPeriod(now.getUTCFullYear(), now.getUTCMonth() + 1), -1);
  const alreadyPrepared = declarations.data?.items.some(
    (item) => item.formCode === '120' && item.period === openPeriod,
  );

  const generate = useMutation({
    mutationFn: () => api.generateDeclaration({ formCode: '120', period: openPeriod }),
    onSuccess: async (declaration) => {
      await queryClient.invalidateQueries({ queryKey: ['declarations'] });
      router.push(`/declaraciones/${declaration.id}`);
    },
  });

  const byYear = groupByYear(declarations.data?.items ?? []);

  return (
    <div className="space-y-4 py-4">
      <h1 className="text-2xl font-semibold tracking-tight">{t('decl.title')}</h1>

      {!alreadyPrepared ? (
        <Card className="space-y-3">
          <p className="font-medium">
            {t('decl.generate', { form: '120', period: formatMonthName(locale as Locale, openPeriod) })}
          </p>
          {generate.isError ? (
            <p role="alert" className="text-sm text-overdue">
              {t('common.error.generic')}
            </p>
          ) : null}
          <Button type="button" block disabled={generate.isPending} onClick={() => generate.mutate()}>
            {generate.isPending ? t('decl.generating') : t('decl.generate', {
              form: '120',
              period: formatMonthName(locale as Locale, openPeriod),
            })}
          </Button>
        </Card>
      ) : null}

      {declarations.isPending ? (
        <Card>
          <Skeleton name="declaration-summary" />
        </Card>
      ) : null}

      {declarations.isError ? (
        <Card className="space-y-3">
          <p role="alert" className="text-sm">
            {t('common.error.generic')}
          </p>
          <Button type="button" onClick={() => void declarations.refetch()}>
            {t('common.retry')}
          </Button>
        </Card>
      ) : null}

      {declarations.data && declarations.data.items.length === 0 ? (
        <Card>
          <EmptyState
            icon={<FileCheck aria-hidden className="size-8" />}
            title={t('decl.empty')}
            body={t('decl.emptyBody')}
          />
        </Card>
      ) : null}

      {byYear.map(([year, items]) => (
        <section key={year} className="space-y-2">
          <h2 className="tnum text-sm font-medium text-[var(--text-muted)]">{year}</h2>
          <Card className="divide-y p-0">
            <ul>
              {items.map((declaration) => (
                <li key={declaration.id} className="px-6">
                  <Link
                    href={`/declaraciones/${declaration.id}`}
                    className="flex items-center justify-between gap-4 py-4"
                  >
                    <span className="min-w-0">
                      <span className="flex items-center gap-2">
                        <span className="tnum rounded-full bg-accent-50 px-2 py-0.5 text-xs font-medium text-accent-700">
                          {declaration.formCode}
                        </span>
                        <span className="tnum text-sm">{declaration.period}</span>
                      </span>
                      <StatusChip declaration={declaration} />
                    </span>
                    <span className="tnum shrink-0 font-medium">{headline(declaration)}</span>
                  </Link>
                </li>
              ))}
            </ul>
          </Card>
        </section>
      ))}
    </div>
  );
}

function StatusChip({ declaration }: { declaration: DeclarationDto }) {
  const t = useT();
  return (
    <span
      className={cn(
        'mt-1.5 inline-flex rounded-full px-2.5 py-0.5 text-xs font-medium',
        declaration.status === 'approved' && 'bg-positive-soft text-positive',
        declaration.status === 'ready' && 'bg-attention-soft text-attention',
        declaration.status === 'draft' && 'bg-[var(--surface)] text-[var(--text-muted)]',
      )}
    >
      {t(`decl.status.${declaration.status}` as const)}
    </span>
  );
}

/** The one number that matters on a row: what it costs, or what it saves. */
function headline(declaration: DeclarationDto): string {
  const summary = declaration.summary;
  const amount =
    declaration.formCode === '120'
      ? Number(summary['aPagar'] ?? 0) || Number(summary['saldoAFavor'] ?? 0)
      : Number(summary['tax'] ?? 0);
  return formatGs(amount);
}

function groupByYear(items: DeclarationDto[]): [string, DeclarationDto[]][] {
  const groups = new Map<string, DeclarationDto[]>();
  for (const item of items) {
    const year = item.period.slice(0, 4);
    groups.set(year, [...(groups.get(year) ?? []), item]);
  }
  return [...groups.entries()].sort((a, b) => b[0].localeCompare(a[0]));
}