'use client';

import type { Direction, DocStatus } from '@impuestos/contracts';
import { formatGs, type Locale } from '@impuestos/i18n';
import { useQuery } from '@tanstack/react-query';
import { FileText } from 'lucide-react';
import { useState } from 'react';
import { DocCard } from '@/components/doc-card';
import { Button, buttonClasses } 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 } from '@/i18n/navigation';
import { useT } from '@/i18n/t';
import { api } from '@/lib/api';
import { cn } from '@/lib/utils';

/** Flow E1: filterable list with a monthly total header. */
export function DocumentsScreen({ locale }: { locale: string }) {
  const t = useT();
  const [direction, setDirection] = useState<Direction | undefined>();
  const [status, setStatus] = useState<DocStatus | undefined>();
  const [search, setSearch] = useState('');

  const query = {
    ...(direction ? { direction } : {}),
    ...(status ? { status } : {}),
    ...(search.trim() ? { q: search.trim() } : {}),
  };

  const documents = useQuery({
    queryKey: ['documents', query],
    queryFn: ({ signal }) => api.listDocuments(query, signal),
  });

  const items = documents.data?.items ?? [];
  const total = items.reduce((sum, doc) => sum + (doc.direction === 'purchase' ? doc.total : 0), 0);

  const errors = useQuery({
    queryKey: ['documents', 'errors'],
    queryFn: ({ signal }) => api.listIngestErrors(signal),
  });

  return (
    <div className="space-y-4 py-4">
      {/* No scan button here: the shell carries a persistent one on every screen. */}
      <h1 className="text-2xl font-semibold tracking-tight">{t('docs.title')}</h1>

      <input
        type="search"
        aria-label={t('common.search')}
        placeholder={t('common.search')}
        value={search}
        onChange={(event) => setSearch(event.target.value)}
        className="h-11 w-full rounded-2xl border bg-[var(--surface-raised)] px-4"
      />

      <div className="flex flex-wrap gap-2">
        <Filter label={t('docs.filter.all')} active={!direction && !status} onClick={() => {
          setDirection(undefined);
          setStatus(undefined);
        }} />
        <Filter
          label={t('manual.direction.purchase')}
          active={direction === 'purchase'}
          onClick={() => setDirection(direction === 'purchase' ? undefined : 'purchase')}
        />
        <Filter
          label={t('manual.direction.sale')}
          active={direction === 'sale'}
          onClick={() => setDirection(direction === 'sale' ? undefined : 'sale')}
        />
        <Filter
          label={t('status.needs_review')}
          active={status === 'needs_review'}
          onClick={() => setStatus(status === 'needs_review' ? undefined : 'needs_review')}
        />
      </div>

      {errors.data && errors.data.length > 0 ? (
        <Card className="space-y-2 border-attention">
          <h2 className="font-medium text-attention">{t('docs.errors.title')}</h2>
          <ul className="space-y-1 text-sm text-[var(--text-muted)]">
            {errors.data.map((error) => (
              <li key={error.id}>{error.message}</li>
            ))}
          </ul>
          <Link href="/comprobantes/nuevo" className="text-sm text-accent-700 underline">
            {t('docs.errors.retry')}
          </Link>
        </Card>
      ) : null}

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

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

      {documents.data && items.length === 0 ? (
        <Card>
          <EmptyState
            icon={<FileText aria-hidden className="size-8" />}
            title={t('docs.empty')}
            action={
              <Link href="/escanear" className={buttonClasses({ size: 'lg' })}>
                {t('docs.emptyCta')}
              </Link>
            }
          />
        </Card>
      ) : null}

      {items.length > 0 ? (
        <>
          <Card className="flex items-baseline justify-between">
            <div>
              <p className="text-sm text-[var(--text-muted)]">{t('docs.monthTotal')}</p>
              <p className="tnum text-2xl font-semibold tracking-tight">{formatGs(total)}</p>
            </div>
            <p className="text-sm text-[var(--text-muted)]">
              {t('docs.count', { count: documents.data?.total ?? items.length })}
            </p>
          </Card>

          <Card className="divide-y p-0">
            <ul>
              {items.map((document) => (
                <li key={document.id} className="px-6">
                  <Link href={`/comprobantes/${document.id}`} className="block">
                    <DocCard
                      document={document}
                      locale={locale as Locale}
                      compact
                      categoryLabel={t(
                        `categories.${document.classification?.irpCategory ?? 'none'}` as const,
                      )}
                      statusLabel={t(`status.${document.status}` as const)}
                    />
                  </Link>
                </li>
              ))}
            </ul>
          </Card>
        </>
      ) : null}
    </div>
  );
}

function Filter({
  label,
  active,
  onClick,
}: {
  label: string;
  active: boolean;
  onClick: () => void;
}) {
  return (
    <button
      type="button"
      aria-pressed={active}
      onClick={onClick}
      className={cn(
        'rounded-full border px-3 py-1.5 text-sm transition-colors',
        active ? 'border-accent-600 bg-accent-50 text-accent-700' : 'bg-[var(--surface-raised)]',
      )}
    >
      {label}
    </button>
  );
}