'use client';

import { isApiError, type IrpCategory } from '@impuestos/contracts';
import { formatDateLong, formatGs, type Locale } from '@impuestos/i18n';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { useState } from 'react';
import { CategoryPicker } from '@/components/category-picker';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';
import { StatusChip } from '@/components/ui/status-chip';
import { Switch } from '@/components/ui/switch';
import { useT } from '@/i18n/t';
import { api } from '@/lib/api';

/** Flow E1 detail: the data, the image, and the classification the user can override. */
export function DocumentDetail({ id, locale }: { id: string; locale: string }) {
  const t = useT();
  const queryClient = useQueryClient();
  const [editing, setEditing] = useState(false);

  const document = useQuery({
    queryKey: ['documents', id],
    queryFn: ({ signal }) => api.getDocument(id, signal),
    retry: (count, error) => !isApiError(error) && count < 1,
  });

  const reclassify = useMutation({
    mutationFn: (patch: { irpCategory?: IrpCategory | 'none'; ivaCreditEligible?: boolean }) =>
      api.patchClassification(id, patch),
    onSuccess: async () => {
      setEditing(false);
      await queryClient.invalidateQueries({ queryKey: ['documents'] });
    },
  });

  if (document.isPending) {
    return (
      <Card className="my-4">
        <Skeleton name="declaration-summary" />
      </Card>
    );
  }

  if (document.isError || !document.data) {
    const missing = isApiError(document.error) && document.error.code === 'not_found';
    return (
      <Card className="my-4 space-y-3">
        <p role="alert" className="text-sm">
          {missing ? t('error.not_found') : t('common.error.generic')}
        </p>
        {!missing ? (
          <Button type="button" onClick={() => void document.refetch()}>
            {t('common.retry')}
          </Button>
        ) : null}
      </Card>
    );
  }

  const doc = document.data;
  const classification = doc.classification;
  const category = classification?.irpCategory ?? 'none';

  return (
    <div className="space-y-4 py-4">
      <div className="flex items-start justify-between gap-3">
        <div className="min-w-0">
          <h1 className="truncate text-2xl font-semibold tracking-tight">{doc.emitterName}</h1>
          <p className="text-sm text-[var(--text-muted)]">
            {formatDateLong(locale as Locale, doc.issueDate)}
          </p>
        </div>
        <StatusChip status={doc.status} label={t(`status.${doc.status}` as const)} />
      </div>

      <Card className="space-y-3">
        <p className="tnum text-4xl font-semibold tracking-tight">{formatGs(doc.total)}</p>
        <dl className="space-y-2 text-sm">
          <Row label={t('manual.iva10')} value={formatGs(doc.iva10)} />
          <Row label={t('manual.iva5')} value={formatGs(doc.iva5)} />
          <Row label={t('manual.exenta')} value={formatGs(doc.amountExenta)} />
          <Row label={t('manual.emitterRuc')} value={`${doc.emitterRuc}-${doc.emitterDv ?? ''}`} />
          <Row label={t('docs.detail.source.manual')} value={t(`docs.detail.source.${doc.source}` as const)} />
        </dl>
      </Card>

      <Card className="space-y-4">
        <div className="flex items-center justify-between gap-3">
          <h2 className="font-semibold tracking-tight">{t('bandeja.category')}</h2>
          <Button type="button" variant="ghost" onClick={() => setEditing(!editing)}>
            {editing ? t('common.cancel') : t('common.edit')}
          </Button>
        </div>

        {editing ? (
          <CategoryPicker
            value={category}
            onSelect={(next) => reclassify.mutate({ irpCategory: next })}
          />
        ) : (
          <p data-testid="document-category" className="text-lg font-medium">
            {t(`categories.${category}` as const)}
          </p>
        )}

        {classification ? (
          <div className="space-y-3 border-t pt-4 text-sm">
            <Row
              label={t('docs.detail.ivaCredit')}
              value={formatGs(classification.ivaCreditAmount)}
            />
            <Row
              label={t('docs.detail.deductible')}
              value={
                classification.irpDeductibleAmount > 0
                  ? formatGs(classification.irpDeductibleAmount)
                  : t('docs.detail.notDeductible')
              }
            />
            <label className="flex items-center justify-between gap-4">
              <span>{t('docs.detail.ivaCredit')}</span>
              <Switch
                checked={classification.ivaCreditEligible}
                onCheckedChange={(next) => reclassify.mutate({ ivaCreditEligible: next })}
                label={t('docs.detail.ivaCredit')}
              />
            </label>

            {classification.reasons.length > 0 ? (
              <ul className="space-y-1 text-xs text-[var(--text-muted)]">
                {classification.reasons.map((reason) => (
                  <li key={reason}>
                    {t(`classification.reason.${reason}` as 'classification.reason.irp_no_category')}
                  </li>
                ))}
              </ul>
            ) : null}
          </div>
        ) : null}
      </Card>

      {doc.fileUrl ? (
        <Card className="p-0">
          {/* The stored photograph. Served through the authenticated file route. */}
          <img
            src={doc.fileUrl}
            alt={doc.emitterName}
            className="w-full rounded-2xl object-contain"
          />
        </Card>
      ) : null}
    </div>
  );
}

function Row({ label, value }: { label: string; value: string }) {
  return (
    <div className="flex items-baseline justify-between gap-4">
      <dt className="text-[var(--text-muted)]">{label}</dt>
      <dd className="tnum text-right font-medium">{value}</dd>
    </div>
  );
}