/* global React */
const { useState, useMemo } = React;

// ---------- shared icons (Lucide-style, 1.5px stroke) ----------
const Icon = ({ d, size = 18, fill = "none", stroke = "currentColor", strokeWidth = 1.5 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={fill} stroke={stroke} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
    {typeof d === "string" ? <path d={d} /> : d}
  </svg>
);
const IconBell    = (p) => <Icon {...p} d="M6 8a6 6 0 1 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10 21a2 2 0 0 0 4 0" />;
const IconChevron = (p) => <Icon {...p} d="M9 18l6-6-6-6" />;
const IconCalendar= (p) => <Icon {...p} d="M3 9h18M5 5h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2zM8 3v4M16 3v4" />;
const IconArrow   = (p) => <Icon {...p} d="M5 12h14M13 6l6 6-6 6" />;
const IconCheck   = (p) => <Icon {...p} d="M5 12l4 4L19 7" />;
const IconBack    = (p) => <Icon {...p} d="M15 18l-6-6 6-6" />;
const IconClose   = (p) => <Icon {...p} d="M6 6l12 12M18 6L6 18" />;
const IconMic     = (p) => <Icon {...p} d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3zM5 11a7 7 0 0 0 14 0M12 18v3" />;
const IconLock    = (p) => <Icon {...p} d="M5 11h14v10H5zM8 11V7a4 4 0 0 1 8 0v4" />;
const IconPin     = (p) => <Icon {...p} d="M12 21s7-7 7-12a7 7 0 1 0-14 0c0 5 7 12 7 12z M12 11a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" />;
const IconSparkle = (p) => <Icon {...p} d="M12 3l1.8 5.4L19 10l-5.2 1.6L12 17l-1.8-5.4L5 10l5.2-1.6z" />;

// ---------- avatar (real-feeling AI placeholder portraits) ----------
function Avatar({ seed, size = 64, name = "" }) {
  // Cool slate-toned placeholder portraits
  const hues = ["220 12% 38%", "210 10% 36%", "230 14% 40%", "200 12% 38%", "240 10% 38%"];
  const h = hues[(seed || 0) % hues.length];
  const initials = name.split(" ").map(s => s[0]).slice(0,2).join("");
  return (
    <div className="avatar" style={{ width: size, height: size, position: "relative", overflow: "hidden", borderRadius: 12, background: `oklch(0.30 0.02 ${230 + seed*5})`}}>
      <svg viewBox="0 0 100 100" width={size} height={size} style={{display:"block"}}>
        <defs>
          <linearGradient id={`g${seed}`} x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor={`hsl(${h})`} stopOpacity="1"/>
            <stop offset="1" stopColor="#1A1816" stopOpacity="1"/>
          </linearGradient>
        </defs>
        <rect width="100" height="100" fill={`url(#g${seed})`}/>
        <circle cx="50" cy="42" r="16" fill="rgba(245,241,234,0.18)"/>
        <ellipse cx="50" cy="86" rx="28" ry="18" fill="rgba(245,241,234,0.14)"/>
        <text x="50" y="56" textAnchor="middle" fontFamily="Newsreader, serif" fontSize="22" fill="rgba(245,241,234,0.85)" fontStyle="italic">{initials}</text>
      </svg>
    </div>
  );
}

// ---------- Top bar ----------
function TopBar({ title, onBack, right }) {
  return (
    <div className="topbar">
      {onBack ? (
        <button className="icon-btn" onClick={onBack} aria-label="Back"><IconBack/></button>
      ) : (
        <h1>1to1</h1>
      )}
      {title && onBack && <div style={{font:"500 14px var(--sans)", color:"var(--text-2)"}}>{title}</div>}
      <div style={{display:"flex", gap:8}}>{right || <button className="icon-btn"><IconBell/></button>}</div>
    </div>
  );
}

window.UI = { Icon, IconBell, IconChevron, IconCalendar, IconArrow, IconCheck, IconBack, IconClose, IconMic, IconLock, IconPin, IconSparkle, Avatar, TopBar };