// Shared UI primitives for ResumeForge

const { useState, useEffect, useRef } = React;

// ---------- Logo ----------
function JobzLogo({ size = 22 }) {
  return (
    <div style={{ display: "flex", alignItems: "baseline", gap: 6, lineHeight: 1 }}>
      <span
        style={{
          fontFamily: "Newsreader, serif",
          fontWeight: 500,
          fontStyle: "italic",
          fontSize: size,
          color: "var(--ink)",
          letterSpacing: "-0.02em",
        }}
      >
        resumeforge
      </span>
      <span
        style={{
          width: 5,
          height: 5,
          borderRadius: 999,
          background: "var(--accent)",
          display: "inline-block",
          transform: "translateY(-2px)",
        }}
      />
      <span
        style={{
          fontFamily: "'JetBrains Mono', monospace",
          fontSize: Math.round(size * 0.5),
          color: "var(--muted)",
          letterSpacing: "0.02em",
          fontWeight: 500,
        }}
      >
        .dev
      </span>
    </div>
  );
}

// ---------- Small caps label ----------
function Eyebrow({ children, color, style }) {
  return (
    <div
      style={{
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 10,
        textTransform: "uppercase",
        letterSpacing: "0.14em",
        color: color || "var(--muted)",
        fontWeight: 500,
        ...style,
      }}
    >
      {children}
    </div>
  );
}

// ---------- Button ----------
function Button({ variant = "primary", children, onClick, icon, disabled, style }) {
  const base = {
    fontFamily: "Inter, sans-serif",
    fontSize: 13,
    fontWeight: 500,
    padding: "9px 16px",
    borderRadius: 6,
    border: "1px solid transparent",
    cursor: disabled ? "not-allowed" : "pointer",
    display: "inline-flex",
    alignItems: "center",
    gap: 8,
    transition: "all 120ms ease",
    letterSpacing: "-0.005em",
    opacity: disabled ? 0.5 : 1,
    whiteSpace: "nowrap",
  };
  const variants = {
    primary: { background: "var(--ink)", color: "var(--paper)", borderColor: "var(--ink)" },
    accent: { background: "var(--accent)", color: "#14180A", borderColor: "var(--accent)" },
    ghost: { background: "transparent", color: "var(--ink)", borderColor: "var(--border)" },
    quiet: { background: "transparent", color: "var(--muted)", borderColor: "transparent" },
  };
  return (
    <button
      onClick={disabled ? undefined : onClick}
      style={{ ...base, ...variants[variant], ...style }}
      onMouseEnter={(e) => {
        if (disabled) return;
        if (variant === "ghost") e.currentTarget.style.background = "var(--paper-2)";
        if (variant === "quiet") e.currentTarget.style.color = "var(--ink)";
        if (variant === "primary") e.currentTarget.style.background = "#000";
        if (variant === "accent") e.currentTarget.style.filter = "brightness(0.95)";
      }}
      onMouseLeave={(e) => {
        e.currentTarget.style.background = variants[variant].background;
        e.currentTarget.style.color = variants[variant].color;
        e.currentTarget.style.filter = "none";
      }}
    >
      {icon}
      {children}
    </button>
  );
}

// ---------- Icons ----------
const Icon = {
  arrow: (
    <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
      <path d="M2 6h8m0 0L7 3m3 3L7 9" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  ),
  plus: (
    <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
      <path d="M6 2v8M2 6h8" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
    </svg>
  ),
  check: (
    <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
      <path d="M2.5 6.5L5 9l4.5-6" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  ),
  x: (
    <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
      <path d="M2 2l6 6M8 2l-6 6" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
    </svg>
  ),
  download: (
    <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
      <path d="M6 2v6m0 0l-2.5-2.5M6 8l2.5-2.5M2 10h8" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  ),
  doc: (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
      <path d="M3 1.5h5L11 4.5v8H3v-11z" stroke="currentColor" strokeWidth="1.2" />
      <path d="M5 7h4M5 9.5h4M5 4.5h2" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
    </svg>
  ),
  sparkle: (
    <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
      <path d="M6 1.5L7 5l3.5 1L7 7l-1 3.5L5 7 1.5 6 5 5z" fill="currentColor" />
    </svg>
  ),
  settings: (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
      <circle cx="7" cy="7" r="2" stroke="currentColor" strokeWidth="1.2" />
      <path d="M7 1v2M7 11v2M1 7h2M11 7h2M3 3l1.4 1.4M9.6 9.6L11 11M3 11l1.4-1.4M9.6 4.4L11 3" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
    </svg>
  ),
};

