/* global React */

// ─────────────────────────────────────────────────────────────
// LVRD operator app — Small components
//  Avatar, StatusDot, Bubble, SystemMessage, ApprovalCard,
//  CompletionCard, DailyReport, QuickReplies, SendBox, VoicePill,
//  TabBar, TopBar, BackBtn, IconBtn, Toggle
// ─────────────────────────────────────────────────────────────

// ── Icons (14px, 1.5 stroke, currentColor, no fill) ────────────
function LvIcon({ name, size = 18 }) {
  const c = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "back":      return (<svg {...c}><path d="M15 18l-6-6 6-6"/></svg>);
    case "chev":      return (<svg {...c}><path d="M9 6l6 6-6 6"/></svg>);
    case "more":      return (<svg {...c}><circle cx="5" cy="12" r="1.2"/><circle cx="12" cy="12" r="1.2"/><circle cx="19" cy="12" r="1.2"/></svg>);
    case "mic":       return (<svg {...c}><rect x="9" y="3" width="6" height="12" rx="3"/><path d="M5 11a7 7 0 0014 0M12 18v3"/></svg>);
    case "send":      return (<svg {...c}><path d="M4 12l16-8-6 18-3-7-7-3z"/></svg>);
    case "x":         return (<svg {...c}><path d="M6 6l12 12M18 6l-12 12"/></svg>);
    case "plus":      return (<svg {...c}><path d="M12 5v14M5 12h14"/></svg>);
    case "check":     return (<svg {...c}><path d="M4 12l5 5L20 6"/></svg>);
    case "messaging": return (<svg {...c}><path d="M4 6a2 2 0 012-2h12a2 2 0 012 2v8a2 2 0 01-2 2h-5l-4 4v-4H6a2 2 0 01-2-2V6z"/></svg>);
    case "roster":    return (<svg {...c}><circle cx="9" cy="9" r="3"/><path d="M3 19a6 6 0 0112 0"/><circle cx="17" cy="9" r="2.4"/><path d="M15 19a5 5 0 016-4.8"/></svg>);
    case "settings":  return (<svg {...c}><circle cx="12" cy="12" r="2.5"/><path d="M19 12a7 7 0 00-.1-1.2l2-1.5-2-3.4-2.3.9a7 7 0 00-2-1.2l-.4-2.4h-4l-.4 2.4a7 7 0 00-2 1.2l-2.3-.9-2 3.4 2 1.5A7 7 0 005 12a7 7 0 00.1 1.2l-2 1.5 2 3.4 2.3-.9a7 7 0 002 1.2l.4 2.4h4l.4-2.4a7 7 0 002-1.2l2.3.9 2-3.4-2-1.5A7 7 0 0019 12z"/></svg>);
    case "sun":       return (<svg {...c}><circle cx="12" cy="12" r="4"/><path d="M12 3v2M12 19v2M3 12h2M19 12h2M5.5 5.5l1.5 1.5M17 17l1.5 1.5M5.5 18.5L7 17M17 7l1.5-1.5"/></svg>);
    case "moon":      return (<svg {...c}><path d="M20 14.5A8 8 0 119.5 4a7 7 0 0010.5 10.5z"/></svg>);
    case "arrow-r":   return (<svg {...c}><path d="M4 12h16M14 6l6 6-6 6"/></svg>);
    case "arrow-up":  return (<svg {...c}><path d="M12 19V5M6 11l6-6 6 6"/></svg>);
    case "edit":      return (<svg {...c}><path d="M14.5 4.5l5 5L8 21H3v-5l11.5-11.5z"/></svg>);
    case "wave":      return (<svg {...c}><path d="M4 12h2M8 8v8M12 5v14M16 8v8M20 12h-2"/></svg>);
    case "bell":      return (<svg {...c}><path d="M6 10a6 6 0 1112 0c0 4 2 5 2 5H4s2-1 2-5z"/><path d="M10 19a2 2 0 004 0"/></svg>);
    case "pause":     return (<svg {...c}><rect x="7" y="5" width="3" height="14" rx="1"/><rect x="14" y="5" width="3" height="14" rx="1"/></svg>);
    case "play":      return (<svg {...c}><path d="M7 4l13 8-13 8V4z"/></svg>);
    case "archive":   return (<svg {...c}><path d="M3 7h18v3H3z"/><path d="M5 10v9a2 2 0 002 2h10a2 2 0 002-2v-9"/><path d="M10 14h4"/></svg>);
    case "user":      return (<svg {...c}><circle cx="12" cy="8" r="3.5"/><path d="M4 21a8 8 0 0116 0"/></svg>);
    default: return null;
  }
}

