/* TekConnected — CRM-first board mockup (v2) */
const { useState, useEffect, useRef } = React;

function PipelineMockup({ activeTab, onTab }) {
  const tab = activeTab || "pipeline";
  return (
    <div className="board-card">
      <div className="bc-chrome">
        <span className="bc-dots"><span></span><span></span><span></span></span>
        <div className="bc-url">
          <span className="lock" aria-hidden>🔒</span>
          <span className="mono">your-company.monday.com / sales-pipeline</span>
        </div>
        <span className="bc-meta">●&nbsp;Live</span>
      </div>
      <div className="bc-tabs">
        <button className={`bc-tab ${tab === "pipeline" ? "active" : ""}`} onClick={() => onTab && onTab("pipeline")}>
          <span className="ic" style={{ background: "#0073ea" }}></span>Sales Pipeline
        </button>
        <button className={`bc-tab ${tab === "estimates" ? "active" : ""}`} onClick={() => onTab && onTab("estimates")}>
          <span className="ic" style={{ background: "#ff6a13" }}></span>Estimates &amp; Follow-ups
        </button>
        <button className={`bc-tab ${tab === "handoff" ? "active" : ""}`} onClick={() => onTab && onTab("handoff")}>
          <span className="ic" style={{ background: "#00c875" }}></span>Project Handoff
        </button>
        <span className="bc-tab" style={{ marginLeft: "auto", color: "#8b94a3", pointerEvents: "none" }}>+</span>
      </div>
      {tab === "pipeline" && <PipelineBoard />}
      {tab === "estimates" && <EstimatesBoard />}
      {tab === "handoff" && <HandoffBoard />}
    </div>
  );
}

function PipelineBoard() {
  return (
    <div className="bc-board">
      <div className="bc-group">
        <div className="bc-group-title">
          <span className="chev">▼</span>
          <span className="dot" style={{ background: "#0073ea" }}></span>
          New &amp; Active Leads · 6
        </div>
        <div className="bc-row head">
          <div></div>
          <div>Lead</div>
          <div>Stage</div>
          <div>Owner</div>
          <div>Next Follow-up</div>
          <div>Estimate</div>
        </div>
        <PRow name="Hartwell — kitchen remodel" stage={["Estimate Sent", "work"]} owner={["MR", ""]} next="Tomorrow 9:00 AM" est="$48,200" overdue={false}/>
        <PRow name="Riverstone Office — TI" stage={["Site Visit", "warn"]} owner={["JK", "b"]} next="Fri · walkthrough" est="$184,500" />
        <PRow name="Beachley — showroom buildout" stage={["Contacted", "queue"]} owner={["SK", "c"]} next="Today · 2:30 PM" est="$92,000" />
        <PRow name="Marston residence — addition" stage={["Estimate Sent", "work"]} owner={["MR", ""]} next="Overdue · 3 days" est="$112,800" overdue={true}/>
        <PRow name="L Brook — stair refit" stage={["New Lead", "queue"]} owner={["JK", "b"]} next="Auto-assigned" est="—" />
      </div>
      <div className="bc-group">
        <div className="bc-group-title">
          <span className="chev">▼</span>
          <span className="dot" style={{ background: "#00c875" }}></span>
          Won — Ready for Handoff · 2
        </div>
        <div className="bc-row">
          <div></div>
          <div className="bc-cell-name">Color Splash — exterior repaint</div>
          <div><span className="bc-status done">Won</span></div>
          <div><span className="bc-tag"><span className="av c">SK</span></span></div>
          <div className="mono" style={{ fontSize: 11, color: "#5a6473" }}>→ Handoff queued</div>
          <div className="mono" style={{ color: "#0e1822", fontWeight: 600 }}>$32,400</div>
        </div>
        <div className="bc-row">
          <div></div>
          <div className="bc-cell-name">Winegardner — fitout phase 2</div>
          <div><span className="bc-status done">Won</span></div>
          <div><span className="bc-tag"><span className="av">JK</span></span></div>
          <div className="mono" style={{ fontSize: 11, color: "#5a6473" }}>→ Handoff queued</div>
          <div className="mono" style={{ color: "#0e1822", fontWeight: 600 }}>$56,000</div>
        </div>
      </div>
    </div>
  );
}