// ---------- Status pill ----------
function Pill({ children, tone = "default", style }) {
  const tones = {
    default: { bg: "var(--paper-2)", fg: "var(--muted)", bd: "var(--border)" },
    accent: { bg: "color-mix(in oklab, var(--accent) 12%, transparent)", fg: "var(--accent)", bd: "color-mix(in oklab, var(--accent) 30%, transparent)" },
    success: { bg: "color-mix(in oklab, #4a7a4a 10%, transparent)", fg: "#3d6b3d", bd: "color-mix(in oklab, #4a7a4a 25%, transparent)" },
    warn: { bg: "color-mix(in oklab, #b86a2a 10%, transparent)", fg: "#9a5520", bd: "color-mix(in oklab, #b86a2a 25%, transparent)" },
  };
  const t = tones[tone];
  return (
    <span
      style={{
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 10,
        textTransform: "uppercase",
        letterSpacing: "0.1em",
        padding: "3px 8px",
        borderRadius: 999,
        background: t.bg,
        color: t.fg,
        border: `1px solid ${t.bd}`,
        fontWeight: 500,
        whiteSpace: "nowrap",
        ...style,
      }}
    >
      {children}
    </span>
  );
}

// ---------- Rule ----------
function Rule({ style }) {
  return <div style={{ height: 1, background: "var(--border)", ...style }} />;
}

// ---------- TopBar (in-app header) ----------
function TopBar({ view, onNav, onSettings }) {
  const items = [
    { key: "library", label: "Library" },
    { key: "tailor", label: "New tailoring" },
  ];
  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between",
        padding: "18px 40px",
        borderBottom: "1px solid var(--border)",
        background: "var(--paper)",
        position: "sticky",
        top: 0,
        zIndex: 10,
      }}
    >
      <div style={{ display: "flex", alignItems: "center", gap: 32 }}>
        <div style={{ cursor: "pointer" }} onClick={() => onNav("library")}>
          <JobzLogo size={20} />
        </div>
        <div style={{ display: "flex", gap: 4 }}>
          {items.map((it) => {
            const active =
              view === it.key ||
              (it.key === "library" && view === "resume") ||
              (it.key === "tailor" && (view === "review" || view === "export"));
            return (
              <button
                key={it.key}
                onClick={() => onNav(it.key)}
                style={{
                  fontFamily: "Inter, sans-serif",
                  fontSize: 13,
                  fontWeight: 500,
                  padding: "6px 12px",
                  borderRadius: 5,
                  border: "none",
                  background: active ? "var(--paper-2)" : "transparent",
                  color: active ? "var(--ink)" : "var(--muted)",
                  cursor: "pointer",
                }}
              >
                {it.label}
              </button>
            );
          })}
        </div>
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
        {window.AuthPill ? <window.AuthPill /> : <Eyebrow style={{ fontSize: 10 }}>maya@chen.co</Eyebrow>}
        <button
          onClick={onSettings}
          style={{
            width: 30,
            height: 30,
            borderRadius: 6,
            border: "1px solid var(--border)",
            background: "transparent",
            color: "var(--ink)",
            cursor: "pointer",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
          }}
        >
          {Icon.settings}
        </button>
      </div>
    </div>
  );
}

// ---------- Step indicator (during tailoring flow) ----------
function StepIndicator({ step }) {
  const steps = [
    { key: "tailor", num: "01", label: "Job description" },
    { key: "review", num: "02", label: "Review suggestions" },
    { key: "export", num: "03", label: "Export" },
  ];
  return (
    <div style={{ display: "flex", gap: 0, alignItems: "stretch" }}>
      {steps.map((s, i) => {
        const active = s.key === step;
        const done = steps.findIndex((x) => x.key === step) > i;
        return (
          <div key={s.key} style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <div
                style={{
                  fontFamily: "'JetBrains Mono', monospace",
                  fontSize: 10,
                  letterSpacing: "0.1em",
                  color: active || done ? "var(--accent)" : "var(--muted)",
                }}
              >
                {s.num}
              </div>
              <div
                style={{
                  fontFamily: "Inter, sans-serif",
                  fontSize: 12,
                  fontWeight: 500,
                  color: active ? "var(--ink)" : "var(--muted)",
                }}
              >
                {s.label}
              </div>
            </div>
            {i < steps.length - 1 && (
              <div
                style={{
                  width: 32,
                  height: 1,
                  background: done ? "var(--accent)" : "var(--border)",
                  margin: "0 14px",
                }}
              />
            )}
          </div>
        );
      })}
    </div>
  );
}

Object.assign(window, { JobzLogo, Eyebrow, Button, Icon, Pill, Rule, TopBar, StepIndicator });