// ── Avatar ─────────────────────────────────────────────────────
function LvAvatar({ initials, size }) {
  const cls = "lv-avatar" + (size ? " " + size : "");
  return <span className={cls}>{initials}</span>;
}

// ── Status dot ─────────────────────────────────────────────────
function LvStatusDot({ status }) {
  return <span className={"lv-statusdot " + status} />;
}

// ── Top bar ────────────────────────────────────────────────────
function LvTopBar({ title, eyebrow, leading, trailing, bordered, compact }) {
  return (
    <div className={"lv-topbar" + (bordered ? " bordered" : "")}>
      {leading}
      <div className="lv-stack">
        {eyebrow ? <span className="lv-eyebrow">{eyebrow}</span> : null}
        <h1 className={compact ? "compact" : ""}>{title}</h1>
      </div>
      {trailing}
    </div>
  );
}

function LvBackBtn({ onClick }) {
  return (
    <button className="lv-backbtn" onClick={onClick} aria-label="Back">
      <LvIcon name="back" size={18} />
    </button>
  );
}
function LvIconBtn({ name, onClick, label }) {
  return (
    <button className="lv-iconbtn" onClick={onClick} aria-label={label}>
      <LvIcon name={name} size={18} />
    </button>
  );
}

// ── Toggle ─────────────────────────────────────────────────────
function LvToggle({ on, onChange }) {
  return (
    <button
      className={"lv-toggle" + (on ? " on" : "")}
      role="switch"
      aria-checked={on}
      onClick={() => onChange && onChange(!on)}
    />
  );
}

// ── Bubbles ────────────────────────────────────────────────────
function LvAgentBubble({ text, name, t, showEyebrow }) {
  return (
    <div className="lv-bubble-row agent">
      <div style={{ maxWidth: "85%", display: "flex", flexDirection: "column" }}>
        {showEyebrow && name ? <span className="lv-bubble-eyebrow">{name}</span> : null}
        <div className="lv-bubble agent">{text}</div>
      </div>
    </div>
  );
}
function LvOwnerBubble({ text }) {
  return (
    <div className="lv-bubble-row owner">
      <div className="lv-bubble owner">{text}</div>
    </div>
  );
}

// ── System message ─────────────────────────────────────────────
function LvSystemMessage({ text, expandable }) {
  const [open, setOpen] = React.useState(false);
  if (!expandable) {
    return <div className="lv-sys">{text}</div>;
  }
  return (
    <React.Fragment>
      <div className="lv-sys">
        <span className="expandable" onClick={() => setOpen(!open)}>
          {text}
          <LvIcon name={open ? "x" : "plus"} size={11} />
        </span>
      </div>
      {open ? (
        <div className="lv-sys-detail">
          <div style={{ fontWeight: 600, color: "var(--fg-strong)", textTransform: "uppercase", letterSpacing: "0.08em", fontSize: 10, marginBottom: 8 }}>{expandable.title}</div>
          {expandable.body}
        </div>
      ) : null}
    </React.Fragment>
  );
}

