'use client';

import { useMutation, useQuery } from '@tanstack/react-query';
import { useRef, 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 { useT } from '@/i18n/t';
import { api } from '@/lib/api';
import { authClient } from '@/lib/auth-client';

/**
 * "Tus datos", the trust section of FLOWS.md E3: what we hold, the consent behind it,
 * and the two ways to take it back. The export is a plain link so the browser downloads
 * it; deletion is a native dialog that will not proceed until the email is typed out.
 */
export function DangerZone() {
  const t = useT();
  const dialog = useRef<HTMLDialogElement>(null);
  const [confirmText, setConfirmText] = useState('');

  const session = useQuery({
    queryKey: ['session'],
    queryFn: async () => (await authClient.getSession()).data,
  });
  const email = session.data?.user.email ?? '';

  const revoke = useMutation({
    mutationFn: () => api.postConsent({ kind: 'data_processing', granted: false }),
    onSuccess: () => window.location.assign('/'),
  });

  const remove = useMutation({
    mutationFn: () => api.deleteAccount({ confirmText }),
    onSuccess: () => window.location.assign('/'),
  });

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

      <p className="text-sm text-[var(--text-muted)] text-pretty">{t('profile.myData.stored')}</p>

      {/* A plain link, not a fetch: the browser saves the file and the API sets the name. */}
      <a
        href="/api/me/data-export"
        download
        className="inline-flex text-sm font-medium text-accent-700 hover:underline"
      >
        {t('profile.myData.export')}
      </a>

      <div className="space-y-2 border-t pt-4">
        <p className="text-sm text-[var(--text-muted)] text-pretty">
          {t('profile.consent.revokeWarn')}
        </p>
        <Button
          type="button"
          variant="secondary"
          disabled={revoke.isPending}
          onClick={() => revoke.mutate()}
        >
          {t('profile.consent.revoke')}
        </Button>
      </div>

      <div className="space-y-2 border-t pt-4">
        <p className="text-sm text-overdue text-pretty">{t('profile.myData.deleteWarn')}</p>
        <Button
          type="button"
          variant="secondary"
          className="border-overdue text-overdue"
          onClick={() => dialog.current?.showModal()}
        >
          {t('profile.myData.delete')}
        </Button>
      </div>

      <dialog
        ref={dialog}
        aria-label={t('profile.myData.delete')}
        className="m-auto w-[min(28rem,calc(100vw-2rem))] rounded-2xl border bg-[var(--surface-raised)] p-6 text-[var(--text)] backdrop:bg-black/40"
      >
        <div className="space-y-4">
          <h3 className="text-lg font-semibold tracking-tight">{t('profile.myData.delete')}</h3>
          <p className="text-sm text-[var(--text-muted)] text-pretty">
            {t('profile.myData.deleteWarn')}
          </p>

          <div className="space-y-1.5">
            <Label htmlFor="confirmText">{t('profile.myData.deletePrompt', { email })}</Label>
            <Input
              id="confirmText"
              value={confirmText}
              autoComplete="off"
              aria-invalid={remove.isError}
              onChange={(event) => setConfirmText(event.target.value)}
            />
          </div>

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

          <div className="flex justify-end gap-2">
            <Button type="button" variant="ghost" onClick={() => dialog.current?.close()}>
              {t('common.cancel')}
            </Button>
            <Button
              type="button"
              className="bg-overdue hover:bg-overdue"
              disabled={
                remove.isPending ||
                confirmText.trim().toLowerCase() !== email.toLowerCase() ||
                email === ''
              }
              onClick={() => remove.mutate()}
            >
              {t('profile.myData.deleteCta')}
            </Button>
          </div>
        </div>
      </dialog>
    </Card>
  );
}