"use client";

import { FormEvent, useState } from "react";
import { submitDeleteAccountForm } from "@/lib/api";
import { Button } from "@/components/ui/Button";

type Status = "idle" | "submitting" | "success" | "error";

/** POSTs to abos-api's generic form-submission system, form key "delete-account-request".
 *  No self-service instant deletion — this only files a request that staff action, per the
 *  design brief. */
export default function DeleteAccountForm() {
  const [status, setStatus] = useState<Status>("idle");
  const [error, setError] = useState<string | null>(null);

  async function handleSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setStatus("submitting");
    setError(null);
    const formEl = e.currentTarget;
    const data = new FormData(formEl);
    try {
      await submitDeleteAccountForm({
        email: String(data.get("email") || ""),
        reason: String(data.get("reason") || "")
      });
      setStatus("success");
      formEl.reset();
    } catch (err) {
      setStatus("error");
      setError(err instanceof Error ? err.message : "Something went wrong. Please try again.");
    }
  }

  if (status === "success") {
    return (
      <div className="rounded-lg border border-divider bg-surface p-8 text-center">
        <p className="text-ink font-medium">Request received.</p>
        <p className="text-sm text-neutral-600 mt-1">
          Our team will process your account-deletion request and follow up by email within 30 days.
        </p>
      </div>
    );
  }

  return (
    <form onSubmit={handleSubmit} className="flex flex-col gap-5">
      <label className="flex flex-col gap-1.5">
        <span className="text-xs font-semibold uppercase tracking-wide text-neutral-600">Account email</span>
        <input
          name="email"
          type="email"
          required
          className="bg-surface border-0 rounded-lg px-4 py-3 text-sm text-ink focus:outline-none focus:ring-2 focus:ring-accent-500"
        />
      </label>
      <label className="flex flex-col gap-1.5">
        <span className="text-xs font-semibold uppercase tracking-wide text-neutral-600">
          Reason for deletion (optional)
        </span>
        <textarea
          name="reason"
          rows={4}
          className="bg-surface border-0 rounded-lg px-4 py-3 text-sm text-ink focus:outline-none focus:ring-2 focus:ring-accent-500"
        />
      </label>

      {error ? <p className="text-sm text-red-600">{error}</p> : null}

      <Button type="submit" variant="gold" disabled={status === "submitting"} className="self-start">
        {status === "submitting" ? "Submitting…" : "Request Account Deletion"}
      </Button>
    </form>
  );
}