// ── Approval card ──────────────────────────────────────────────
// State machine: idle → (approved | refining → refined | redirecting → redirected)
// Each terminal state shows a confirmation strip with an Undo back to idle.
function LvApprovalCard({ data, onApprove, onRefine, onRedirect, agentName }) {
  const [mode, setMode] = React.useState("idle");
  const [note, setNote] = React.useState("");
  const [redirectTo, setRedirectTo] = React.useState(null);
  const [stamp, setStamp] = React.useState("");

  const nowStamp = () => {
    const d = new Date();
    let h = d.getHours();
    const m = String(d.getMinutes()).padStart(2, "0");
    const ap = h >= 12 ? "PM" : "AM";
    h = h % 12 || 12;
    return h + ":" + m + " " + ap;
  };

  const reset = () => { setMode("idle"); setNote(""); setRedirectTo(null); };

  // Quick refinements — tap one to send it back immediately. For anything
  // more specific, the user composes in the main send box below the thread.
  const refineOptions = [
    { t: "Tighten the price",        s: "Trim 5–10% if you can hold the margin." },
    { t: "Match the Greenfield comp", s: "Mirror that scope and structure." },
    { t: "Soften the timeline",      s: "Give them an extra week of cushion." },
    { t: "Add a 10% contingency",    s: "Line item for surprises in demo." },
  ];

  // Other agents the work could be handed to. Filtered to exclude current agent.
  const handoffTargets = React.useMemo(() => {
    const all = (window.LVRD_AGENTS || []);
    const out = [];
    for (const a of all) {
      if (a.name === agentName) continue;
      out.push(a);
      if (out.length >= 4) break;
    }
    return out;
  }, [agentName]);

  const doApprove = () => {
    setStamp(nowStamp());
    setMode("approved");
    if (onApprove) onApprove(data);
  };

  const doSendRefine = (text) => {
    const clean = (text || "").trim();
    if (!clean) return;
    setNote(clean);
    setStamp(nowStamp());
    setMode("refined");
    if (onRefine) onRefine(data, clean);
  };

  const doRedirect = (agent) => {
    setRedirectTo(agent);
    setStamp(nowStamp());
    setMode("redirected");
    if (onRedirect) onRedirect(data, agent);
  };

  return (
    <div className={"lv-card lv-approval mode-" + mode} role="region" aria-label="Approval required">
      <div className="lv-card-head">
        <span className="label">
          <span className={"lv-statusdot " + (mode === "idle" || mode === "refining" || mode === "redirecting" ? "active" : "off")} />
          {mode === "approved" ? "Approved · " :
           mode === "refined" ? "Sent back for revision · " :
           mode === "redirected" ? "Redirected · " : "Approval required · "}
          {agentName}
        </span>
        <div className="title">{data.title}</div>
        <div className="subtitle">{data.subtitle}</div>
        {data.amount ? (
          <div className="lv-card-headline">
            <span className="amount">{data.amount}</span>
            <span className="units">{data.lineCount}</span>
          </div>
        ) : null}
      </div>
      <div className="lv-card-body">
        {data.bullets.map((b, i) => (
          <div className="lv-card-row" key={i}>
            <span className="k">{b.k}</span>
            <span className="v">{b.v}</span>
          </div>
        ))}
      </div>

      {mode === "idle" ? (
        <div className="lv-card-actions">
          <button className="lv-btn ghost" onClick={() => setMode("redirecting")}>Redirect</button>
          <button className="lv-btn secondary" onClick={() => setMode("refining")}>Refine</button>
          <button className="lv-btn primary" onClick={doApprove}>Approve &amp; send</button>
        </div>
      ) : null}

      {mode === "refining" ? (
        <div className="lv-card-refine">
          <div className="lv-card-refine-eyebrow">Send {agentName} a refinement</div>
          <div className="lv-card-refine-list">
            {refineOptions.map((opt, i) => (
              <button
                key={i}
                className="lv-card-refine-row"
                onClick={() => doSendRefine(opt.t)}
              >
                <span className="who">
                  <span className="n">{opt.t}</span>
                  <span className="r">{opt.s}</span>
                </span>
                <LvIcon name="arrow-r" size={14} />
              </button>
            ))}
          </div>
          <div className="lv-card-refine-hint">
            Need something specific? Type it in the message box below.
          </div>
          <div className="lv-card-actions">
            <button className="lv-btn ghost block" onClick={reset}>Cancel</button>
          </div>
        </div>
      ) : null}

      {mode === "redirecting" ? (
        <div className="lv-card-redirect">
          <div className="lv-card-redirect-eyebrow">Hand this off to</div>
          <div className="lv-card-redirect-list">
            {handoffTargets.length === 0 ? (
              <div className="lv-card-redirect-empty">No other agents available.</div>
            ) : null}
            {handoffTargets.map((a) => (
              <button
                key={a.id}
                className="lv-card-redirect-row"
                onClick={() => doRedirect(a)}
              >
                <LvAvatar initials={a.initials} size="sm" />
                <span className="who">
                  <span className="n">{a.name}</span>
                  <span className="r">{a.role}</span>
                </span>
                <LvIcon name="arrow-r" size={14} />
              </button>
            ))}
          </div>
          <div className="lv-card-actions">
            <button className="lv-btn ghost block" onClick={reset}>Cancel</button>
          </div>
        </div>
      ) : null}

      {mode === "approved" ? (
        <div className="lv-card-receipt approved">
          <span className="ic"><LvIcon name="check" size={13} /></span>
          <span className="msg">
            <span className="t">Approved &amp; sent</span>
            <span className="s">{stamp} · {agentName} is delivering it now</span>
          </span>
          <button className="lv-card-undo" onClick={reset}>Undo</button>
        </div>
      ) : null}

      {mode === "refined" ? (
        <div className="lv-card-receipt refined">
          <span className="ic"><LvIcon name="edit" size={13} /></span>
          <span className="msg">
            <span className="t">Sent back for revision</span>
            <span className="s">{stamp} · "{note}"</span>
          </span>
          <button className="lv-card-undo" onClick={reset}>Undo</button>
        </div>
      ) : null}

      {mode === "redirected" && redirectTo ? (
        <div className="lv-card-receipt redirected">
          <span className="ic"><LvIcon name="arrow-r" size={13} /></span>
          <span className="msg">
            <span className="t">Redirected to {redirectTo.name}</span>
            <span className="s">{stamp} · {agentName} stepped off this thread</span>
          </span>
          <button className="lv-card-undo" onClick={reset}>Undo</button>
        </div>
      ) : null}
    </div>
  );
}

