impuestospy/apps/web/app/[locale]/(app)/configuracion/setup-wizard.tsx

'use client';

import type { LookupDto, Obligation, Relationship } from '@impuestos/contracts';
import { formatGsAmount, isLocale } from '@impuestos/i18n';
import { useMutation } from '@tanstack/react-query';
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 TOTAL_STEPS = 3;
const RELATIONSHIPS: Relationship[] = ['conyuge', 'hijo', 'padre', 'otro'];

interface Dependent {
  displayName: string;
  relationship: Relationship;
}

/** Flow A5: three steps, progress dots, nothing that cannot be changed later in /perfil. */
export function SetupWizard({ locale }: { locale: string }) {
  const t = useT();
  const router = useRouter();

  const [step, setStep] = useState(1);
  const [fullName, setFullName] = useState('');
  const [doc, setDoc] = useState('');
  const [lookup, setLookup] = useState<LookupDto | null>(null);
  const [taxpayerKind, setTaxpayerKind] = useState<'individual' | 'company'>('individual');
  const [hasIva, setHasIva] = useState(false);
  const [hasIrp, setHasIrp] = useState(false);
  const [income, setIncome] = useState('');
  const [dependents, setDependents] = useState<Dependent[]>([]);
  const [emailAlerts, setEmailAlerts] = useState(true);

  const check = useMutation({
    mutationFn: (value: string) => api.lookupRuc(value),
    onSuccess: setLookup,
  });

  const save = useMutation({
    mutationFn: async () => {
      const resolved = lookup?.valid ? lookup : await api.lookupRuc(doc.trim());
      if (!resolved.valid) throw new Error('invalid_document');

      const since = new Date().toISOString().slice(0, 10);
      const obligations: Obligation[] = [];
      // "No estoy seguro" leaves both off, which lands on the IRP view (FLOWS.md A5).
      if (hasIva) obligations.push({ code: 'iva_120', active: true, since });
      if (hasIrp || (!hasIva && !hasIrp)) obligations.push({ code: 'irp_515', active: true, since });

      await api.putProfile({
        fullName: fullName.trim(),
        docType: resolved.docType,
        ruc: resolved.docType === 'ruc' ? resolved.base : null,
        rucDv: resolved.dv === null ? null : String(resolved.dv),
        ci: resolved.docType === 'ci' ? resolved.base : resolved.base,
        taxpayerKind,
        obligations,
        irpGrossEstimate: income === '' ? null : Number(income.replace(/\D/g, '')),
        autoConfirmDays: 7,
        locale: isLocale(locale) ? locale : 'es',
      });

      for (const dependent of dependents) {
        await api.createDependent(dependent);
      }
      await api.patchNotificationPrefs({ emailEnabled: emailAlerts });
    },
    onSuccess: () => router.push('/inicio'),
  });

  const canContinue =
    step === 1 ? fullName.trim().length > 0 && lookup?.valid === true : true;

  return (
    <div className="space-y-6 py-4">
      <ProgressDots step={step} />

      {step === 1 ? (
        <Card className="space-y-4">
          <h1 className="text-2xl font-semibold tracking-tight">{t('setup.step1.title')}</h1>

          <div className="space-y-1.5">
            <Label htmlFor="fullName">{t('setup.fullName')}</Label>
            <Input
              id="fullName"
              value={fullName}
              autoComplete="name"
              onChange={(event) => setFullName(event.target.value)}
            />
          </div>

          <div className="space-y-1.5">
            <Label htmlFor="doc">{t('setup.docLabel')}</Label>
            <Input
              id="doc"
              inputMode="numeric"
              value={doc}
              aria-invalid={lookup !== null && !lookup.valid}
              aria-describedby="doc-help"
              onChange={(event) => {
                setDoc(event.target.value);
                setLookup(null);
              }}
              onBlur={() => {
                if (doc.trim().length > 0) check.mutate(doc.trim());
              }}
            />
            <p id="doc-help" className="text-sm text-[var(--text-muted)]">
              {t('setup.docHelp')}
            </p>
            {lookup !== null && !lookup.valid ? (
              <p role="alert" className="text-sm text-overdue">
                {t('landing.invalidDoc')}
              </p>
            ) : null}
            {lookup?.valid ? (
              <p className="text-sm text-positive">
                {t('setup.deadlineNote', { day: lookup.deadlineDay })}
              </p>
            ) : null}
          </div>

          <fieldset className="space-y-2">
            <legend className="text-sm font-medium text-[var(--text-muted)]">
              {t('setup.taxpayerKind.q')}
            </legend>
            <div className="grid grid-cols-2 gap-2">
              <ChoiceCard
                selected={taxpayerKind === 'individual'}
                onSelect={() => setTaxpayerKind('individual')}
                title={t('setup.taxpayerKind.ind')}
              />
              <ChoiceCard
                selected={taxpayerKind === 'company'}
                onSelect={() => setTaxpayerKind('company')}
                title={t('setup.taxpayerKind.com')}
              />
            </div>
          </fieldset>
        </Card>
      ) : null}

      {step === 2 ? (
        <Card className="space-y-4">
          <h1 className="text-2xl font-semibold tracking-tight">{t('setup.step2.title')}</h1>

          <div className="space-y-2">
            <ChoiceCard
              selected={hasIva}
              onSelect={() => setHasIva(!hasIva)}
              title={t('setup.oblig.iva.title')}
              body={t('setup.oblig.iva.body')}
            />
            <ChoiceCard
              selected={hasIrp}
              onSelect={() => setHasIrp(!hasIrp)}
              title={t('setup.oblig.irp.title')}
              body={t('setup.oblig.irp.body')}
            />
            <button
              type="button"
              className="w-full py-2 text-sm text-[var(--text-muted)] underline"
              onClick={() => {
                setHasIva(false);
                setHasIrp(false);
                setStep(3);
              }}
            >
              {t('setup.oblig.unsure')}
            </button>
          </div>

          {hasIrp ? (
            <>
              <div className="space-y-1.5">
                <Label htmlFor="income">{t('setup.income.q')}</Label>
                <Input
                  id="income"
                  inputMode="numeric"
                  value={income === '' ? '' : formatGsAmount(Number(income))}
                  aria-describedby="income-help"
                  onChange={(event) => setIncome(event.target.value.replace(/\D/g, ''))}
                />
                <p id="income-help" className="text-sm text-[var(--text-muted)]">
                  {t('setup.income.help')}
                </p>
              </div>

              <DependentsEditor
                dependents={dependents}
                onChange={setDependents}
                relationships={RELATIONSHIPS}
              />
            </>
          ) : null}
        </Card>
      ) : null}

      {step === 3 ? (
        <Card className="space-y-4">
          <h1 className="text-2xl font-semibold tracking-tight">{t('setup.step3.title')}</h1>
          <p className="text-sm text-[var(--text-muted)] text-pretty">{t('setup.push.body')}</p>

          <label className="flex items-center justify-between gap-4">
            <span className="text-sm">{t('notif.email')}</span>
            <Switch
              checked={emailAlerts}
              onCheckedChange={setEmailAlerts}
              label={t('notif.email')}
            />
          </label>

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

      <div className="flex gap-3">
        {step > 1 ? (
          <Button type="button" variant="secondary" onClick={() => setStep(step - 1)}>
            {t('common.back')}
          </Button>
        ) : null}

        {step < TOTAL_STEPS ? (
          <Button
            type="button"
            size="lg"
            block
            disabled={!canContinue}
            onClick={() => setStep(step + 1)}
          >
            {t('common.continue')}
          </Button>
        ) : (
          <Button
            type="button"
            size="lg"
            block
            disabled={save.isPending}
            onClick={() => save.mutate()}
          >
            {save.isPending ? t('common.saving') : t('setup.finish')}
          </Button>
        )}
      </div>
    </div>
  );
}

function ProgressDots({ step }: { step: number }) {
  const t = useT();
  return (
    <div
      className="flex items-center gap-2"
      role="status"
      aria-label={t('setup.progress', { step, total: TOTAL_STEPS })}
    >
      {Array.from({ length: TOTAL_STEPS }).map((_, index) => (
        <span
          key={index}
          aria-hidden
          className={cn(
            'h-1.5 flex-1 rounded-full transition-colors',
            index < step ? 'bg-accent-600' : 'bg-[var(--border-subtle)]',
          )}
        />
      ))}
    </div>
  );
}

function ChoiceCard({
  selected,
  onSelect,
  title,
  body,
}: {
  selected: boolean;
  onSelect: () => void;
  title: string;
  body?: string;
}) {
  return (
    <button
      type="button"
      aria-pressed={selected}
      onClick={onSelect}
      className={cn(
        'rounded-2xl border p-4 text-left transition-colors',
        'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-600',
        selected ? 'border-accent-600 bg-accent-50' : 'bg-[var(--surface-raised)]',
      )}
    >
      <span className="block font-medium">{title}</span>
      {body ? (
        <span className="mt-1 block text-sm text-[var(--text-muted)] text-pretty">{body}</span>
      ) : null}
    </button>
  );
}

function DependentsEditor({
  dependents,
  onChange,
  relationships,
}: {
  dependents: Dependent[];
  onChange: (next: Dependent[]) => void;
  relationships: Relationship[];
}) {
  const t = useT();
  const [name, setName] = useState('');
  const [relationship, setRelationship] = useState<Relationship>('hijo');

  return (
    <div className="space-y-3 border-t pt-4">
      <div>
        <h2 className="font-medium">{t('setup.dependents.title')}</h2>
        <p className="text-sm text-[var(--text-muted)] text-pretty">{t('setup.dependents.help')}</p>
      </div>

      {dependents.length > 0 ? (
        <ul className="space-y-2">
          {dependents.map((dependent, index) => (
            <li key={`${dependent.displayName}-${index}`} className="flex items-center justify-between gap-3 text-sm">
              <span>
                {dependent.displayName} ({t(`relationship.${dependent.relationship}` as const)})
              </span>
              <button
                type="button"
                className="text-sm text-overdue underline"
                onClick={() => onChange(dependents.filter((_, i) => i !== index))}
              >
                {t('common.remove')}
              </button>
            </li>
          ))}
        </ul>
      ) : null}

      <div className="flex flex-wrap gap-2">
        <Input
          aria-label={t('setup.dependents.name')}
          placeholder={t('setup.dependents.name')}
          value={name}
          className="flex-1"
          onChange={(event) => setName(event.target.value)}
        />
        <select
          aria-label={t('setup.dependents.rel')}
          value={relationship}
          onChange={(event) => setRelationship(event.target.value as Relationship)}
          className="h-12 rounded-2xl border bg-[var(--surface-raised)] px-3 text-base"
        >
          {relationships.map((value) => (
            <option key={value} value={value}>
              {t(`relationship.${value}` as const)}
            </option>
          ))}
        </select>
        <Button
          type="button"
          variant="secondary"
          disabled={name.trim().length === 0}
          onClick={() => {
            onChange([...dependents, { displayName: name.trim(), relationship }]);
            setName('');
          }}
        >
          {t('common.add')}
        </Button>
      </div>
    </div>
  );
}