import { createSignal, Show } from "solid-js";

import type { PasskeyEntry } from "../../shared/types";

interface PasskeyEntryProps {
  entry: PasskeyEntry | null;
  onDelete: () => void | Promise<void>;
}

function formatDate(timestamp?: number): string {
  if (!timestamp) return "Never";
  return new Date(timestamp).toLocaleDateString();
}

function formatUsedCount(count?: number): string {
  const used = count ?? 0;
  return `used ${used} time${used === 1 ? "" : "s"}`;
}

function algorithmLabel(algorithm: -7 | -8): string {
  return algorithm === -8 ? "EdDSA (Ed25519)" : "ES256 (P-256)";
}

function titleSizeClass(title: string): string {
  if (title.length >= 28) return "peach-entry-name--xxl";
  if (title.length >= 20) return "peach-entry-name--xl";
  if (title.length >= 14) return "peach-entry-name--lg";
  return "";
}

export function PasskeyEntryView(props: PasskeyEntryProps) {
  const [deleteConfirmPending, setDeleteConfirmPending] = createSignal(false);

  return (
    <div class="peach-stage" style="position:relative;">
      <Show when={props.entry} fallback={<div class="peach-list-empty"><span>no passkey selected</span></div>}>
        {(entry) => (
          <>
            <div
              class="peach-ghost"
              aria-hidden="true"
              style="position:absolute;top:30px;left:12px;right:0;font-family:'Cormorant Garamond',Georgia,serif;font-size:150px;font-style:italic;font-weight:400;color:var(--t0);opacity:0.03;pointer-events:none;line-height:1;overflow:hidden;white-space:nowrap;z-index:0;"
            >
              {entry().title}
            </div>

            <div class="peach-entry-name-wrap" style="position:relative;z-index:1;">
              <h1 class={`peach-entry-name ${titleSizeClass(entry().title)}`} aria-label={entry().title}>
                <span class="peach-entry-name-text">{entry().title}</span>
              </h1>
            </div>

            <div class="peach-domain" style="position:relative;z-index:1;">
              <div class="peach-domain-row">
                <span class="peach-domain-value">{entry().rpId}</span>
                <span class="peach-passkey-badge">passkey</span>
              </div>
            </div>

            <section class="peach-fields" style="position:relative;z-index:1;">
              <div class="peach-field-card">
                <span class="peach-label">username</span>
                <div class="peach-field-value-row">
                  <span class="peach-field-value">{entry().userName}</span>
                </div>
              </div>

              <div class="peach-field-card">
                <span class="peach-label">display name</span>
                <div class="peach-field-value-row">
                  <span class="peach-field-value">{entry().userDisplayName}</span>
                </div>
              </div>

              <div class="peach-field-card">
                <span class="peach-label">algorithm</span>
                <div class="peach-field-value-row">
                  <span class="peach-field-value">{algorithmLabel(entry().algorithm)}</span>
                </div>
              </div>

              <div class="peach-field-card">
                <span class="peach-label">activity</span>
                <div class="peach-field-value-row peach-passkey-activity">
                  <span class="peach-field-value">{formatUsedCount(entry().signCount)}</span>
                  <span class="peach-passkey-meta">created {formatDate(entry().createdAt)}</span>
                  <span class="peach-passkey-meta">last used {formatDate(entry().lastUsedAt)}</span>
                </div>
              </div>
            </section>

            <div class="peach-passkey-actions">
              <div class="peach-info-notice">
                The private key is stored encrypted in your Peach vault and is never shown in the UI.
              </div>
              <Show
                when={deleteConfirmPending()}
                fallback={
                  <button
                    class="peach-btn peach-btn--ghost peach-btn--sm peach-passkey-delete-btn"
                    onClick={() => setDeleteConfirmPending(true)}
                  >
                    remove passkey
                  </button>
                }
              >
                <div class="peach-passkey-delete-confirm">
                  <span class="peach-passkey-delete-confirm-copy">Remove this passkey?</span>
                  <button
                    class="peach-btn peach-btn--ghost peach-btn--sm"
                    onClick={() => setDeleteConfirmPending(false)}
                  >
                    cancel
                  </button>
                  <button
                    class="peach-btn peach-btn--ghost peach-btn--sm peach-passkey-delete-btn--confirm"
                    onClick={() => {
                      setDeleteConfirmPending(false);
                      void props.onDelete();
                    }}
                  >
                    remove
                  </button>
                </div>
              </Show>
            </div>
          </>
        )}
      </Show>
    </div>
  );
}