// ── Completion card ────────────────────────────────────────────
function LvCompletionCard({ data, agentName, onView }) {
  const [open, setOpen] = React.useState(false);
  const preview = data.preview;
  const toggle = () => {
    if (preview) setOpen(!open);
    else if (onView) onView(data);
  };
  const label = data.action || "View";
  return (
    <div className={"lv-card lv-completion" + (open ? " is-open" : "")} role="region" aria-label="Completion">
      <div className="lv-card-head">
        <span className="label"><LvIcon name="check" size={11} /> Completed · {agentName}</span>
        <div className="title">{data.title}</div>
      </div>
      <div className="lv-card-body">
        <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8 }}>
          {data.bullets.map((b, i) => (
            <li key={i} style={{ fontSize: 13, lineHeight: "20px", color: "var(--fg)", display: "grid", gridTemplateColumns: "12px 1fr", gap: 8 }}>
              <span style={{ marginTop: 8, width: 4, height: 4, borderRadius: "50%", background: "var(--smoke-400)" }} />
              <span>{b}</span>
            </li>
          ))}
        </ul>
      </div>
      {open && preview ? (
        <div className="lv-card-preview">
          <div className="lv-card-preview-head">
            <span className="lbl">{preview.label}</span>
            {preview.eyebrow ? <span className="sub">{preview.eyebrow}</span> : null}
          </div>
          <div className="lv-card-preview-rows">
            {preview.rows.map((r, i) => (
              <div className="lv-card-preview-row" key={i}>
                <span className="k">{r.k}</span>
                <span className="v">{r.v}</span>
              </div>
            ))}
          </div>
          {preview.footnote ? (
            <div className="lv-card-preview-foot">{preview.footnote}</div>
          ) : null}
        </div>
      ) : null}
      <div className="lv-card-actions" style={{ background: "transparent" }}>
        <button
          className="lv-btn secondary block"
          onClick={toggle}
          aria-expanded={preview ? open : undefined}
        >
          {preview && open ? "Hide details" : label}
        </button>
      </div>
    </div>
  );
}

// ── Daily report ───────────────────────────────────────────────
function LvDailyReport({ data, agentName }) {
  const [open, setOpen] = React.useState({});
  const toggle = (i) => setOpen({ ...open, [i]: !open[i] });
  return (
    <div className="lv-report" role="region" aria-label={data.kindLabel}>
      <div className="head">
        <span className="label"><LvIcon name="sun" size={11} /> {data.kindLabel} · {agentName} · {data.t}</span>
        <div className="headline">{data.headline}</div>
      </div>
      {data.sections.map((s, i) => (
        <div className="lv-report-row" key={i} onClick={() => toggle(i)}>
          <div className="head-r">
            <span className="h-l">{s.h}</span>
            <LvIcon name={open[i] ? "x" : "plus"} size={11} />
          </div>
          {open[i] ? <div className="body">{s.body}</div> : null}
        </div>
      ))}
    </div>
  );
}

