Delete account

"use client";
import { useState } from "react";
import { LuDownload, LuTrash2 } from "react-icons/lu";
import { Alert, Button, Dialog, Input } from "@nexera-ui/react";

const CONFIRM_WORD = "DELETE";

const DELETED = [
  "Your profile, photo and emergency contacts",
  "Your notification, appearance and security settings",
  "Messages and comments you wrote in Northwind",
  "Access to every workspace: Northwind UK and Northwind Pakistan",
];

/** Delete account: a clear warning of what goes and what stays, a typed confirmation and a final dialog. */
export default function DeleteAccount() {
  const [typed, setTyped] = useState("");
  const [isOpen, setIsOpen] = useState(false);
  const [deleted, setDeleted] = useState(false);
  const matches = typed.trim() === CONFIRM_WORD;

  return (
    <div className="@container min-h-[560px] bg-page px-4 py-8 @3xl:px-8">
      <div className="mx-auto grid max-w-2xl gap-6">
        <header className="grid gap-1">
          <h2 className="text-heading-h2 text-primary">Delete account</h2>
          <p className="text-body-default text-secondary">Ayesha Khan · ayesha.khan@northwind.io</p>
        </header>
        {deleted ? (
          <Alert
            tone="neutral"
            title="Your account is scheduled for deletion"
            description="It will be deleted on 21 October 2026. Sign in before then to cancel. This is a demo, so nothing was deleted."
          />
        ) : (
          <section className="grid gap-5 rounded-xl border border-status-danger-border bg-surface p-5">
            <Alert
              tone="danger"
              politeness="polite"
              title="This can't be undone after 14 days"
              description="Your account is closed straight away and deleted for good after a 14-day grace period."
            />
            <div className="grid gap-4 @3xl:grid-cols-2">
              <div className="grid content-start gap-2">
                <h3 className="text-heading-h4 text-primary">What gets deleted</h3>
                <ul className="m-0 grid list-disc gap-1 ps-5 text-body-small text-secondary">
                  {DELETED.map((item) => (
                    <li key={item}>{item}</li>
                  ))}
                </ul>
              </div>
              <div className="grid content-start gap-2">
                <h3 className="text-heading-h4 text-primary">What Northwind keeps</h3>
                <p className="text-body-small text-secondary">
                  Payslips, contracts and tax records stay with your employer for 6 years, as UK law
                  requires. Ask People Ops for copies.
                </p>
                <Button
                  variant="secondary"
                  size="sm"
                  leadingIcon={<LuDownload />}
                  className="justify-self-start"
                >
                  Download my data
                </Button>
              </div>
            </div>
            <div className="grid gap-3 border-t border-subtle pt-4 @3xl:grid-cols-[minmax(0,1fr)_auto] @3xl:items-end">
              <Input
                label={`Type ${CONFIRM_WORD} to confirm`}
                name="confirm"
                autoComplete="off"
                value={typed}
                onChange={setTyped}
                description="In capital letters."
              />
              <Button
                variant="destructive"
                size="md"
                leadingIcon={<LuTrash2 />}
                isDisabled={!matches}
                onPress={() => {
                  setIsOpen(true);
                }}
              >
                Delete my account
              </Button>
            </div>
          </section>
        )}
        <Dialog
          isOpen={isOpen}
          onOpenChange={setIsOpen}
          variant="destructive"
          icon={<LuTrash2 />}
          title="Delete your Northwind account?"
          body="You'll be signed out everywhere and lose access to all workspaces. You can cancel within 14 days by signing in."
          primaryLabel="Delete account"
          onPrimaryAction={() => {
            setDeleted(true);
          }}
          secondaryLabel="Keep my account"
        />
      </div>
    </div>
  );
}