'use client';

import type { Direction, SupplierRegimeHint } from '@impuestos/contracts';
import { formatGsAmount } from '@impuestos/i18n';
import { computeRucDv, parseRuc, validateRuc } from '@impuestos/rules';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { useSearchParams } from 'next/navigation';
import { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Switch } from '@/components/ui/switch';
import { useRouter } from '@/i18n/navigation';
import { useT } from '@/i18n/t';
import { api } from '@/lib/api';
import { cn } from '@/lib/utils';

const REGIMES: SupplierRegimeHint[] = ['normal', 'resimple', 'unknown'];

/**
 * Flow B3. One screen, numeric keypads for the money, and the IVA split worked out from
 * the total with an override, because retyping a number the factura already prints is how
 * people give up halfway.
 */
export function ManualForm() {
  const t = useT();
  const router = useRouter();
  const queryClient = useQueryClient();
  const fileId = useSearchParams().get('fileId');

  const [direction, setDirection] = useState<Direction>('purchase');
  const [ruc, setRuc] = useState('');
  const [emitterName, setEmitterName] = useState('');
  const [issueDate, setIssueDate] = useState(() => new Date().toISOString().slice(0, 10));
  const [total, setTotal] = useState('');
  const [allTenPercent, setAllTenPercent] = useState(true);
  const [regime, setRegime] = useState<SupplierRegimeHint>('unknown');
  const [override, setOverride] = useState<{ iva10: string; iva5: string; exenta: string } | null>(null);

  const parsedRuc = parseRuc(ruc.trim());
  const rucValid = parsedRuc ? validateRuc(parsedRuc.base, parsedRuc.dv) : /^\d{1,8}$/.test(ruc.trim());
  const totalValue = total === '' ? 0 : Number(total);

  // IVA is inside the printed total: at 10% the tax is a eleventh of it, at 5% a twenty first.
  const derived = allTenPercent
    ? { iva10: Math.round(totalValue / 11), iva5: 0, exenta: 0 }
    : { iva10: 0, iva5: Math.round(totalValue / 21), exenta: 0 };
  const split = override
    ? {
        iva10: Number(override.iva10 || '0'),
        iva5: Number(override.iva5 || '0'),
        exenta: Number(override.exenta || '0'),
      }
    : derived;

  const save = useMutation({
    mutationFn: () => {
      const base = parsedRuc?.base ?? ruc.trim();
      return api.createManualDocument({
        ...(fileId ? { fileId } : {}),
        direction,
        docKind: 'factura',
        emitterRuc: base,
        emitterDv: parsedRuc ? String(parsedRuc.dv) : String(computeRucDv(base)),
        emitterName: emitterName.trim(),
        issueDate,
        total: totalValue,
        amountIva10: split.iva10 > 0 ? totalValue - split.iva10 - split.exenta : 0,
        amountIva5: split.iva5 > 0 ? totalValue - split.iva5 - split.exenta : 0,
        amountExenta: split.exenta,
        iva10: split.iva10,
        iva5: split.iva5,
        supplierRegimeHint: regime,
      });
    },
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: ['documents'] });
      router.push('/bandeja');
    },
  });

  const canSave = rucValid && emitterName.trim().length > 0 && totalValue > 0;

  return (
    <div className="space-y-4 py-4">
      <h1 className="text-2xl font-semibold tracking-tight">{t('manual.title')}</h1>
      {fileId ? <p className="text-sm text-[var(--text-muted)]">{t('scan.needsManual')}</p> : null}

      <Card className="space-y-5">
        <fieldset className="space-y-2">
          <legend className="text-sm font-medium text-[var(--text-muted)]">
            {t('manual.direction')}
          </legend>
          <div className="grid grid-cols-2 gap-2">
            {(['purchase', 'sale'] as const).map((value) => (
              <button
                key={value}
                type="button"
                aria-pressed={direction === value}
                onClick={() => setDirection(value)}
                className={cn(
                  'rounded-2xl border p-3 text-sm transition-colors',
                  direction === value ? 'border-accent-600 bg-accent-50' : 'bg-[var(--surface-raised)]',
                )}
              >
                {t(`manual.direction.${value}` as const)}
              </button>
            ))}
          </div>
        </fieldset>

        <div className="space-y-1.5">
          <Label htmlFor="ruc">{t('manual.emitterRuc')}</Label>
          <Input
            id="ruc"
            inputMode="numeric"
            value={ruc}
            aria-invalid={ruc.length > 0 && !rucValid}
            onChange={(event) => setRuc(event.target.value)}
          />
          {ruc.length > 0 && !rucValid ? (
            <p role="alert" className="text-sm text-overdue">
              {t('landing.invalidDoc')}
            </p>
          ) : null}
        </div>

        <div className="space-y-1.5">
          <Label htmlFor="emitterName">{t('manual.emitterName')}</Label>
          <Input
            id="emitterName"
            value={emitterName}
            onChange={(event) => setEmitterName(event.target.value)}
          />
        </div>

        <div className="space-y-1.5">
          <Label htmlFor="issueDate">{t('manual.date')}</Label>
          <Input
            id="issueDate"
            type="date"
            value={issueDate}
            onChange={(event) => setIssueDate(event.target.value)}
          />
        </div>

        <div className="space-y-1.5">
          <Label htmlFor="total">{t('manual.total')}</Label>
          <Input
            id="total"
            inputMode="numeric"
            className="tnum text-2xl"
            value={total === '' ? '' : formatGsAmount(totalValue)}
            onChange={(event) => setTotal(event.target.value.replace(/\D/g, ''))}
          />
        </div>

        <div className="space-y-3">
          <label className="flex items-center justify-between gap-4">
            <span className="text-sm">{t('manual.ivaSplit.q')}</span>
            <Switch
              checked={allTenPercent}
              onCheckedChange={(next) => {
                setAllTenPercent(next);
                setOverride(null);
              }}
              label={t('manual.ivaSplit.q')}
            />
          </label>
          <p className="text-sm text-[var(--text-muted)] text-pretty">{t('manual.ivaSplit.help')}</p>

          <div className="grid grid-cols-3 gap-2">
            {(
              [
                ['iva10', t('manual.iva10')],
                ['iva5', t('manual.iva5')],
                ['exenta', t('manual.exenta')],
              ] as const
            ).map(([key, label]) => (
              <div key={key} className="space-y-1">
                <Label htmlFor={key} className="text-xs">
                  {label}
                </Label>
                <Input
                  id={key}
                  inputMode="numeric"
                  className="tnum"
                  value={formatGsAmount(split[key])}
                  onChange={(event) => {
                    const digits = event.target.value.replace(/\D/g, '');
                    setOverride({
                      iva10: String(split.iva10),
                      iva5: String(split.iva5),
                      exenta: String(split.exenta),
                      [key]: digits,
                    });
                  }}
                />
              </div>
            ))}
          </div>
        </div>

        <div className="space-y-1.5">
          <Label htmlFor="regime">{t('manual.regime')}</Label>
          <select
            id="regime"
            value={regime}
            onChange={(event) => setRegime(event.target.value as SupplierRegimeHint)}
            className="h-12 w-full rounded-2xl border bg-[var(--surface-raised)] px-3 text-base"
          >
            {REGIMES.map((value) => (
              <option key={value} value={value}>
                {t(`manual.regime.${value}` as const)}
              </option>
            ))}
          </select>
        </div>

        {save.isError ? (
          <p role="alert" className="text-sm text-overdue">
            {t('common.error.generic')}
          </p>
        ) : null}

        <Button type="button" size="lg" block disabled={!canSave || save.isPending} onClick={() => save.mutate()}>
          {save.isPending ? t('common.saving') : t('manual.submit')}
        </Button>
      </Card>
    </div>
  );
}