'use client';

import type { Relationship } from '@impuestos/contracts';
import { useMutation, useQuery, 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 { Skeleton } from '@/components/ui/skeleton';
import { useT } from '@/i18n/t';
import { api } from '@/lib/api';

const RELATIONSHIPS: Relationship[] = ['conyuge', 'hijo', 'padre', 'otro'];

export function DependentsSection() {
  const t = useT();
  const queryClient = useQueryClient();
  const [name, setName] = useState('');
  const [relationship, setRelationship] = useState<Relationship>('hijo');

  const dependents = useQuery({
    queryKey: ['me', 'dependents'],
    queryFn: ({ signal }) => api.listDependents(signal),
  });

  const invalidate = () => queryClient.invalidateQueries({ queryKey: ['me', 'dependents'] });

  const add = useMutation({
    mutationFn: () => api.createDependent({ displayName: name.trim(), relationship }),
    onSuccess: async () => {
      setName('');
      await invalidate();
    },
  });

  const remove = useMutation({
    mutationFn: (id: string) => api.deleteDependent(id),
    onSuccess: invalidate,
  });

  return (
    <Card className="space-y-4">
      <div>
        <h2 className="font-semibold tracking-tight">{t('profile.dependents')}</h2>
        <p className="text-sm text-[var(--text-muted)] text-pretty">{t('setup.dependents.help')}</p>
      </div>

      {dependents.isPending ? <Skeleton name="doc-list-item" count={2} /> : null}

      {dependents.isError ? (
        <div className="space-y-2">
          <p role="alert" className="text-sm text-overdue">
            {t('common.error.generic')}
          </p>
          <Button type="button" variant="secondary" onClick={() => void dependents.refetch()}>
            {t('common.retry')}
          </Button>
        </div>
      ) : null}

      {dependents.data?.length === 0 ? (
        <p className="text-sm text-[var(--text-muted)]">{t('profile.dependents.empty')}</p>
      ) : null}

      {dependents.data && dependents.data.length > 0 ? (
        <ul className="space-y-2">
          {dependents.data.map((dependent) => (
            <li key={dependent.id} 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 disabled:opacity-50"
                disabled={remove.isPending}
                onClick={() => remove.mutate(dependent.id)}
              >
                {t('common.remove')}
              </button>
            </li>
          ))}
        </ul>
      ) : null}

      <div className="flex flex-wrap gap-2 border-t pt-4">
        <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 || add.isPending}
          onClick={() => add.mutate()}
        >
          {t('setup.dependents.add')}
        </Button>
      </div>
    </Card>
  );
}