import { Show } from "solid-js";

interface PasskeyApprovalProps {
  type: "create" | "get";
  rpName: string;
  rpId: string;
  userName: string;
  userDisplayName?: string;
  onApprove: () => void | Promise<void>;
  onDeny: () => void | Promise<void>;
}

export function PasskeyApprovalView(props: PasskeyApprovalProps) {
  return (
    <div class="peach-overlay-view ov-enter-up" role="dialog" aria-modal="true">
      <div class="peach-overlay-card peach-passkey-card">
        <div class="peach-passkey-approval">
          <div class="peach-passkey-approval-icon" aria-hidden="true">
            <svg width="22" height="22" viewBox="0 0 22 22" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="7" cy="11" r="3.5" />
              <path d="M10.5 11h9M16.5 11v3M19.5 11v2" />
            </svg>
          </div>

          <div class="peach-passkey-approval-rp">{props.rpId}</div>

          <h2 class="peach-passkey-approval-action">
            {props.type === "create" ? "save a passkey?" : "sign in with passkey?"}
          </h2>

          <Show when={props.userName}>
            <div class="peach-passkey-approval-user">
              {props.userDisplayName ? `${props.userDisplayName} • ${props.userName}` : props.userName}
            </div>
          </Show>

          <div class="peach-passkey-approval-notice">
            {props.type === "create"
              ? `Peach will generate and store a passkey for ${props.rpName || props.rpId}.`
              : `Peach will authenticate you with your stored passkey for ${props.rpName || props.rpId}.`}
          </div>

          <div class="peach-passkey-approval-actions">
            <button class="peach-btn peach-btn--ghost peach-btn--sm" onClick={() => void props.onDeny()}>
              deny
            </button>
            <button class="peach-btn peach-btn--accent peach-btn--sm" onClick={() => void props.onApprove()}>
              {props.type === "create" ? "save passkey" : "sign in"}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}