'use client';

import type { ProfileDto } from '@impuestos/contracts';
import { formatGsAmount } from '@impuestos/i18n';
import { deadlineDay } from '@impuestos/rules';
import { useMutation, useQueryClient } 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 { useT } from '@/i18n/t';
import { api } from '@/lib/api';

export function IdentitySection({ profile }: { profile: ProfileDto }) {
  const t = useT();
  const queryClient = useQueryClient();

  const [fullName, setFullName] = useState(profile.fullName);
  const [income, setIncome] = useState(
    profile.irpGrossEstimate === null ? '' : String(profile.irpGrossEstimate),
  );
  const [autoConfirmDays, setAutoConfirmDays] = useState(String(profile.autoConfirmDays));
  const [obligations, setObligations] = useState(profile.obligations);

  const save = useMutation({
    mutationFn: () =>
      api.putProfile({
        ...profile,
        fullName: fullName.trim(),
        obligations,
        irpGrossEstimate: income === '' ? null : Number(income),
        autoConfirmDays: Number(autoConfirmDays || '0'),
      }),
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['me'] }),
  });

  function toggle(code: 'iva_120' | 'irp_515') {
    const existing = obligations.find((obligation) => obligation.code === code);
    if (existing) {
      setObligations(
        obligations.map((obligation) =>
          obligation.code === code ? { ...obligation, active: !obligation.active } : obligation,
        ),
      );
      return;
    }
    setObligations([
      ...obligations,
      { code, active: true, since: new Date().toISOString().slice(0, 10) },
    ]);
  }

  const active = (code: 'iva_120' | 'irp_515') =>
    obligations.some((obligation) => obligation.code === code && obligation.active);

  return (
    <Card className="space-y-5">
      <h2 className="font-semibold tracking-tight">{t('profile.identity')}</h2>

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

      {/* The document is read only: it decides real filing dates, so changing it is a
          support conversation rather than a text field. */}
      <div className="space-y-1.5">
        <Label htmlFor="doc">{t('setup.docLabel')}</Label>
        <Input
          id="doc"
          readOnly
          value={
            profile.docType === 'ruc' && profile.ruc
              ? `${profile.ruc}-${profile.rucDv ?? ''}`
              : (profile.ci ?? '')
          }
          className="bg-transparent text-[var(--text-muted)]"
        />
        <p className="text-sm text-[var(--text-muted)]">
          {t('vto.explainer', {
            digit: profile.deadlineDigit,
            day: deadlineDay(profile.deadlineDigit),
          })}
        </p>
      </div>

      <fieldset className="space-y-3">
        <legend className="text-sm font-medium text-[var(--text-muted)]">
          {t('profile.obligations')}
        </legend>
        <label className="flex items-center justify-between gap-4">
          <span className="text-sm">{t('setup.oblig.iva.title')}</span>
          <Switch
            checked={active('iva_120')}
            onCheckedChange={() => toggle('iva_120')}
            label={t('setup.oblig.iva.title')}
          />
        </label>
        <label className="flex items-center justify-between gap-4">
          <span className="text-sm">{t('setup.oblig.irp.title')}</span>
          <Switch
            checked={active('irp_515')}
            onCheckedChange={() => toggle('irp_515')}
            label={t('setup.oblig.irp.title')}
          />
        </label>
      </fieldset>

      {active('irp_515') ? (
        <div className="space-y-1.5">
          <Label htmlFor="income">{t('profile.income')}</Label>
          <Input
            id="income"
            inputMode="numeric"
            value={income === '' ? '' : formatGsAmount(Number(income))}
            onChange={(event) => setIncome(event.target.value.replace(/\D/g, ''))}
          />
        </div>
      ) : null}

      <div className="space-y-1.5">
        <Label htmlFor="autoConfirm">{t('profile.autoConfirm')}</Label>
        <Input
          id="autoConfirm"
          inputMode="numeric"
          value={autoConfirmDays}
          aria-describedby="autoConfirm-help"
          onChange={(event) => setAutoConfirmDays(event.target.value.replace(/\D/g, ''))}
        />
        <p id="autoConfirm-help" className="text-sm text-[var(--text-muted)] text-pretty">
          {t('profile.autoConfirm.help')}
        </p>
      </div>

      <div className="flex items-center gap-3">
        <Button type="button" disabled={save.isPending} onClick={() => save.mutate()}>
          {save.isPending ? t('common.saving') : t('common.save')}
        </Button>
        {save.isSuccess ? <span className="text-sm text-positive">{t('profile.saved')}</span> : null}
        {save.isError ? (
          <span role="alert" className="text-sm text-overdue">
            {t('common.error.generic')}
          </span>
        ) : null}
      </div>
    </Card>
  );
}