import { useState } from "react";
import { addEmail, removeEmail, resendVerificationEmail, setPrimaryEmail } from "~/fns/account-security";
import type { getSecuritySettings } from "~/fns/account-security";
import { useAction } from "~/hooks/use-action";
import { Button } from "~/ui/Button";
import { TextField } from "~/ui/Field";
import { ErrorBanner } from "~/ui/Callout";
import { Badge } from "~/ui/Badge";
import { Panel } from "~/ui/Panel";

type AccountEmail = Awaited<ReturnType<typeof getSecuritySettings>>["emails"][number];

type Notice = { text: string; devMailUrl?: string | null };
type RowProps = { entry: AccountEmail; hasPassword: boolean; onNotice: (notice: Notice) => void };

function openDevMail(url: string | null) {
  if (url) window.open(url, "_blank", "noopener");
}

function EmailRow({ entry, hasPassword, onNotice }: RowProps) {
  const resend = useAction(resendVerificationEmail, { invalidate: false });
  const remove = useAction(removeEmail);
  const makePrimary = useAction(setPrimaryEmail);
  const [confirming, setConfirming] = useState<"primary" | "remove" | null>(null);
  const error = resend.error ?? remove.error ?? makePrimary.error;
  const canMakePrimary = !entry.primary && entry.verified;

  async function promote(password: string) {
    if (await makePrimary.run({ data: { email: entry.email, password } })) {
      setConfirming(null);
      onNotice({ text: `${entry.email} is now your primary address.` });
    }
  }

  async function drop(password: string) {
    if (await remove.run({ data: { email: entry.email, password } })) {
      setConfirming(null);
      onNotice({ text: `${entry.email} was removed.` });
    }
  }

  return (
    <li className="space-y-2 px-4 py-3">
      <ErrorBanner message={error} />
      <div className="flex flex-wrap items-center gap-2">
        <span className="min-w-0 truncate font-medium text-kumo-strong">{entry.email}</span>
        {entry.primary && <Badge tone="accent">Primary</Badge>}
        {entry.verified ? <Badge tone="success">Verified</Badge> : <Badge tone="warning">Unverified</Badge>}
        <div className="ml-auto flex gap-2">
          {!entry.verified && (
            <Button
              size="sm"
              pending={resend.pending}
              onClick={async () => {
                const result = await resend.run({ data: { email: entry.email } });
                if (result) {
                  onNotice({ text: `Verification email sent to ${entry.email}.`, devMailUrl: result.devMailUrl });
                  openDevMail(result.devMailUrl);
                }
              }}
            >
              Resend verification
            </Button>
          )}
          {canMakePrimary && !confirming && (
            <Button
              size="sm"
              pending={makePrimary.pending}
              onClick={() => (hasPassword ? setConfirming("primary") : void promote(""))}
            >
              Make primary
            </Button>
          )}
          {!entry.primary && !confirming && (
            <Button
              size="sm"
              variant="danger"
              pending={remove.pending}
              onClick={() => (hasPassword ? setConfirming("remove") : void drop(""))}
            >
              Remove
            </Button>
          )}
        </div>
      </div>
      {confirming && (
        <form
          className="flex flex-wrap items-end gap-2"
          onSubmit={async (event) => {
            event.preventDefault();
            const password = String(new FormData(event.currentTarget).get("password") ?? "");
            await (confirming === "remove" ? drop(password) : promote(password));
          }}
        >
          <TextField
            label="Current password"
            name="password"
            type="password"
            autoComplete="current-password"
            required
          />
          <Button
            type="submit"
            size="sm"
            variant={confirming === "remove" ? "danger" : "primary"}
            pending={makePrimary.pending || remove.pending}
          >
            {confirming === "remove" ? "Remove" : "Confirm"}
          </Button>
          <Button size="sm" variant="ghost" onClick={() => setConfirming(null)}>
            Cancel
          </Button>
        </form>
      )}
    </li>
  );
}

export function EmailPanel({ emails, hasPassword }: { emails: AccountEmail[]; hasPassword: boolean }) {
  const add = useAction(addEmail);
  const [notice, setNotice] = useState<Notice | null>(null);

  return (
    <Panel title="Email addresses">
      <div className="text-sm">
        {notice && (
          <output className="block px-4 pt-4 text-kumo-success">
            {notice.text}
            {notice.devMailUrl && (
              <>
                {" "}
                <a className="underline" href={notice.devMailUrl} target="_blank" rel="noopener noreferrer">
                  Open dev mail preview
                </a>
              </>
            )}
          </output>
        )}
        <p className="px-4 pt-4 text-kumo-subtle">
          Your primary address is used for sign-in and notifications. Any verified address can sign commits, match
          CODEOWNERS entries and receive password resets.
        </p>
        <ul className="divide-y divide-kumo-hairline">
          {emails.map((entry) => (
            <EmailRow key={entry.email} entry={entry} hasPassword={hasPassword} onNotice={setNotice} />
          ))}
        </ul>
        <form
          method="post"
          className="space-y-3 border-t border-kumo-hairline p-4"
          onSubmit={async (event) => {
            event.preventDefault();
            const formElement = event.currentTarget;
            const form = new FormData(formElement);
            const next = String(form.get("email") ?? "");
            const result = await add.run({ data: { email: next, password: String(form.get("password") ?? "") } });
            if (result) {
              formElement.reset();
              setNotice({ text: `Check ${next} for a link to confirm it.`, devMailUrl: result.devMailUrl });
              openDevMail(result.devMailUrl);
            }
          }}
        >
          <ErrorBanner message={add.error} />
          <TextField label="Add email address" name="email" type="email" autoComplete="email" required />
          {hasPassword && (
            <TextField
              label="Current password"
              name="password"
              type="password"
              autoComplete="current-password"
              required
            />
          )}
          <Button type="submit" pending={add.pending}>
            Add email
          </Button>
        </form>
      </div>
    </Panel>
  );
}