// ── Quick replies ──────────────────────────────────────────────
function LvQuickReplies({ items, onPick }) {
  if (!items || !items.length) return null;
  return (
    <div className="lv-chips">
      {items.map((s, i) => (
        <button className="lv-chip" key={i} onClick={() => onPick && onPick(s)}>{s}</button>
      ))}
    </div>
  );
}

// ── Send box ───────────────────────────────────────────────────
function LvSendBox({ placeholder, onMic, value, onSend, mode = "text" }) {
  if (mode === "voice") {
    return <LvVoicePill onCancel={onMic} onSend={onSend} />;
  }
  return (
    <div className="lv-sendbox">
      <div className="ph">{value || placeholder || "Message"}</div>
      <button className="lv-sendbox-btn" onClick={onMic} aria-label="Voice">
        <LvIcon name="mic" size={17} />
      </button>
      <button className="lv-sendbox-btn primary" onClick={() => onSend && onSend(value || "")} aria-label="Send">
        <LvIcon name="arrow-up" size={17} />
      </button>
    </div>
  );
}

// ── Voice pill (active state) ──────────────────────────────────
function LvVoicePill({ onCancel, onSend }) {
  const [seconds, setSeconds] = React.useState(0);
  const [transcript, setTranscript] = React.useState("");
  const phrases = [
    "Tell the",
    "Tell the Quote Writer",
    "Tell the Quote Writer to add",
    "Tell the Quote Writer to add a line",
    "Tell the Quote Writer to add a line for the egress",
    "Tell the Quote Writer to add a line for the egress window",
  ];
  React.useEffect(() => {
    const t = setInterval(() => setSeconds((s) => s + 1), 1000);
    let i = 0;
    const p = setInterval(() => {
      if (i < phrases.length) {
        setTranscript(phrases[i]);
        i++;
      }
    }, 700);
    return () => { clearInterval(t); clearInterval(p); };
  }, []);
  const bars = Array.from({ length: 22 });
  return (
    <React.Fragment>
      <div className="lv-voicepill">
        <button className="lv-sendbox-btn" onClick={onCancel} aria-label="Cancel">
          <LvIcon name="x" size={17} />
        </button>
        <div className="transcript">{transcript || "Listening\u2026"}</div>
        <div className="wave">
          {bars.map((_, i) => (
            <span key={i} style={{ animationDelay: (i * 0.05) + "s", height: 8 }} />
          ))}
        </div>
        <span className="timer">0:{String(seconds).padStart(2, "0")}</span>
        <button className="lv-sendbox-btn primary" onClick={() => onSend && onSend(transcript)} aria-label="Send">
          <LvIcon name="check" size={17} />
        </button>
      </div>
      <div className="lv-voicepill-hint">Tap check to send · X to cancel</div>
    </React.Fragment>
  );
}

// ── Tab bar (bottom nav) ───────────────────────────────────────
function LvTabBar({ tab, onTab, badge }) {
  const tabs = [
    { id: "messaging", label: "Messaging", icon: "messaging" },
    { id: "roster",    label: "Roster",    icon: "roster" },
    { id: "settings",  label: "Account",   icon: "settings" },
  ];
  return (
    <nav className="lv-tabbar">
      {tabs.map((t) => (
        <button
          key={t.id}
          className={"lv-tab" + (tab === t.id ? " active" : "")}
          onClick={() => onTab(t.id)}
        >
          {badge && t.id === badge ? <span className="badge" /> : null}
          <LvIcon name={t.icon} size={22} />
          <span className="label">{t.label}</span>
        </button>
      ))}
    </nav>
  );
}

Object.assign(window, {
  LvIcon, LvAvatar, LvStatusDot,
  LvTopBar, LvBackBtn, LvIconBtn, LvToggle,
  LvAgentBubble, LvOwnerBubble, LvSystemMessage,
  LvApprovalCard, LvCompletionCard, LvDailyReport,
  LvQuickReplies, LvSendBox, LvVoicePill,
  LvTabBar,
});