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

// ----- Icon (Lucide style inline) -----
const Icon = ({ name, size = 18, className = "", style = {} }) => {
  const props = {
    width: size, height: size, viewBox: "0 0 24 24",
    fill: "none", stroke: "currentColor", strokeWidth: 1.75,
    strokeLinecap: "round", strokeLinejoin: "round",
    className, style,
  };
  const paths = {
    search:   <><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></>,
    home:     <><path d="M3 9.5 12 3l9 6.5V21a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1z"/></>,
    pipeline: <><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><circle cx="4" cy="6" r="1.5"/><circle cx="4" cy="12" r="1.5"/><circle cx="4" cy="18" r="1.5"/></>,
    calendar: <><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></>,
    user:     <><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></>,
    contacts: <><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></>,
    file:     <><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></>,
    arrow:    <><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></>,
    send:     <><path d="m22 2-7 20-4-9-9-4Z"/><path d="M22 2 11 13"/></>,
    plus:     <><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></>,
    close:    <><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></>,
    check:    <><polyline points="20 6 9 17 4 12"/></>,
    sparkle:  <><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1"/></>,
    settings: <><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.6 1.6 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.6 1.6 0 0 0-1.8-.3 1.6 1.6 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.6 1.6 0 0 0-1-1.5 1.6 1.6 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.6 1.6 0 0 0 .3-1.8 1.6 1.6 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.6 1.6 0 0 0 1.5-1 1.6 1.6 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.6 1.6 0 0 0 1.8.3H9a1.6 1.6 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.6 1.6 0 0 0 1 1.5 1.6 1.6 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.6 1.6 0 0 0-.3 1.8V9a1.6 1.6 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.6 1.6 0 0 0-1.5 1z"/></>,
    chevron:  <><polyline points="9 18 15 12 9 6"/></>,
    clock:    <><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></>,
    star:     <><path d="M12 2 9.19 8.63 2 9.27l5.45 4.73L5.82 21 12 17.27 18.18 21l-1.64-7 5.46-4.73-7.19-.64L12 2z"/></>,
    inbox:    <><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></>,
    edit:     <><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4z"/></>,
    download: <><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></>,
    link:     <><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></>,
    upload:   <><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></>,
    mic:      <><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="22"/></>,
    fileText: <><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><line x1="8" y1="13" x2="16" y2="13"/><line x1="8" y1="17" x2="13" y2="17"/></>,
    layers:   <><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></>,
    grid:     <><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></>,
    briefcase:<><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></>,
    barChart: <><line x1="12" y1="20" x2="12" y2="10"/><line x1="18" y1="20" x2="18" y2="4"/><line x1="6" y1="20" x2="6" y2="16"/></>,
    target:   <><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1"/></>,
    message:  <><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></>,
    copy:     <><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></>,
    chevronDown: <><polyline points="6 9 12 15 18 9"/></>,
    play:     <><polygon points="6 4 20 12 6 20 6 4"/></>,
    refresh:  <><path d="M21 12a9 9 0 1 1-3-6.7L21 8"/><path d="M21 3v5h-5"/></>,
    globe:    <><circle cx="12" cy="12" r="9"/><line x1="3" y1="12" x2="21" y2="12"/><path d="M12 3a14 14 0 0 1 0 18 14 14 0 0 1 0-18z"/></>,
    puzzle:   <><path d="M9 3a2 2 0 0 1 4 0v1.5a1.5 1.5 0 0 0 3 0V4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h.5a2 2 0 0 1 0 4H21a1 1 0 0 0-1 1v3a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1v-.5a1.5 1.5 0 0 0-3 0V20a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-3a1 1 0 0 0-1-1H3.5a2 2 0 0 1 0-4H4a1 1 0 0 0 1-1V7a1 1 0 0 1 1-1h3a1 1 0 0 0 0-3z"/></>,
    folder:   <><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></>,
    zap:      <><polygon points="13 2 4 14 11 14 10 22 20 9 13 9 13 2"/></>,
    eye:      <><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/></>,
    external: <><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></>,
    sparkles: <><path d="M12 3l1.6 4.4L18 9l-4.4 1.6L12 15l-1.6-4.4L6 9l4.4-1.6L12 3z"/><path d="M19 14l.7 1.9L21.5 17l-1.8.7L19 19.5l-.7-1.8L16.5 17l1.8-.7L19 14z"/></>,
    pin:      <><path d="M12 21s-7-6-7-11a7 7 0 0 1 14 0c0 5-7 11-7 11z"/><circle cx="12" cy="10" r="2.5"/></>,
    graduation: <><path d="M22 9 12 5 2 9l10 4 10-4z"/><path d="M6 11v4c0 1.5 2.7 3 6 3s6-1.5 6-3v-4"/></>,
    trash:    <><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></>,
    lightbulb:<><path d="M9 18h6"/><path d="M10 22h4"/><path d="M12 2a7 7 0 0 0-4 12.7c.6.5 1 1.3 1 2.1v.2h6v-.2c0-.8.4-1.6 1-2.1A7 7 0 0 0 12 2z"/></>,
    building: <><rect x="4" y="2" width="16" height="20" rx="1"/><path d="M9 22v-4h6v4M8 6h.01M12 6h.01M16 6h.01M8 10h.01M12 10h.01M16 10h.01M8 14h.01M12 14h.01M16 14h.01"/></>,
    list:     <><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></>,
    map:      <><circle cx="12" cy="12" r="9"/><path d="M3.6 9h16.8M3.6 15h16.8M12 3a14 14 0 0 1 0 18 14 14 0 0 1 0-18z"/></>,
    waveform: <><line x1="4" y1="10" x2="4" y2="14"/><line x1="8" y1="6" x2="8" y2="18"/><line x1="12" y1="9" x2="12" y2="15"/><line x1="16" y1="4" x2="16" y2="20"/><line x1="20" y1="8" x2="20" y2="16"/></>,
    rotate:   <><path d="M21 12a9 9 0 1 1-3-6.7L21 8"/><path d="M21 3v5h-5"/></>,
    route:    <><circle cx="6" cy="19" r="3"/><path d="M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15"/><circle cx="18" cy="5" r="3"/></>,
    userPlus: <><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" y1="8" x2="19" y2="14"/><line x1="16" y1="11" x2="22" y2="11"/></>,
    lock:     <><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></>,
    handshake:<><path d="m11 17 2 2a1 1 0 1 0 3-3"/><path d="m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4"/><path d="m21 3-9 9"/><path d="M3 7v3a4 4 0 0 0 4 4"/></>,
  };
  return <svg {...props}>{paths[name] || null}</svg>;
};

