import type { DemoPasskeyView } from "athena-auth-js";

import { Button } from "../ui/button";
import { Input } from "../ui/input";
import { Label } from "../ui/label";

type PasskeyControlsProps = {
  mode: "sign-in" | "sign-up" | "forgot-password";
  passkeySupported: boolean;
  passkeyName: string;
  onPasskeyNameChange: (value: string) => void;
  authenticatorAttachment: "platform" | "cross-platform";
  onAuthenticatorAttachmentChange: (value: "platform" | "cross-platform") => void;
  passkeys: DemoPasskeyView[];
  passkeyRenameDrafts: Record<string, string>;
  passkeyLoadingAction: string | null;
  passkeyMessage: string | null;
  onRegisterPasskey: () => void;
  onAuthenticateWithPasskey: () => void;
  onRefreshPasskeys: () => void;
  onPasskeyRenameDraftChange: (id: string, value: string) => void;
  onRenamePasskey: (id: string) => void;
  onDeletePasskey: (id: string) => void;
};

export function PasskeyControls({
  mode,
  passkeySupported,
  passkeyName,
  onPasskeyNameChange,
  authenticatorAttachment,
  onAuthenticatorAttachmentChange,
  passkeys,
  passkeyRenameDrafts,
  passkeyLoadingAction,
  passkeyMessage,
  onRegisterPasskey,
  onAuthenticateWithPasskey,
  onRefreshPasskeys,
  onPasskeyRenameDraftChange,
  onRenamePasskey,
  onDeletePasskey,
}: PasskeyControlsProps) {
  if (mode === "forgot-password") return null;

  return (
    <section className="grid gap-3 rounded-2xl border border-cyan-200/70 bg-gradient-to-br from-cyan-50 via-white to-slate-50 p-4 shadow-sm">
      <div className="flex items-center justify-between gap-2">
        <div>
          <h3 className="text-sm font-semibold tracking-wide text-slate-800">Passkeys</h3>
          <p className="text-xs text-slate-600">
            Register this device, then sign in with biometric or security key prompts.
          </p>
        </div>
        <Button
          type="button"
          variant="secondary"
          size="sm"
          onClick={onRefreshPasskeys}
          disabled={Boolean(passkeyLoadingAction)}
        >
          {passkeyLoadingAction === "refresh" ? "Refreshing..." : "Refresh"}
        </Button>
      </div>

      {!passkeySupported ? (
        <p className="rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-900">
          Passkeys are not available in this browser context. Use HTTPS or localhost and a modern
          browser.
        </p>
      ) : null}

      <div className="grid gap-2 sm:grid-cols-2">
        <div className="grid gap-2">
          <Label htmlFor="passkeyName">Passkey label</Label>
          <Input
            id="passkeyName"
            value={passkeyName}
            onChange={(event) => onPasskeyNameChange(event.target.value)}
            placeholder="Primary device"
          />
        </div>
        <div className="grid gap-2">
          <Label htmlFor="passkeyAttachment">Authenticator type</Label>
          <select
            id="passkeyAttachment"
            className="h-10 rounded-lg border border-slate-300 bg-white px-3 text-sm"
            value={authenticatorAttachment}
            onChange={(event) =>
              onAuthenticatorAttachmentChange(
                event.target.value as "platform" | "cross-platform",
              )
            }
          >
            <option value="platform">Platform (Face ID / Touch ID / Windows Hello)</option>
            <option value="cross-platform">Cross-platform (security key / phone)</option>
          </select>
        </div>
      </div>

      <div className="flex flex-wrap gap-2">
        <Button
          type="button"
          onClick={onRegisterPasskey}
          disabled={Boolean(passkeyLoadingAction) || !passkeySupported}
        >
          {passkeyLoadingAction === "register" ? "Registering..." : "Create passkey"}
        </Button>
        <Button
          type="button"
          variant="outline"
          onClick={onAuthenticateWithPasskey}
          disabled={Boolean(passkeyLoadingAction) || !passkeySupported}
        >
          {passkeyLoadingAction === "authenticate"
            ? "Waiting for prompt..."
            : "Sign in with passkey"}
        </Button>
      </div>

      {passkeyMessage ? (
        <p className="rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-700">
          {passkeyMessage}
        </p>
      ) : null}

      <div className="grid gap-2">
        <strong className="text-sm text-slate-800">Registered passkeys</strong>
        {passkeys.length === 0 ? (
          <p className="rounded-md border border-dashed border-slate-300 bg-white px-3 py-2 text-sm text-slate-600">
            No passkeys found for this account yet.
          </p>
        ) : (
          <div className="grid gap-2">
            {passkeys.map((passkey) => (
              <article
                key={passkey.id}
                className="grid gap-2 rounded-xl border border-slate-200 bg-white p-3"
              >
                <div className="flex flex-wrap items-center gap-2 text-xs text-slate-500">
                  <span className="rounded bg-slate-100 px-2 py-0.5">{passkey.id}</span>
                  <span className="rounded bg-slate-100 px-2 py-0.5">{passkey.credentialID}</span>
                  {passkey.createdAt ? (
                    <span className="rounded bg-slate-100 px-2 py-0.5">{passkey.createdAt}</span>
                  ) : null}
                </div>
                <div className="flex flex-wrap gap-2">
                  <Input
                    value={passkeyRenameDrafts[passkey.id] ?? passkey.name}
                    onChange={(event) =>
                      onPasskeyRenameDraftChange(passkey.id, event.target.value)
                    }
                    className="min-w-[220px] flex-1"
                  />
                  <Button
                    type="button"
                    variant="secondary"
                    size="sm"
                    disabled={Boolean(passkeyLoadingAction)}
                    onClick={() => onRenamePasskey(passkey.id)}
                  >
                    {passkeyLoadingAction === `rename:${passkey.id}` ? "Saving..." : "Rename"}
                  </Button>
                  <Button
                    type="button"
                    variant="destructive"
                    size="sm"
                    disabled={Boolean(passkeyLoadingAction)}
                    onClick={() => onDeletePasskey(passkey.id)}
                  >
                    {passkeyLoadingAction === `delete:${passkey.id}` ? "Deleting..." : "Delete"}
                  </Button>
                </div>
              </article>
            ))}
          </div>
        )}
      </div>
    </section>
  );
}
