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

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

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);
  const currentBrowser = detectBrowser();

  function crossBrowserMessage(entryBrowser: "chrome" | "firefox" | undefined): string | null {
    if (!entryBrowser) return null;
    if (currentBrowser === "unknown") return null;
    if (entryBrowser === currentBrowser) return null;
    const from = entryBrowser === "chrome" ? "Chrome" : "Firefox";
    const to = currentBrowser === "chrome" ? "Chrome" : "Firefox";
    return `This passkey was created on ${from}. To use it on ${to}, re-register it on this device.`;
  }

  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-header" style="position:relative;z-index:1;">
              <div class="peach-entry-header-name">
                <h1 class={`peach-entry-name ${titleSizeClass(entry().title)}`} aria-label={entry().title}>
                  <span class="peach-entry-name-text">{entry().title}</span>
                </h1>
              </div>
              <Show
                when={deleteConfirmPending()}
                fallback={
                  <button
                    class="peach-entry-trash-btn"
                    onClick={() => setDeleteConfirmPending(true)}
                    aria-label="Remove passkey"
                    title="Remove passkey"
                  >
                    <svg width="12" height="13" viewBox="0 0 12 13" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
                      <path d="M1 3h10M4 3V2h4v1M2 3l.7 8.5a1 1 0 0 0 1 .9h4.6a1 1 0 0 0 1-.9L10 3" />
                      <path d="M4.5 6l.3 3.5M7.5 6l-.3 3.5" />
                    </svg>
                  </button>
                }
              >
                <div class="peach-entry-trash-confirm">
                  <span class="peach-entry-trash-confirm-label">remove?</span>
                  <button
                    class="peach-btn peach-btn--sm peach-btn--danger"
                    style="font-size:10px;padding:2px 8px;min-height:22px;"
                    onClick={() => {
                      setDeleteConfirmPending(false);
                      void props.onDelete();
                    }}
                  >
                    yes
                  </button>
                  <button
                    class="peach-btn peach-btn--ghost peach-btn--sm"
                    style="font-size:10px;padding:2px 8px;min-height:22px;"
                    onClick={() => setDeleteConfirmPending(false)}
                  >
                    no
                  </button>
                </div>
              </Show>
            </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>

            <Show when={entry().tags && entry().tags!.length > 0}>
              <div
                style="display:flex;flex-wrap:wrap;gap:5px;margin:6px 0 2px;position:relative;z-index:1;"
              >
                <For each={entry().tags!}>
                  {(tag) => <span class="peach-tag-chip" style="font-size:10px;padding:2px 8px;">{tag}</span>}
                </For>
              </div>
            </Show>

            <div class="peach-passkey-actions">
              <Show when={crossBrowserMessage(entry().browser)}>
                {(msg) => (
                  <div class="peach-info-notice peach-info-notice--warn">
                    {msg()}
                  </div>
                )}
              </Show>
              <div class="peach-info-notice">
                {entry().browser === "firefox"
                  ? "This passkey is held by your platform authenticator. Peach stores only the metadata."
                  : "The private key is stored encrypted in your Peach vault and is never shown in the UI."}
              </div>
            </div>
          </>
        )}
      </Show>
    </div>
  );
}