function PRow({ name, stage, owner, next, est, overdue }) {
  const [label, kind] = stage;
  const [initials, color] = owner;
  return (
    <div className="bc-row">
      <div></div>
      <div className="bc-cell-name">{name}</div>
      <div><span className={`bc-status ${kind}`}>{label}</span></div>
      <div><span className="bc-tag"><span className={`av ${color}`}>{initials}</span></span></div>
      <div style={{ color: overdue ? "#e2445c" : "#2a3441", fontSize: 11, fontWeight: overdue ? 600 : 400 }}>
        {overdue && <span style={{ marginRight: 6 }}>⚠</span>}
        {next}
      </div>
      <div className="mono" style={{ color: "#0e1822", fontWeight: 600 }}>{est}</div>
    </div>
  );
}

function EstimatesBoard() {
  return (
    <div className="bc-board">
      <div className="bc-group">
        <div className="bc-group-title">
          <span className="chev">▼</span>
          <span className="dot" style={{ background: "#ff6a13" }}></span>
          Estimates Sent — Awaiting Decision · 4
        </div>
        <div className="bc-row head">
          <div></div>
          <div>Lead</div>
          <div>Sent</div>
          <div>Last Contact</div>
          <div>Source</div>
          <div>Value</div>
        </div>
        <ERow name="Marston residence — addition" sent="9 days ago" last="6 days ago" source="Referral" val="$112,800" warn />
        <ERow name="Hartwell — kitchen remodel" sent="2 days ago" last="Today" source="Website" val="$48,200" />
        <ERow name="Sycamore HOA — repaint job" sent="5 days ago" last="2 days ago" source="Google Ads" val="$22,400" />
        <ERow name="Tilden duplex — full reno" sent="14 days ago" last="11 days ago" source="Referral" val="$240,000" warn />
      </div>
    </div>
  );
}

function ERow({ name, sent, last, source, val, warn }) {
  return (
    <div className="bc-row">
      <div></div>
      <div className="bc-cell-name">{name}</div>
      <div style={{ color: warn ? "#e2445c" : "#5a6473", fontWeight: warn ? 600 : 400, fontSize: 11 }}>{warn && "⚠ "}{sent}</div>
      <div style={{ fontSize: 11, color: "#2a3441" }}>{last}</div>
      <div><span className="bc-tag" style={{ background: "#f1efe7", padding: "3px 6px", borderRadius: 3, fontSize: 10 }}>{source}</span></div>
      <div className="mono" style={{ color: "#0e1822", fontWeight: 600 }}>{val}</div>
    </div>
  );
}

function HandoffBoard() {
  return (
    <div className="bc-board">
      <div className="bc-group">
        <div className="bc-group-title">
          <span className="chev">▼</span>
          <span className="dot" style={{ background: "#00c875" }}></span>
          Sales → Ops Handoff Queue · 3
        </div>
        <div className="bc-row head">
          <div></div>
          <div>Job</div>
          <div>From Sales</div>
          <div>To PM</div>
          <div>Checklist</div>
          <div>Value</div>
        </div>
        <HRow name="Color Splash — exterior repaint" from={["SK", "c"]} to={["DT", "d"]} done={6} total={6} val="$32,400" />
        <HRow name="Winegardner — fitout phase 2" from={["JK", "b"]} to={["DT", "d"]} done={4} total={6} val="$56,000" />
        <HRow name="Hartwell — kitchen remodel" from={["MR", ""]} to={["—", "d"]} done={1} total={6} val="$48,200" pending />
      </div>
    </div>
  );
}

function HRow({ name, from, to, done, total, val, pending }) {
  const pct = (done / total) * 100;
  return (
    <div className="bc-row">
      <div></div>
      <div className="bc-cell-name">{name}</div>
      <div><span className="bc-tag"><span className={`av ${from[1]}`}>{from[0]}</span></span></div>
      <div><span className="bc-tag"><span className={`av ${to[1]}`}>{to[0]}</span></span></div>
      <div>
        <div className="bc-bar"><i style={{ width: pct + "%", background: pending ? "#fdab3d" : "#00c875" }}></i></div>
        <span className="mono" style={{ fontSize: 10, color: "#5a6473", marginLeft: 8 }}>{done}/{total}</span>
      </div>
      <div className="mono" style={{ color: "#0e1822", fontWeight: 600 }}>{val}</div>
    </div>
  );
}

function FloatChip({ style, kind, title, sub, chip }) {
  const cls = kind === "monday" ? "m" : kind === "green" ? "g" : "s";
  const label = kind === "monday" ? "M" : kind === "green" ? "✓" : "⚡";
  return (
    <div className="float-chip" style={style} data-chip={chip}>
      <div className={`ic ${cls}`}>{label}</div>
      <div>
        <strong>{title}</strong>
        <span>{sub}</span>
      </div>
    </div>
  );
}

window.PipelineMockup = PipelineMockup;
window.FloatChip = FloatChip;