'use client';

import type { DeadlineDto } from '@impuestos/contracts';
import { formatDateLong, type Locale } from '@impuestos/i18n';
import { deadlineDay } from '@impuestos/rules';
import { useQuery } from '@tanstack/react-query';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';
import { useT } from '@/i18n/t';
import { api } from '@/lib/api';
import { cn } from '@/lib/utils';

/** Flow E2: a vertical timeline of everything coming, with the day rule explained. */
export function DeadlinesScreen({ locale }: { locale: string }) {
  const t = useT();

  const profile = useQuery({ queryKey: ['me'], queryFn: ({ signal }) => api.getProfile(signal) });
  const deadlines = useQuery({
    queryKey: ['deadlines'],
    queryFn: ({ signal }) => api.getUpcomingDeadlines(12, signal),
  });

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

      {profile.data ? (
        <Card>
          <p className="text-sm text-[var(--text-muted)] text-pretty">
            {t('vto.explainer', {
              digit: profile.data.deadlineDigit,
              day: deadlineDay(profile.data.deadlineDigit),
            })}
          </p>
        </Card>
      ) : null}

      {deadlines.isPending ? (
        <Card>
          <Skeleton name="doc-list-item" count={6} />
        </Card>
      ) : null}

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

      {deadlines.data?.length === 0 ? (
        <Card>
          <p className="text-sm text-[var(--text-muted)]">{t('vto.empty')}</p>
        </Card>
      ) : null}

      {deadlines.data && deadlines.data.length > 0 ? (
        <ol className="space-y-3">
          {deadlines.data.map((deadline) => (
            <li key={`${deadline.obligation}-${deadline.period}`}>
              <DeadlineRow deadline={deadline} locale={locale as Locale} />
            </li>
          ))}
        </ol>
      ) : null}
    </div>
  );
}

function DeadlineRow({ deadline, locale }: { deadline: DeadlineDto; locale: Locale }) {
  const t = useT();
  const days = daysUntil(deadline.dueDate);

  return (
    <Card className="flex items-start justify-between gap-4">
      <div className="min-w-0 space-y-1">
        <p className="font-medium">{t(`obligation.${deadline.obligation}` as const)}</p>
        <p className="text-sm text-[var(--text-muted)]">{deadline.period}</p>
        <p className="text-sm">{formatDateLong(locale, deadline.dueDate)}</p>
      </div>

      <div className="shrink-0 space-y-1 text-right">
        <DeadlinePill status={deadline.status} label={t(`vto.status.${deadline.status}` as const)} />
        {deadline.status !== 'done' ? (
          <p className="text-xs text-[var(--text-muted)]">
            {days === 0
              ? t('vto.today')
              : days > 0
                ? t('vto.daysLeft', { days })
                : t('vto.daysLate', { days: Math.abs(days) })}
          </p>
        ) : null}
      </div>
    </Card>
  );
}

/** Overdue is the only thing that earns red (FLOWS.md section 1). */
function DeadlinePill({ status, label }: { status: DeadlineDto['status']; label: string }) {
  return (
    <span
      className={cn(
        'inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium',
        status === 'done' && 'bg-positive-soft text-positive',
        status === 'due_soon' && 'bg-attention-soft text-attention',
        status === 'overdue' && 'bg-overdue-soft text-overdue',
        status === 'upcoming' && 'bg-[var(--surface)] text-[var(--text-muted)]',
      )}
    >
      {label}
    </span>
  );
}

function daysUntil(isoDate: string): number {
  const today = new Date();
  const startOfToday = Date.UTC(today.getUTCFullYear(), today.getUTCMonth(), today.getUTCDate());
  return Math.round((Date.parse(`${isoDate}T00:00:00Z`) - startOfToday) / 86_400_000);
}