// Collaboration & Workflow — comments/annotations, task board, approvals, version history.
const COMMENTS = [
  { who: "Vikram Chatterjee", init: "VC", at: "12 min ago", on: "GeM Quarterly Review", text: "The Punjab dip looks like an MCC artefact — can we annotate the chart so executives don't misread it?", tag: "annotation", replies: 2 },
  { who: "Meera Krishnan", init: "MK", at: "1 hr ago", on: "Vendor Compliance", text: "@Kabir the quality bar on tender_bids_raw is red again. Blocking the sign-off until the GST regex rule passes.", tag: "blocker", replies: 4 },
  { who: "AI Copilot", init: "AI", at: "1 hr ago", on: "Executive Dashboard", text: "Auto-annotation added: Karnataka +18.4% surge traced to 3 BEL/HAL defence orders > ₹20 Cr.", tag: "ai", replies: 0 },
  { who: "Sunita Nair", init: "SN", at: "3 hr ago", on: "Monthly Revenue vs Target", text: "Approved the Q2 numbers. Nice work — margin bridge finally reconciles with the finance ledger. 👍", tag: "approval", replies: 1 },
];

const COLUMNS = [
  { id: "todo", label: "Backlog", tint: "var(--ink-4)" },
  { id: "prog", label: "In Progress", tint: "var(--primary)" },
  { id: "review", label: "In Review", tint: "var(--accent-2)" },
  { id: "done", label: "Done", tint: "var(--ok)" },
];
const CARDS = [
  { col: "todo", t: "Add district drill-down to Geo map", who: "KM", pri: "Med", tag: "geo" },
  { col: "todo", t: "Wire DPDP retention policy to catalog", who: "MK", pri: "High", tag: "governance" },
  { col: "prog", t: "Retrain tender-volume LSTM (drift)", who: "PD", pri: "High", tag: "ml" },
  { col: "prog", t: "Vendor risk scorecard v2", who: "VC", pri: "Med", tag: "analytics" },
  { col: "review", t: "GeM Quarterly Review — final layout", who: "SN", pri: "High", tag: "dashboard" },
  { col: "review", t: "Alert rule: PM2.5 > 200 Delhi", who: "AR", pri: "Low", tag: "alerts" },
  { col: "done", t: "ClickHouse mart migration", who: "KM", pri: "High", tag: "data" },
  { col: "done", t: "Copilot XAI trace card", who: "AR", pri: "Med", tag: "ai" },
];

const APPROVALS = [
  { item: "Publish 'GeM Quarterly Review' to Production", by: "Sunita Nair", step: 2, steps: ["Submitted", "Reviewed", "Approved", "Published"], status: "In review" },
  { item: "Release Vendor Fraud model v3 to prod", by: "Priya Deshmukh", step: 3, steps: ["Submitted", "Validated", "Approved", "Deployed"], status: "Approved" },
  { item: "Grant 'Editor' role — Finance-BI workspace", by: "Aditi Ranganathan", step: 4, steps: ["Requested", "Manager", "Security", "Granted"], status: "Granted" },
  { item: "Export citizen scheme data (PII)", by: "Faisal Ahmed", step: 1, steps: ["Requested", "DPO review", "Approved", "Released"], status: "DPO review" },
];

const VERSIONS = [
  { v: "v14", who: "Sunita Nair", at: "Today 14:04", note: "Fixed margin bridge; added forecast band to revenue chart.", cur: true },
  { v: "v13", who: "AI Copilot", at: "Today 11:20", note: "Auto-inserted Karnataka surge annotation.", cur: false },
  { v: "v12", who: "Vikram Chatterjee", at: "Yesterday", note: "Reordered KPI tiles; added scheme-utilization gauge.", cur: false },
  { v: "v11", who: "Sunita Nair", at: "Jul 12", note: "Switched state map metric to procurement value.", cur: false },
  { v: "v10", who: "Aditi Ranganathan", at: "Jul 10", note: "Initial Q2 layout published.", cur: false },
];

