import { useState } from "react";
import { beginPasskeyRegistration, deletePasskey, finishPasskeyRegistration } from "~/fns/account-security";
import { useAction } from "~/hooks/use-action";
import { usePasskeyRegistration } from "~/hooks/use-passkey";
import { Button } from "~/ui/Button";
import { TextField } from "~/ui/Field";
import { ErrorBanner } from "~/ui/Callout";
import { EmptyState } from "~/ui/EmptyState";
import { Panel } from "~/ui/Panel";
import { RelativeTime } from "~/ui/RelativeTime";
import { RecoveryCodes } from "./RecoveryCodes";

type Passkey = {
  id: string;
  name: string;
  lastUsedAt: number | null;
  createdAt: number;
};

export function PasskeysPanel({ passkeys, hasPassword }: { passkeys: Passkey[]; hasPassword: boolean }) {
  const register = usePasskeyRegistration(beginPasskeyRegistration, finishPasskeyRegistration);
  const remove = useAction(deletePasskey);
  const [removing, setRemoving] = useState<string | null>(null);
  const [codes, setCodes] = useState<string[] | null>(null);

  return (
    <Panel title="Passkeys">
      <div className="space-y-4 p-4 text-sm">
        <p className="text-kumo-subtle">
          Passkeys sign you in without a password and also count as a second factor. Adding one turns on two-factor
          checks for password sign-ins.
        </p>
        <ErrorBanner message={register.error ?? remove.error} />
        {codes && <RecoveryCodes codes={codes} />}
        {passkeys.length === 0 ? (
          <EmptyState title="No passkeys yet" icon="key" />
        ) : (
          <ul className="divide-y divide-kumo-hairline rounded-md border border-kumo-hairline">
            {passkeys.map((key) => (
              <li key={key.id} className="space-y-3 px-3 py-2.5">
                <div className="flex items-center gap-3">
                  <div className="min-w-0 flex-1">
                    <div className="font-medium text-kumo-strong">{key.name}</div>
                    <div className="text-xs text-kumo-subtle">
                      Added <RelativeTime timestamp={key.createdAt} /> ·{" "}
                      {key.lastUsedAt ? (
                        <>
                          used <RelativeTime timestamp={key.lastUsedAt} />
                        </>
                      ) : (
                        "never used"
                      )}
                    </div>
                  </div>
                  <Button variant="danger" size="sm" onClick={() => setRemoving(removing === key.id ? null : key.id)}>
                    Remove
                  </Button>
                </div>
                {removing === key.id && (
                  <form
                    method="post"
                    className="flex items-end gap-2"
                    onSubmit={async (event) => {
                      event.preventDefault();
                      const password = String(new FormData(event.currentTarget).get("password") ?? "");
                      if (await remove.run({ data: { id: key.id, password } })) setRemoving(null);
                    }}
                  >
                    {hasPassword && (
                      <div className="flex-1">
                        <TextField label="Confirm password" name="password" type="password" required />
                      </div>
                    )}
                    <Button type="submit" variant="danger" size="sm" pending={remove.pending}>
                      Confirm removal
                    </Button>
                  </form>
                )}
              </li>
            ))}
          </ul>
        )}
        <form
          method="post"
          className="flex items-end gap-2"
          onSubmit={async (event) => {
            event.preventDefault();
            const formElement = event.currentTarget;
            const form = new FormData(formElement);
            const name = String(form.get("name") ?? "").trim() || "Passkey";
            const result = await register.run({
              name,
              password: String(form.get("password") ?? ""),
            });
            if (result) formElement.reset();
            if (result?.recoveryCodes) setCodes(result.recoveryCodes);
          }}
        >
          <div className="flex-1">
            <TextField label="Passkey name" name="name" placeholder="MacBook Touch ID" maxLength={64} />
          </div>
          {hasPassword && (
            <div className="flex-1">
              <TextField label="Confirm password" name="password" type="password" required />
            </div>
          )}
          <Button type="submit" variant="primary" pending={register.pending}>
            Add a passkey
          </Button>
        </form>
      </div>
    </Panel>
  );
}