'use client';

import { useState } from 'react';
import { deleteMyAccountAction } from '@/app/main/settings/deleteAccountAction';

const REQUIRED_PHRASE = 'delete my account';

export default function DangerZone() {
  const [open, setOpen] = useState(false);
  const [password, setPassword] = useState('');
  const [phrase, setPhrase] = useState('');
  const [error, setError] = useState('');
  const [busy, setBusy] = useState(false);

  const submit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError('');
    setBusy(true);
    const res = await deleteMyAccountAction(password, phrase);
    if (res?.error) {
      setError(res.error);
      setBusy(false);
    }
    // If no error, the action redirected — we never reach here.
  };

  return (
    <section className="bg-zinc-900 rounded border border-red-900/50 p-6 space-y-4">
      <header>
        <h2 className="text-sm font-semibold text-red-400 uppercase tracking-wider">
          Danger zone
        </h2>
        <p className="text-xs text-zinc-500 mt-1">
          Permanently deletes your account, every workout you&apos;ve logged,
          every set, your custom exercises, and every session. Other users
          on this instance are not affected.
        </p>
      </header>

      {!open ? (
        <button
          type="button"
          onClick={() => setOpen(true)}
          className="text-xs px-3 py-1.5 rounded border border-red-900 text-red-400 uppercase tracking-wider hover:bg-red-900/30"
        >
          Delete my account
        </button>
      ) : (
        <form onSubmit={submit} className="space-y-3">
          <div className="space-y-2">
            <label
              htmlFor="del-pwd"
              className="text-xs font-semibold text-white uppercase tracking-wider"
            >
              Your password
            </label>
            <input
              id="del-pwd"
              type="password"
              required
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              disabled={busy}
              className="w-full px-4 py-2.5 rounded border border-zinc-700 bg-zinc-800 text-white placeholder:text-zinc-500 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-red-500"
            />
          </div>
          <div className="space-y-2">
            <label
              htmlFor="del-phrase"
              className="text-xs font-semibold text-white uppercase tracking-wider"
            >
              Type{' '}
              <span className="text-red-400 font-mono normal-case">
                {REQUIRED_PHRASE}
              </span>{' '}
              to confirm
            </label>
            <input
              id="del-phrase"
              type="text"
              required
              autoComplete="off"
              value={phrase}
              onChange={(e) => setPhrase(e.target.value)}
              placeholder={REQUIRED_PHRASE}
              disabled={busy}
              className="w-full px-4 py-2.5 rounded border border-zinc-700 bg-zinc-800 text-white placeholder:text-zinc-500 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-red-500"
            />
          </div>

          {error && (
            <div className="rounded bg-red-900/50 px-3 py-2 border border-red-800 text-xs text-red-400">
              {error}
            </div>
          )}

          <div className="flex gap-2">
            <button
              type="submit"
              disabled={busy}
              className="text-xs px-3 py-1.5 rounded bg-red-700 text-white font-bold uppercase tracking-wider hover:bg-red-600 disabled:bg-zinc-700 disabled:text-zinc-500"
            >
              {busy ? 'Deleting...' : 'Delete forever'}
            </button>
            <button
              type="button"
              onClick={() => {
                setOpen(false);
                setPassword('');
                setPhrase('');
                setError('');
              }}
              disabled={busy}
              className="text-xs px-3 py-1.5 rounded border border-zinc-700 text-zinc-300 hover:bg-zinc-800 disabled:opacity-50"
            >
              Cancel
            </button>
          </div>
        </form>
      )}
    </section>
  );
}