function CollabScreen() {
  const [tab, setTab] = useState("comments");
  const tagColor = (t) => ({ blocker: "danger", ai: "primary", approval: "ok", annotation: "warn" }[t] || "");
  return (
    <div className="screen">
      <div className="screen-head">
        <div>
          <div className="screen-title">Collaboration &amp; Workflow</div>
          <div className="screen-sub">Comments, annotations, tasks &amp; approval workflows · <span className="mono">28</span> open threads · <span className="mono">6</span> pending approvals</div>
        </div>
        <div className="screen-actions">
          <button className="btn"><Icon name="users"/>Share workspace</button>
          <button className="btn primary"><Icon name="plus"/>New task</button>
        </div>
      </div>

      <div style={{ borderBottom: '1px solid var(--border)', marginBottom: 16, display: 'flex', gap: 4 }}>
        {[{ id: "comments", label: "Comments & Annotations", c: 28 }, { id: "tasks", label: "Task Board", c: 8 }, { id: "approvals", label: "Approvals", c: 6 }, { id: "versions", label: "Version History", c: 14 }].map(t => (
          <button key={t.id} onClick={() => setTab(t.id)} style={{ padding: '10px 14px', border: 'none', background: 'none', color: tab === t.id ? 'var(--ink)' : 'var(--ink-3)', fontWeight: tab === t.id ? 600 : 500, fontSize: 13, cursor: 'pointer', borderBottom: '2px solid ' + (tab === t.id ? 'var(--primary)' : 'transparent'), marginBottom: -1, fontFamily: 'inherit' }}>
            {t.label} <span style={{ color: 'var(--ink-4)', fontWeight: 500 }}>· {t.c}</span>
          </button>
        ))}
      </div>

      {tab === "comments" && (
        <div className="grid" style={{ gridTemplateColumns: '1.7fr 1fr' }}>
          <div className="card">
            <div className="card-head"><h3>Activity &amp; Threads</h3><span className="tag ok"><span className="live-dot"/>Live</span></div>
            <div className="card-body" style={{ padding: 0 }}>
              {COMMENTS.map((c, i) => (
                <div key={i} style={{ padding: '14px 16px', borderTop: i ? '1px solid var(--border)' : 0, display: 'flex', gap: 12 }}>
                  <div className="avatar" style={{ width: 32, height: 32, fontSize: 11, flexShrink: 0, background: c.init === 'AI' ? 'linear-gradient(140deg, var(--primary), var(--accent))' : `linear-gradient(140deg, hsl(${i * 67} 55% 55%), hsl(${i * 67 + 30} 55% 45%))` }}>{c.init}</div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 3, flexWrap: 'wrap' }}>
                      <b style={{ fontSize: 12.5 }}>{c.who}</b>
                      <span className={`tag ${tagColor(c.tag)}`} style={{ fontSize: 10 }}>{c.tag}</span>
                      <span style={{ fontSize: 11, color: 'var(--ink-3)' }}>on <span style={{ color: 'var(--primary)' }}>{c.on}</span> · {c.at}</span>
                    </div>
                    <div style={{ fontSize: 12.5, color: 'var(--ink-2)', lineHeight: 1.5 }} dangerouslySetInnerHTML={{ __html: c.text.replace(/@(\w+)/g, '<b style="color:var(--primary)">@$1</b>') }}/>
                    <div style={{ marginTop: 7, display: 'flex', gap: 12, fontSize: 11, color: 'var(--ink-3)' }}>
                      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, cursor: 'pointer' }}><Icon name="message" size={11}/>{c.replies} replies</span>
                      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, cursor: 'pointer' }}><Icon name="thumbsUp" size={11}/>React</span>
                      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, cursor: 'pointer' }}><Icon name="check" size={11}/>Resolve</span>
                    </div>
                  </div>
                </div>
              ))}
              <div style={{ padding: 12, borderTop: '1px solid var(--border)', display: 'flex', gap: 8, alignItems: 'center' }}>
                <input placeholder="Comment or @mention a teammate…" style={{ flex: 1, height: 34, borderRadius: 8, border: '1px solid var(--border)', background: 'var(--panel-2)', padding: '0 12px', fontSize: 12.5, color: 'var(--ink)', outline: 'none', fontFamily: 'inherit' }}/>
                <button className="btn primary sm"><Icon name="send" size={12}/>Post</button>
              </div>
            </div>
          </div>
          <div className="vstack">
            <div className="card"><div className="card-head" style={{ padding: '10px 12px' }}><h3 style={{ fontSize: 12 }}>Team presence</h3></div>
              <div className="card-body" style={{ padding: 12 }}>
                {["Aditi R.", "Vikram C.", "Meera K.", "Kabir M."].map((n, i) => (
                  <div key={n} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '5px 0', fontSize: 12 }}>
                    <span className="live-dot" style={{ background: i < 3 ? 'var(--ok)' : 'var(--ink-4)', animation: i < 3 ? undefined : 'none' }}/>{n}
                    <span className="spacer"/><span style={{ fontSize: 10.5, color: 'var(--ink-3)' }}>{i < 3 ? 'editing' : 'away'}</span>
                  </div>
                ))}
              </div>
            </div>
            <div className="ai-strip">
              <div className="glyph"><Icon name="sparkles"/></div>
              <div style={{ flex: 1 }}>
                <div className="title">AI thread summary</div>
                <div className="body" style={{ fontSize: 12 }}>2 blockers open on the Q2 review — both trace to the <span className="mono">tender_bids_raw</span> GST regex rule. Fixing that data-quality rule unblocks sign-off.</div>
                <div className="actions"><button className="btn sm">Open rule</button></div>
              </div>
            </div>
          </div>
        </div>
      )}

      {tab === "tasks" && (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
          {COLUMNS.map(col => {
            const items = CARDS.filter(c => c.col === col.id);
            return (
              <div key={col.id} style={{ background: 'var(--panel-2)', border: '1px solid var(--border)', borderRadius: 10, padding: 8, minHeight: 200 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '4px 6px 8px' }}>
                  <span style={{ width: 8, height: 8, borderRadius: 2, background: col.tint }}/>
                  <span style={{ fontSize: 12, fontWeight: 600 }}>{col.label}</span>
                  <span style={{ fontSize: 10.5, color: 'var(--ink-3)' }}>{items.length}</span>
                  <span className="spacer"/><Icon name="plus" size={13} style={{ color: 'var(--ink-4)', cursor: 'pointer' }}/>
                </div>
                {items.map((c, i) => (
                  <div key={i} className="card" style={{ padding: 10, marginBottom: 6, cursor: 'grab' }}>
                    <div style={{ fontSize: 12, color: 'var(--ink)', lineHeight: 1.4, marginBottom: 8 }}>{c.t}</div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                      <span className="tag" style={{ fontSize: 9.5 }}>#{c.tag}</span>
                      <span className={`tag ${c.pri === 'High' ? 'danger' : c.pri === 'Med' ? 'warn' : ''}`} style={{ fontSize: 9.5 }}>{c.pri}</span>
                      <span className="spacer"/>
                      <div className="avatar" style={{ width: 20, height: 20, fontSize: 9, background: `linear-gradient(140deg, hsl(${i * 71} 55% 55%), hsl(${i * 71 + 30} 55% 45%))` }}>{c.who}</div>
                    </div>
                  </div>
                ))}
              </div>
            );
          })}
        </div>
      )}

      {tab === "approvals" && (
        <div className="vstack">
          {APPROVALS.map((a, i) => (
            <div key={i} className="card" style={{ padding: 16 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
                <div style={{ width: 34, height: 34, borderRadius: 8, background: a.status === 'Granted' || a.status === 'Approved' ? 'var(--ok-tint)' : 'var(--accent-tint)', display: 'grid', placeItems: 'center', flexShrink: 0 }}>
                  <Icon name={a.status === 'Granted' || a.status === 'Approved' ? 'check' : 'clock'} size={16} style={{ color: a.status === 'Granted' || a.status === 'Approved' ? 'var(--ok)' : 'var(--accent-2)' }}/>
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13, fontWeight: 600 }}>{a.item}</div>
                  <div style={{ fontSize: 11.5, color: 'var(--ink-3)' }}>Requested by {a.by}</div>
                </div>
                <span className={`tag ${a.status === 'Granted' || a.status === 'Approved' ? 'ok' : 'warn'}`}>{a.status}</span>
                {a.step < a.steps.length && <><button className="btn sm"><Icon name="close" size={11}/>Reject</button><button className="btn primary sm"><Icon name="check" size={11}/>Approve</button></>}
              </div>
              <div style={{ display: 'flex', alignItems: 'center' }}>
                {a.steps.map((s, si) => (
                  <React.Fragment key={si}>
                    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, flexShrink: 0 }}>
                      <div style={{ width: 22, height: 22, borderRadius: 50, background: si < a.step ? 'var(--ok)' : si === a.step ? 'var(--primary)' : 'var(--panel-3)', color: si <= a.step ? 'white' : 'var(--ink-4)', display: 'grid', placeItems: 'center', fontSize: 10, fontWeight: 600 }}>
                        {si < a.step ? <Icon name="check" size={11}/> : si + 1}
                      </div>
                      <span style={{ fontSize: 10, color: si <= a.step ? 'var(--ink-2)' : 'var(--ink-4)', fontWeight: si === a.step ? 600 : 400 }}>{s}</span>
                    </div>
                    {si < a.steps.length - 1 && <div style={{ flex: 1, height: 2, background: si < a.step ? 'var(--ok)' : 'var(--border)', margin: '0 6px', marginBottom: 16 }}/>}
                  </React.Fragment>
                ))}
              </div>
            </div>
          ))}
        </div>
      )}

      {tab === "versions" && (
        <div className="card">
          <div className="card-head"><div><h3>Version History — GeM Quarterly Review</h3><div className="sub">Immutable · every publish snapshotted · restore any version</div></div><button className="btn sm"><Icon name="gitMerge" size={11}/>Compare</button></div>
          <div className="card-body" style={{ padding: '8px 16px' }}>
            {VERSIONS.map((v, i) => (
              <div key={i} style={{ display: 'flex', gap: 12, paddingBottom: i < VERSIONS.length - 1 ? 14 : 0, position: 'relative' }}>
                {i < VERSIONS.length - 1 && <div style={{ position: 'absolute', left: 10, top: 22, bottom: 0, width: 1, background: 'var(--border)' }}/>}
                <div style={{ width: 21, height: 21, borderRadius: 50, background: v.cur ? 'var(--primary)' : 'var(--panel-3)', border: '2px solid var(--panel)', display: 'grid', placeItems: 'center', flexShrink: 0, zIndex: 1, marginTop: 2 }}>
                  <Icon name="gitCommit" size={12} style={{ color: v.cur ? 'white' : 'var(--ink-3)' }}/>
                </div>
                <div style={{ flex: 1, paddingTop: 1 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <span className="mono" style={{ fontWeight: 600, fontSize: 12.5 }}>{v.v}</span>
                    {v.cur && <span className="tag primary" style={{ fontSize: 10 }}>current</span>}
                    <span style={{ fontSize: 11.5, color: 'var(--ink-3)' }}>{v.who} · {v.at}</span>
                    <span className="spacer"/>
                    {!v.cur && <button className="btn sm" style={{ height: 22, fontSize: 10.5 }}><Icon name="refresh" size={10}/>Restore</button>}
                  </div>
                  <div style={{ fontSize: 12, color: 'var(--ink-2)', marginTop: 3 }}>{v.note}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

window.CollabScreen = CollabScreen;