// ----- Button -----
const Button = ({ variant = "secondary", size = "md", icon, children, onClick, disabled, style }) => {
  const base = {
    display: "inline-flex", alignItems: "center", gap: 8, lineHeight: 1, whiteSpace: "nowrap",
    fontFamily: "var(--font-sans)", fontWeight: 500, cursor: disabled ? "not-allowed" : "pointer",
    borderRadius: 6, borderWidth: "1px", borderStyle: "solid", borderColor: "transparent",
    transition: "background 120ms cubic-bezier(0.2,0.7,0.1,1)",
    opacity: disabled ? 0.4 : 1,
  };
  const sizes = {
    sm: { padding: "6px 11px", fontSize: 13 },
    md: { padding: "9px 16px", fontSize: 14 },
    lg: { padding: "12px 20px", fontSize: 16 },
  };
  const variants = {
    primary:   { background: "var(--cardinal)", color: "var(--fg-on-accent)" },
    secondary: { background: "#fff", color: "var(--fg-1)", borderColor: "rgba(31,27,22,0.12)" },
    ghost:     { background: "transparent", color: "var(--fg-1)" },
  };
  return (
    <button onClick={onClick} disabled={disabled}
      style={{ ...base, ...sizes[size], ...variants[variant], ...style }}>
      {icon && <Icon name={icon} size={14}/>}
      {children}
    </button>
  );
};

