'use client';

import { useMutation } from '@tanstack/react-query';
import { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import { Switch } from '@/components/ui/switch';
import { Link, useRouter } from '@/i18n/navigation';
import { useT } from '@/i18n/t';
import { api } from '@/lib/api';

/**
 * Flow A4. Plain language, two switches, one screen. Data processing is required to
 * continue; notifications are genuinely optional and nothing nags about them later.
 */
export function ConsentForm() {
  const t = useT();
  const router = useRouter();
  const [dataProcessing, setDataProcessing] = useState(false);
  const [notifications, setNotifications] = useState(true);

  const grant = useMutation({
    mutationFn: async () => {
      await api.postConsent({ kind: 'data_processing', granted: true });
      await api.postConsent({ kind: 'notifications', granted: notifications });
    },
    onSuccess: () => router.push('/configuracion'),
  });

  return (
    <Card className="space-y-6">
      <div className="space-y-3">
        <h1 className="text-2xl font-semibold tracking-tight text-balance">{t('consent.title')}</h1>
        <p className="text-sm text-[var(--text-muted)] text-pretty">{t('consent.intro')}</p>
        <ul className="space-y-2 text-sm text-[var(--text-muted)]">
          {['consent.bullet1', 'consent.bullet2', 'consent.bullet3'].map((key) => (
            <li key={key} className="flex gap-2">
              <span aria-hidden className="text-positive">
                ✓
              </span>
              <span className="text-pretty">{t(key as 'consent.bullet1')}</span>
            </li>
          ))}
        </ul>
      </div>

      <div className="space-y-4">
        <label className="flex items-start justify-between gap-4">
          <span className="text-sm text-pretty">{t('consent.dataProcessing')}</span>
          <Switch
            checked={dataProcessing}
            onCheckedChange={setDataProcessing}
            label={t('consent.dataProcessing')}
          />
        </label>
        <label className="flex items-start justify-between gap-4">
          <span className="text-sm text-pretty">{t('consent.notifications')}</span>
          <Switch
            checked={notifications}
            onCheckedChange={setNotifications}
            label={t('consent.notifications')}
          />
        </label>
      </div>

      {!dataProcessing ? (
        <p className="text-sm text-[var(--text-muted)]">{t('consent.required')}</p>
      ) : null}

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

      <div className="space-y-3">
        <Button
          type="button"
          size="lg"
          block
          disabled={!dataProcessing || grant.isPending}
          onClick={() => grant.mutate()}
        >
          {grant.isPending ? t('common.saving') : t('consent.accept')}
        </Button>
        <Link
          href="/legal/privacidad"
          className="block text-center text-sm text-accent-700 hover:underline"
        >
          {t('consent.policyLink')}
        </Link>
      </div>
    </Card>
  );
}