import { deleteAccount } from "~/fns/account-data";
import { useAction } from "~/hooks/use-action";
import { Button } from "~/ui/Button";
import { Callout, ErrorBanner } from "~/ui/Callout";
import { TextField } from "~/ui/Field";
import { Panel } from "~/ui/Panel";
import { TextLink } from "~/ui/TextLink";

type Props = { account: string; hasPassword: boolean; soleOwnedOrgs: string[] };

export function DeleteAccountPanel({ account, hasPassword, soleOwnedOrgs }: Props) {
  const remove = useAction(deleteAccount, { invalidate: false });
  const blocked = soleOwnedOrgs.length > 0;
  return (
    <Panel tone="danger" title="Delete account">
      <form
        method="post"
        className="space-y-3 p-4 text-sm"
        onSubmit={async (event) => {
          event.preventDefault();
          const form = new FormData(event.currentTarget);
          const result = await remove.run({
            data: { confirm: String(form.get("confirm") ?? ""), password: String(form.get("password") ?? "") },
          });
          if (result) window.location.assign("/");
        }}
      >
        <ErrorBanner message={remove.error} />
        <p className="text-kumo-subtle">
          This permanently deletes your repositories, sites, runners, tokens, keys, stars and settings, cancels any
          subscription immediately (the current period is not refunded), and retires the username{" "}
          <span className="font-mono text-kumo-default">{account}</span>. Issues, pull requests and comments on other
          people's repositories stay, shown as written by “ghost”. See the{" "}
          <TextLink to="/privacy">Privacy Policy</TextLink>. Export your data first if you want a copy.
        </p>
        {blocked ? (
          <Callout tone="warning">
            You are the only owner of{" "}
            {soleOwnedOrgs.map((org, index) => (
              <span key={org}>
                {index > 0 && ", "}
                <TextLink to="/orgs/$org/settings" params={{ org }}>
                  {org}
                </TextLink>
              </span>
            ))}
            . Add another owner or delete {soleOwnedOrgs.length === 1 ? "it" : "them"} before deleting your account.
          </Callout>
        ) : (
          <>
            <TextField
              label={`Type ${account} to confirm`}
              name="confirm"
              required
              autoComplete="off"
              maxLength={100}
            />
            {hasPassword ? (
              <TextField
                label="Current password"
                name="password"
                type="password"
                autoComplete="current-password"
                required
              />
            ) : (
              <p className="text-xs text-kumo-subtle">
                Your account has no password, so you must have signed in within the last 15 minutes.
              </p>
            )}
            <Button type="submit" variant="danger" pending={remove.pending}>
              Delete my account
            </Button>
          </>
        )}
      </form>
    </Panel>
  );
}