// ----- Chip -----
const Chip = ({ tone = "neutral", children, dot = true, onClose }) => {
  const tones = {
    neutral:   { background: "rgba(31,27,22,0.05)", color: "var(--fg-1)",  dot: "var(--fg-2)" },
    applied:   { background: "var(--cardinal-50)",  color: "var(--cardinal-700)", dot: "var(--cardinal)" },
    interview: { background: "var(--slate-tint)",   color: "var(--slate-text)",   dot: "var(--slate)" },
    offer:     { background: "var(--sage-tint)",    color: "var(--sage-text)",    dot: "var(--sage)" },
    draft:     { background: "var(--ochre-tint)",   color: "var(--ochre-text)",   dot: "var(--ochre)" },
    closed:    { background: "var(--cardinal-100)", color: "var(--cardinal-700)", dot: "var(--cardinal)" },
    info:      { background: "var(--slate-tint)",   color: "var(--slate-text)",   dot: "var(--slate)" },
    slate:     { background: "var(--slate-tint)",   color: "var(--slate-text)",   dot: "var(--slate)" },
    sage:      { background: "var(--sage-tint)",    color: "var(--sage-text)",    dot: "var(--sage)" },
    cardinal:  { background: "var(--cardinal-50)",  color: "var(--cardinal-700)", dot: "var(--cardinal)" },
  };
  const t = tones[tone] || tones.neutral;
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 6,
      padding: "3px 10px", borderRadius: 999, fontSize: 12, fontWeight: 500,
      background: t.background, color: t.color, lineHeight: 1.4, whiteSpace: "nowrap",
    }}>
      {dot && <span style={{ width: 6, height: 6, borderRadius: 999, background: t.dot }}/>}
      {children}
      {onClose && (
        <span onClick={onClose} style={{ display:"inline-flex", marginLeft: 2, cursor:"pointer", opacity: 0.6 }}>
          <Icon name="close" size={10}/>
        </span>
      )}
    </span>
  );
};

// ----- Avatar -----
const Avatar = ({ name, color = "var(--slate-tint)", textColor = "var(--slate-text)", size = 28 }) => {
  const initials = name.split(" ").map(w => w[0]).join("").slice(0, 2).toUpperCase();
  return (
    <span style={{
      width: size, height: size, borderRadius: 999,
      display: "inline-flex", alignItems: "center", justifyContent: "center",
      background: color, color: textColor,
      fontSize: size * 0.4, fontWeight: 600, flexShrink: 0,
    }}>{initials}</span>
  );
};

// ----- AgentAvatar, the Offerroom product mark (cardinal circle + writer's glyph) -----
// working: pulse animation when busy.
const AgentAvatar = ({ kind = "offerroom", size = 28, working = false }) => {
  const stroke = Math.max(1.4, size * 0.07);
  const cx = size / 2, cy = size / 2;
  return (
    <span style={{
      width: size, height: size, borderRadius: 999,
      background: "var(--cardinal)",
      display: "inline-flex", alignItems: "center", justifyContent: "center",
      flexShrink: 0, position: "relative",
      boxShadow: working ? "0 0 0 0 rgba(140,21,21,0.4)" : "none",
      animation: working ? "cad-pulse-ring 1.6s ease out infinite" : "none",
    }}>
      <svg viewBox={`0 0 ${size} ${size}`} width={size} height={size}
        style={{ position: "absolute", inset: 0 }}>
        {kind === "offerroom" ? (
          // Two short horizontal marks (writer's stroke)
          <>
            <line x1={cx - size*0.18} y1={cy - size*0.08}
                  x2={cx + size*0.18} y2={cy - size*0.08}
                  stroke="#F6F4EF" strokeWidth={stroke} strokeLinecap="round"/>
            <line x1={cx - size*0.18} y1={cy + size*0.10}
                  x2={cx + size*0.06} y2={cy + size*0.10}
                  stroke="#F6F4EF" strokeWidth={stroke} strokeLinecap="round"/>
          </>
        ) : (
          // Forward chevron (motion)
          <polyline
            points={`${cx - size*0.12},${cy - size*0.16}
                     ${cx + size*0.14},${cy}
                     ${cx - size*0.12},${cy + size*0.16}`}
            fill="none" stroke="#F6F4EF"
            strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round"/>
        )}
      </svg>
    </span>
  );
};

// ----- EntityBar (colored left accent) -----
const EntityBar = ({ color = "var(--slate)" }) => (
  <span style={{
    position: "absolute", left: 0, top: 14, bottom: 14, width: 2,
    background: color, borderRadius: 2,
  }}/>
);

Object.assign(window, { Icon, Button, Chip, Avatar, AgentAvatar, EntityBar });