admin / Apex

import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { api } from "../lib/api";
import { useAuth } from "../lib/auth";
import WorkflowBar from "../components/WorkflowBar";
import Gantt from "../components/Gantt";
import AssistantCloud from "../components/AssistantCloud";

const TABS = ["Overview", "Documents", "Requirements", "Responses", "Plan", "Cost", "Pricing", "Assistant", "Package", "Activity"];

export default function BidWorkspace() {
  const { id } = useParams();
  const bidId = Number(id);
  const [bid, setBid] = useState<any>(null);
  const [adminAiOn, setAdminAiOn] = useState(false);
  const [tab, setTab] = useState("Overview");

  async function loadBid() {
    setBid(await api.get(`/bids/${bidId}`));
  }
  useEffect(() => {
    loadBid();
    api.get("/config").then((c) => setAdminAiOn(c.assistant_admin_enabled)).catch(() => {});
  }, [bidId]);

  if (!bid) return <div>Loading…</div>;

  return (
    <div>
      <div className="topbar">
        <div>
          <h1>{bid.title}</h1>
          <span className="muted">{bid.ref} · {bid.client || "—"}</span>
        </div>
      </div>
      <WorkflowBar bid={bid} reload={loadBid} />
      <div className="tabs">
        {TABS.map((t) => (
          <button key={t} className={tab === t ? "active" : ""} onClick={() => setTab(t)}>{t}</button>
        ))}
      </div>
      {tab === "Overview" && <Overview bid={bid} reload={loadBid} />}
      {tab === "Documents" && <Documents bidId={bidId} />}
      {tab === "Requirements" && <Requirements bidId={bidId} />}
      {tab === "Responses" && <Responses bidId={bidId} bid={bid} adminAiOn={adminAiOn} />}
      {tab === "Plan" && <Plan bidId={bidId} reload={loadBid} />}
      {tab === "Cost" && <Cost bidId={bidId} />}
      {tab === "Pricing" && <Pricing bidId={bidId} />}
      {tab === "Assistant" && <Assistant bid={bid} adminAiOn={adminAiOn} reload={loadBid} />}
      {tab === "Package" && <PackageTab bidId={bidId} reload={loadBid} />}
      {tab === "Activity" && <Activity bidId={bidId} />}
      <AssistantCloud bidId={bidId} active={adminAiOn && bid.assistant_enabled} onView={() => setTab("Assistant")} />
    </div>
  );
}

function Overview({ bid, reload }: { bid: any; reload: () => void }) {
  const { has } = useAuth();
  const [edit, setEdit] = useState(false);
  const [form, setForm] = useState<any>(bid);
  useEffect(() => setForm(bid), [bid]);
  async function save() {
    await api.patch(`/bids/${bid.id}`, {
      title: form.title, client: form.client, start_date: form.start_date, submission_date: form.submission_date,
      frameworks: form.frameworks, win_themes: form.win_themes,
      opportunity_value: Number(form.opportunity_value), contract_duration_months: Number(form.contract_duration_months),
      web_link: form.web_link,
    });
    setEdit(false);
    reload();
  }
  const canEdit = has("bid_manager");
  return (
    <div className="card">
      <div className="spread">
        <h2>Opportunity</h2>
        {canEdit && (edit
          ? <div className="row"><button onClick={save}>Save</button><button className="ghost" onClick={() => setEdit(false)}>Cancel</button></div>
          : <button className="secondary" onClick={() => setEdit(true)}>Edit</button>)}
      </div>
      {!edit ? (
        <div className="grid2">
          <div><label>Client</label><div>{bid.client || "—"}</div></div>
          <div><label>Opportunity value</label><div>£{Number(bid.opportunity_value).toLocaleString()}</div></div>
          <div><label>Contract duration</label><div>{bid.contract_duration_months} months</div></div>
          <div><label>Opportunity link</label><div>{bid.web_link ? <a href={bid.web_link} target="_blank" rel="noreferrer">{bid.web_link}</a> : "—"}</div></div>
          <div><label>Start date</label><div>{bid.start_date}</div></div>
          <div><label>Submission date</label><div>{bid.submission_date}</div></div>
          <div style={{ gridColumn: "1 / span 2" }}><label>Win themes</label><div>{bid.win_themes || <span className="muted">None recorded</span>}</div></div>
        </div>
      ) : (
        <div className="grid2">
          <div><label>Client</label><input value={form.client} onChange={(e) => setForm({ ...form, client: e.target.value })} /></div>
          <div><label>Opportunity value (£)</label><input type="number" value={form.opportunity_value} onChange={(e) => setForm({ ...form, opportunity_value: e.target.value })} /></div>
          <div><label>Contract duration (months)</label><input type="number" value={form.contract_duration_months} onChange={(e) => setForm({ ...form, contract_duration_months: e.target.value })} /></div>
          <div><label>Opportunity link</label><input type="url" value={form.web_link} onChange={(e) => setForm({ ...form, web_link: e.target.value })} /></div>
          <div><label>Start date</label><input type="date" value={form.start_date} onChange={(e) => setForm({ ...form, start_date: e.target.value })} /></div>
          <div><label>Submission date</label><input type="date" value={form.submission_date} onChange={(e) => setForm({ ...form, submission_date: e.target.value })} /></div>
          <div style={{ gridColumn: "1 / span 2" }}><label>Win themes</label><textarea rows={2} value={form.win_themes} onChange={(e) => setForm({ ...form, win_themes: e.target.value })} /></div>
        </div>
      )}
    </div>
  );
}

function Documents({ bidId }: { bidId: number }) {
  const [docs, setDocs] = useState<any[]>([]);
  const [busy, setBusy] = useState(false);
  async function load() { setDocs(await api.get(`/bids/${bidId}/documents`)); }
  useEffect(() => { load(); }, [bidId]);
  async function upload(e: React.ChangeEvent<HTMLInputElement>) {
    if (!e.target.files?.length) return;
    setBusy(true);
    const fd = new FormData();
    fd.append("kind", "tender");
    Array.from(e.target.files).forEach((f) => fd.append("files", f));
    await api.postForm(`/bids/${bidId}/documents`, fd);
    setBusy(false);
    load();
  }
  return (
    <div className="card">
      <div className="spread"><h2>Tender documents</h2>
        <label className="secondary" style={{ border: "1px solid var(--apex-indigo)", padding: "8px 14px", borderRadius: 8, color: "var(--apex-indigo)", cursor: "pointer", width: "auto" }}>
          {busy ? "Uploading…" : "Upload"}
          <input type="file" multiple hidden onChange={upload} accept=".pdf,.docx,.xlsx,.txt,.md" />
        </label>
      </div>
      <table><tbody>
        {docs.map((d) => <tr key={d.id}><td>{d.filename}</td><td className="muted">{d.kind}</td><td className="muted">{(d.size / 1024).toFixed(0)} KB</td></tr>)}
        {docs.length === 0 && <tr><td className="muted">No documents uploaded.</td></tr>}
      </tbody></table>
    </div>
  );
}

function Requirements({ bidId }: { bidId: number }) {
  const [reqs, setReqs] = useState<any[]>([]);
  const [msg, setMsg] = useState("");
  async function load() { setReqs(await api.get(`/bids/${bidId}/requirements`)); }
  useEffect(() => { load(); }, [bidId]);
  async function extract() {
    setMsg("Extraction started — refresh in a few seconds.");
    try { await api.post(`/bids/${bidId}/requirements/extract`); }
    catch (e: any) { setMsg(e.message); }
  }
  async function addBlank() {
    await api.post(`/bids/${bidId}/requirements`, { ref: "NEW", question_text: "New requirement" });
    load();
  }
  function patch(r: any, field: string, value: any) {
    setReqs(reqs.map((x) => x.id === r.id ? { ...x, [field]: value } : x));
  }
  async function save(r: any) {
    await api.patch(`/requirements/${r.id}`, { ...r, word_limit: r.word_limit ? Number(r.word_limit) : null });
    load();
  }
  async function del(rid: number) { await api.del(`/requirements/${rid}`); load(); }
  return (
    <div className="card">
      <div className="spread"><h2>Requirements (review gate)</h2>
        <div className="row">
          <button className="secondary" onClick={extract}>Extract from tender</button>
          <button className="ghost" onClick={addBlank}>+ Add</button>
          <button className="ghost" onClick={load}>Refresh</button>
        </div>
      </div>
      {msg && <p className="muted">{msg}</p>}
      <table>
        <thead><tr><th>Ref</th><th>Question</th><th>Type</th><th>Word limit</th><th>Mand.</th><th></th></tr></thead>
        <tbody>
          {reqs.map((r) => (
            <tr key={r.id}>
              <td><input value={r.ref} onChange={(e) => patch(r, "ref", e.target.value)} onBlur={() => save(r)} style={{ width: 70 }} /></td>
              <td><input value={r.question_text} onChange={(e) => patch(r, "question_text", e.target.value)} onBlur={() => save(r)} /></td>
              <td>{r.type}</td>
              <td><input type="number" placeholder="—" value={r.word_limit ?? ""} onChange={(e) => patch(r, "word_limit", e.target.value)} onBlur={() => save(r)} style={{ width: 80 }} /></td>
              <td><input type="checkbox" style={{ width: "auto" }} checked={r.mandatory} onChange={(e) => { patch(r, "mandatory", e.target.checked); save({ ...r, mandatory: e.target.checked }); }} /></td>
              <td><button className="iconbtn danger" onClick={() => del(r.id)}>✕</button></td>
            </tr>
          ))}
          {reqs.length === 0 && <tr><td colSpan={6} className="muted">No requirements. Upload a tender then Extract.</td></tr>}
        </tbody>
      </table>
    </div>
  );
}

function wordCount(s: string) { return (s || "").trim() ? (s || "").trim().split(/\s+/).length : 0; }

function Responses({ bidId, bid, adminAiOn }: { bidId: number; bid: any; adminAiOn: boolean }) {
  const [reqs, setReqs] = useState<any[]>([]);
  const [resps, setResps] = useState<any[]>([]);
  const [msg, setMsg] = useState("");
  const [libFor, setLibFor] = useState<{ resp: any; req: any } | null>(null);
  const assistantOn = adminAiOn && bid.assistant_enabled;
  async function load() {
    setReqs(await api.get(`/bids/${bidId}/requirements`));
    setResps(await api.get(`/bids/${bidId}/responses`));
  }
  useEffect(() => { load(); }, [bidId]);
  async function insertFromLibrary(resp: any, entry: any) {
    const current = resp.final_text || resp.draft_text || "";
    const merged = current.trim() ? current.trim() + "\n\n" + entry.answer : entry.answer;
    await api.patch(`/bids/responses/${resp.id}`, { final_text: merged });
    await api.post(`/library/${entry.id}/reuse`, { bid_id: bidId, response_id: resp.id, action: "inserted" });
    setLibFor(null);
    setMsg(`Inserted a proven answer from the Library into ${libFor?.req.ref}.`);
    load();
  }
  const byReq = (rid: number) => resps.find((r) => r.requirement_id === rid);
  async function genAll() { setMsg("Generation queued — refresh shortly."); await api.post(`/bids/${bidId}/responses/generate`); }
  async function genOne(rid: number) { setMsg("Queued."); await api.post(`/bids/requirements/${rid}/generate`); }
  async function askAssistant(respId: number) {
    setMsg("✦ Assistant is working… this can take a few seconds.");
    try {
      await api.post(`/bids/${bidId}/assistant/enhance/${respId}`);
      setMsg("Assistant suggestion created — review it in the Assistant tab (or the thought cloud) and approve to apply.");
    } catch (e: any) { setMsg("Assistant error: " + e.message + " — check the AI status on the dashboard."); }
  }
  async function alignFramework(respId: number) {
    setMsg("✦ Assistant is aligning to your framework(s)… this can take a few seconds.");
    try {
      await api.post(`/bids/${bidId}/assistant/align/${respId}`);
      setMsg("Framework-alignment suggestion created — review and approve in the Assistant tab.");
    } catch (e: any) { setMsg("Assistant error: " + e.message + " — check the AI status on the dashboard."); }
  }
  async function save(resp: any, status?: string) {
    await api.patch(`/bids/responses/${resp.id}`, { final_text: resp.final_text ?? resp.draft_text, status });
    load();
  }
  return (
    <div className="card">
      <div className="spread"><h2>Responses</h2>
        <div className="row"><button className="secondary" onClick={genAll}>Generate all</button><button className="ghost" onClick={load}>Refresh</button></div>
      </div>
      {msg && <p className="muted">{msg}</p>}
      {reqs.map((req) => {
        const resp = byReq(req.id);
        const text = resp ? (resp.final_text || resp.draft_text) : "";
        const wc = wordCount(text);
        const over = req.word_limit && wc > req.word_limit;
        return (
          <div key={req.id} style={{ borderTop: "1px solid var(--border)", paddingTop: 12, marginTop: 12 }}>
            <div className="spread">
              <b>{req.ref}</b>
              {resp ? <span className={"chip " + (resp.status === "approved" ? "ok" : resp.status === "in_review" ? "warn" : "")}>{resp.status}</span>
                : <button className="ghost" onClick={() => genOne(req.id)}>Generate</button>}
            </div>
            <div className="muted" style={{ fontSize: 13 }}>{req.question_text}</div>
            {resp && (
              <>
                <textarea rows={6} value={resp.final_text || resp.draft_text}
                  onChange={(e) => setResps(resps.map((x) => x.id === resp.id ? { ...x, final_text: e.target.value } : x))} />
                <div className="row" style={{ marginTop: 4, fontSize: 13 }}>
                  <span className={over ? "" : "muted"} style={{ color: over ? "var(--danger)" : undefined }}>
                    {wc} words{req.word_limit ? ` / ${req.word_limit} limit` : ""}{over ? " — over limit" : ""}
                  </span>
                </div>
                {resp.gaps && <div className="chip warn" style={{ marginTop: 6 }}>Gaps: {resp.gaps}</div>}
                <div className="row wrap" style={{ marginTop: 6 }}>
                  <button className="secondary" onClick={() => save(resp)}>Save edits</button>
                  <button className="ghost" onClick={() => save(resp, "in_review")}>Mark in review</button>
                  <button onClick={() => save(resp, "approved")}>Approve</button>
                  <button className="ghost" onClick={() => genOne(req.id)}>Regenerate</button>
                  <button className="ghost" onClick={() => setLibFor({ resp, req })}>Find in Answer Library</button>
                  {assistantOn && <button className="ghost" style={{ borderColor: "var(--apex-gold)", color: "#9a6b00" }} onClick={() => askAssistant(resp.id)}>✦ Ask Assistant</button>}
                  {assistantOn && (bid.frameworks?.length > 0) && <button className="ghost" style={{ borderColor: "var(--apex-gold)", color: "#9a6b00" }} onClick={() => alignFramework(resp.id)}>✦ Align to framework</button>}
                </div>
              </>
            )}
          </div>
        );
      })}
      {libFor && <LibraryPicker req={libFor.req} onClose={() => setLibFor(null)} onInsert={(entry: any) => insertFromLibrary(libFor.resp, entry)} />}
    </div>
  );
}

function LibraryPicker({ req, onClose, onInsert }: { req: any; onClose: () => void; onInsert: (e: any) => void }) {
  const initial = (req.question_text || "").split(/\s+/).slice(0, 6).join(" ");
  const [q, setQ] = useState(initial);
  const [items, setItems] = useState<any[]>([]);
  const [total, setTotal] = useState(0);
  async function search() {
    const r = await api.get(`/library?q=${encodeURIComponent(q)}&limit=10`);
    setItems(r.items); setTotal(r.total);
  }
  useEffect(() => { search(); }, []);
  return (
    <div onClick={onClose} style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.45)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 60, padding: 20 }}>
      <div className="card" style={{ width: 640, maxHeight: "85vh", overflowY: "auto" }} onClick={(e) => e.stopPropagation()}>
        <div className="spread"><h2>Find in Answer Library</h2><button className="iconbtn" onClick={onClose}>✕</button></div>
        <div className="muted" style={{ fontSize: 13 }}>For requirement <b>{req.ref}</b>: {req.question_text}</div>
        <div className="row" style={{ marginTop: 8 }}>
          <input value={q} onChange={(e) => setQ(e.target.value)} onKeyDown={(e) => e.key === "Enter" && search()} placeholder="Search proven answers…" />
          <button onClick={search}>Search</button>
        </div>
        <div className="muted" style={{ fontSize: 12, margin: "6px 0" }}>{total} match{total === 1 ? "" : "es"} — proven answers rank by master, won-outcome and reuse.</div>
        {items.map((e) => (
          <div key={e.id} style={{ borderTop: "1px solid var(--border)", paddingTop: 10, marginTop: 10 }}>
            <div className="spread">
              <b style={{ fontSize: 14 }}>{e.question}</b>
              <span className="row" style={{ gap: 4 }}>
                {e.is_master && <span className="chip" style={{ background: "#fdf0d5", color: "#9a6b00" }}>★</span>}
                {e.outcome === "won" && <span className="chip ok">won</span>}
                {e.outcome === "lost" && <span className="chip danger">lost</span>}
              </span>
            </div>
            <div className="muted" style={{ fontSize: 13, margin: "4px 0" }}>{(e.answer || "").slice(0, 200)}{(e.answer || "").length > 200 ? "…" : ""}</div>
            <div className="row"><span className="muted" style={{ fontSize: 12 }}>{e.word_count} words · reused {e.reuse_count}×</span>
              <button className="secondary" onClick={() => onInsert(e)}>Insert into response</button></div>
          </div>
        ))}
        {items.length === 0 && <p className="muted">No matching answers. Approve responses or add answers to build the Library.</p>}
      </div>
    </div>
  );
}

function Plan({ bidId, reload }: { bidId: number; reload: () => void }) {
  const [tasks, setTasks] = useState<any[]>([]);
  async function load() { setTasks(await api.get(`/bids/${bidId}/plan`)); }
  useEffect(() => { load(); }, [bidId]);
  async function gen() { await api.post(`/bids/${bidId}/plan/generate`); load(); reload(); }
  async function update(t: any) { await api.patch(`/bids/plan/tasks/${t.id}`, { actual_hours: t.actual_hours, status: t.status }); load(); }
  return (
    <div className="card">
      <div className="spread"><h2>Bid plan</h2><button className="secondary" onClick={gen}>Generate / rebuild plan</button></div>
      {tasks.length > 0 && <Gantt tasks={tasks} />}
      <table style={{ marginTop: 12 }}>
        <thead><tr><th>Task</th><th>Kind</th><th>Due</th><th>Planned h</th><th>Actual h</th><th>Status</th></tr></thead>
        <tbody>
          {tasks.map((t) => (
            <tr key={t.id}>
              <td>{t.name}</td>
              <td>{t.kind === "milestone" ? <span className="chip">milestone</span> : "task"}</td>
              <td>{t.due}</td>
              <td>{Number(t.planned_hours)}</td>
              <td><input style={{ width: 70 }} defaultValue={Number(t.actual_hours)} onBlur={(e) => update({ ...t, actual_hours: e.target.value })} /></td>
              <td>
                <select defaultValue={t.status} onChange={(e) => update({ ...t, status: e.target.value })} style={{ width: 120 }}>
                  <option>pending</option><option>in_progress</option><option>done</option>
                </select>
              </td>
            </tr>
          ))}
          {tasks.length === 0 && <tr><td colSpan={6} className="muted">No plan yet — generate one.</td></tr>}
        </tbody>
      </table>
    </div>
  );
}

function Cost({ bidId }: { bidId: number }) {
  const [data, setData] = useState<any>({ lines: [], totals: null, inputs: {} });
  const [ep, setEp] = useState({ servers: 0, workstations: 0, network_devices: 0, users: 0, sites: 1 });
  const [term, setTerm] = useState(12);
  const [np, setNp] = useState({ description: "", monthly: 0, oneoff: 0 });
  async function load() {
    const d = await api.get(`/bids/${bidId}/cost`);
    setData(d);
    if (d.inputs?.endpoints) setEp((p) => ({ ...p, ...d.inputs.endpoints }));
    if (d.inputs?.term_months) setTerm(d.inputs.term_months);
  }
  useEffect(() => { load(); }, [bidId]);
  async function build() {
    const d = await api.post(`/bids/${bidId}/cost/build`, { endpoints: ep, term_months: term, scope: {} });
    setData(d);
  }
  async function overrideLine(l: any) {
    await api.patch(`/bids/cost/lines/${l.id}`, { monthly: l.monthly, oneoff: l.oneoff });
    load();
  }
  async function addNp() {
    if (!np.description) return;
    const d = await api.post(`/bids/${bidId}/cost/non-people`, np);
    setNp({ description: "", monthly: 0, oneoff: 0 });
    setData(d);
  }
  async function delNp(i: number) { setData(await api.del(`/bids/${bidId}/cost/non-people/${i}`)); }
  const nonPeople = data.inputs?.non_people || [];
  return (
    <div className="card">
      <h2>Cost engine (Module 3)</h2>
      <div className="row wrap">
        {(["servers", "workstations", "network_devices", "users", "sites"] as const).map((k) => (
          <div key={k}><label>{k}</label><input type="number" style={{ width: 110 }} value={(ep as any)[k]} onChange={(e) => setEp({ ...ep, [k]: Number(e.target.value) })} /></div>
        ))}
        <div><label>Term (months)</label><input type="number" style={{ width: 110 }} value={term} onChange={(e) => setTerm(Number(e.target.value))} /></div>
        <div style={{ alignSelf: "end" }}><button onClick={build}>Calculate</button></div>
      </div>
      <table style={{ marginTop: 12 }}>
        <thead><tr><th>Group</th><th>Description</th><th>Hours</th><th>Rate</th><th>Monthly</th><th>One-off</th></tr></thead>
        <tbody>
          {data.lines.map((l: any) => (
            <tr key={l.id}>
              <td className="muted">{l.group}</td><td>{l.description}</td><td>{Number(l.hours)}</td><td>{Number(l.rate_snapshot)}</td>
              <td><input style={{ width: 90 }} defaultValue={Number(l.monthly)} onBlur={(e) => overrideLine({ ...l, monthly: e.target.value })} /></td>
              <td><input style={{ width: 90 }} defaultValue={Number(l.oneoff)} onBlur={(e) => overrideLine({ ...l, oneoff: e.target.value })} /></td>
            </tr>
          ))}
          {data.lines.length === 0 && <tr><td colSpan={6} className="muted">No cost lines — enter endpoints and Calculate.</td></tr>}
        </tbody>
      </table>

      <h3 style={{ marginTop: 18 }}>Non-people resource costs</h3>
      <p className="muted" style={{ fontSize: 13, marginTop: 0 }}>Hardware, travel, connectivity, facilities and other costs you enter directly.</p>
      <table>
        <tbody>
          {nonPeople.map((n: any, i: number) => (
            <tr key={i}><td>{n.description}</td><td>£{n.monthly}/mo</td><td>£{n.oneoff} one-off</td>
              <td><button className="iconbtn danger" onClick={() => delNp(i)}>✕</button></td></tr>
          ))}
          {nonPeople.length === 0 && <tr><td className="muted">None added.</td></tr>}
        </tbody>
      </table>
      <div className="row wrap" style={{ marginTop: 8 }}>
        <input placeholder="Description" value={np.description} onChange={(e) => setNp({ ...np, description: e.target.value })} style={{ width: 240 }} />
        <input type="number" placeholder="Monthly £" value={np.monthly} onChange={(e) => setNp({ ...np, monthly: Number(e.target.value) })} style={{ width: 120 }} />
        <input type="number" placeholder="One-off £" value={np.oneoff} onChange={(e) => setNp({ ...np, oneoff: Number(e.target.value) })} style={{ width: 120 }} />
        <button className="secondary" onClick={addNp}>+ Add cost</button>
      </div>

      {data.totals && (
        <div className="row wrap" style={{ marginTop: 14 }}>
          <div className="chip">Monthly £{data.totals.monthly}</div>
          <div className="chip">One-off £{data.totals.oneoff}</div>
          <div className="chip ok">Total contract £{data.totals.total_contract}</div>
        </div>
      )}
    </div>
  );
}

function Pricing({ bidId }: { bidId: number }) {
  const [scenarios, setScenarios] = useState<any[]>([]);
  const [form, setForm] = useState({ name: "Base case", risk_pct: 5, mgmt_pct: 5, margin_pct: 20 });
  const [err, setErr] = useState("");
  async function load() { setScenarios(await api.get(`/bids/${bidId}/pricing`)); }
  useEffect(() => { load(); }, [bidId]);
  async function create() {
    setErr("");
    try { await api.post(`/bids/${bidId}/pricing`, form); load(); }
    catch (e: any) { setErr(e.message); }
  }
  async function justify(id: number) { await api.post(`/bids/pricing/${id}/justify`); load(); }
  async function select(id: number) { await api.post(`/bids/pricing/${id}/select`); load(); }
  return (
    <div className="card">
      <h2>Pricing (Module 4)</h2>
      <div className="row wrap">
        <div><label>Scenario name</label><input value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} /></div>
        <div><label>Risk %</label><input type="number" style={{ width: 90 }} value={form.risk_pct} onChange={(e) => setForm({ ...form, risk_pct: Number(e.target.value) })} /></div>
        <div><label>Mgmt %</label><input type="number" style={{ width: 90 }} value={form.mgmt_pct} onChange={(e) => setForm({ ...form, mgmt_pct: Number(e.target.value) })} /></div>
        <div><label>Margin %</label><input type="number" style={{ width: 90 }} value={form.margin_pct} onChange={(e) => setForm({ ...form, margin_pct: Number(e.target.value) })} /></div>
        <div style={{ alignSelf: "end" }}><button onClick={create}>Price it</button></div>
      </div>
      {err && <div className="err">{err}</div>}
      {scenarios.map((s) => (
        <div key={s.id} style={{ borderTop: "1px solid var(--border)", marginTop: 12, paddingTop: 12 }}>
          <div className="spread">
            <b>{s.name} {s.selected && <span className="chip ok">selected</span>}</b>
            <div className="row">
              <button className="ghost" onClick={() => justify(s.id)}>AI justification</button>
              {!s.selected && <button className="secondary" onClick={() => select(s.id)}>Select</button>}
            </div>
          </div>
          <div className="waterfall">
            {(s.computed?.waterfall || []).map((w: any, i: number) => (
              <div key={i}><span>{w.label}</span><b>£{w.value}</b></div>
            ))}
          </div>
          {s.justification_text && <pre className="resp">{s.justification_text}</pre>}
        </div>
      ))}
    </div>
  );
}

function PackageTab({ bidId, reload }: { bidId: number; reload: () => void }) {
  const { has } = useAuth();
  const [pkg, setPkg] = useState<any>(null);
  const [msg, setMsg] = useState("");
  async function load() { setPkg(await api.get(`/bids/${bidId}/package`)); }
  useEffect(() => { load(); }, [bidId]);
  async function assemble() { await api.post(`/bids/${bidId}/package/assemble`); load(); }
  async function approve() {
    setMsg("");
    try { await api.post(`/bids/package/${pkg.package_id}/approve`); load(); reload(); }
    catch (e: any) { setMsg(e.message); }
  }
  async function requestChanges() {
    const comment = prompt("Reason for changes?");
    if (!comment) return;
    await api.post(`/bids/package/${pkg.package_id}/request-changes`, { comment });
    load(); reload();
  }
  return (
    <div className="card">
      <div className="spread"><h2>Package & review (Module 6)</h2><button className="secondary" onClick={assemble}>Assemble package</button></div>
      {!pkg && <p className="muted">No package assembled yet.</p>}
      {pkg && (
        <>
          <div className="row wrap">
            <span className="chip">v{pkg.version}</span>
            <span className={"chip " + (pkg.status === "approved" ? "ok" : pkg.status === "incomplete" ? "warn" : "")}>{pkg.status}</span>
            {pkg.snapshot.unanswered > 0 && <span className="chip warn">{pkg.snapshot.unanswered} unapproved responses</span>}
          </div>
          <div className="row wrap" style={{ marginTop: 10 }}>
            <button className="ghost" onClick={() => api.download(`/bids/${bidId}/export/docx`, `bid_${bidId}.docx`)}>Export DOCX</button>
            <button className="ghost" onClick={() => api.download(`/bids/${bidId}/export/xlsx`, `bid_${bidId}.xlsx`)}>Export XLSX</button>
            <button className="ghost" onClick={() => api.download(`/bids/${bidId}/export/pdf`, `bid_${bidId}.pdf`)}>Export PDF</button>
          </div>
          {has("approver") && (
            <div className="row" style={{ marginTop: 12 }}>
              <button onClick={approve}>Approve</button>
              <button className="ghost" onClick={requestChanges}>Request changes</button>
            </div>
          )}
          {msg && <div className="err">{msg}</div>}
          <h3 style={{ marginTop: 16 }}>Compliance matrix</h3>
          <table><thead><tr><th>Ref</th><th>Question</th><th>Approved</th></tr></thead>
            <tbody>{pkg.snapshot.sections.map((s: any, i: number) => (
              <tr key={i}><td>{s.ref}</td><td className="muted">{s.question}</td><td>{s.approved ? "✔" : "—"}</td></tr>
            ))}</tbody>
          </table>
        </>
      )}
    </div>
  );
}

function Guardrail({ g }: { g: any }) {
  if (!g || g.checked === false) {
    return <span className="chip" title="AI is off — no self-check ran">⚠ Self-check unavailable</span>;
  }
  return (
    <span className="chip ok" title={g.claims?.length ? g.claims.join("\n") : "No unsupported claims found"}>
      ✓ Self-checked for hallucinations{g.removed > 0 ? ` — ${g.removed} removed` : " — none found"}
    </span>
  );
}

function Assistant({ bid, adminAiOn, reload }: { bid: any; adminAiOn: boolean; reload: () => void }) {
  const { has } = useAuth();
  const [sugs, setSugs] = useState<any[]>([]);
  const [busy, setBusy] = useState("");
  const [err, setErr] = useState("");
  const on = bid.assistant_enabled;
  async function load() { setSugs(await api.get(`/bids/${bid.id}/assistant/suggestions`)); }
  useEffect(() => { load(); }, [bid.id]);
  async function toggle() {
    setErr("");
    try { await api.post(`/bids/${bid.id}/assistant/toggle`, { enabled: !on }); reload(); }
    catch (e: any) { setErr(e.message); }
  }
  async function advise() {
    setErr(""); setBusy("advise");
    try { await api.post(`/bids/${bid.id}/assistant/advise`); await load(); }
    catch (e: any) { setErr(e.message); }
    setBusy("");
  }
  async function apply(s: any) {
    setErr("");
    try { await api.post(`/bids/assistant/suggestions/${s.id}/apply`); await load(); }
    catch (e: any) { setErr(e.message); }
  }
  async function dismiss(s: any) {
    await api.post(`/bids/assistant/suggestions/${s.id}/dismiss`); await load();
  }
  return (
    <div className="card">
      <div className="spread">
        <div>
          <h2>Bid Assistant ✦</h2>
          <span className="muted" style={{ fontSize: 13 }}>AI-powered advisory tool. Enhancements apply only after you approve.</span>
        </div>
        {has("bid_manager") && (
          <button className={on ? "danger" : ""} onClick={toggle} disabled={!adminAiOn && !on}>
            {on ? "Switch Assistant off" : "Switch Assistant on"}
          </button>
        )}
      </div>

      {!adminAiOn && (
        <div className="chip warn" style={{ marginTop: 8 }}>
          AI Integration is disabled at the admin level. An administrator must enable it in
          Administration → Security before the Assistant can run.
        </div>
      )}
      {err && <div className="err">{err}</div>}

      {on && adminAiOn && (
        <>
          <div className="row" style={{ marginTop: 12 }}>
            <button className="secondary" onClick={advise} disabled={busy === "advise"}>
              {busy === "advise" ? "Thinking…" : "Get bid-level advice"}
            </button>
            <button className="ghost" onClick={load}>Refresh</button>
            <span className="muted" style={{ fontSize: 13 }}>Use ✦ Ask Assistant on the Responses tab to enhance a specific answer.</span>
          </div>

          {sugs.length === 0 && <p className="muted" style={{ marginTop: 12 }}>No suggestions yet.</p>}

          {sugs.map((s) => (
            <div key={s.id} style={{ borderTop: "1px solid var(--border)", marginTop: 12, paddingTop: 12 }}>
              <div className="spread">
                <b>{s.kind === "bid_advice" ? "Bid-level advice" : `Enhancement · ${s.target_ref}`}</b>
                <div className="row">
                  <Guardrail g={s.guardrail} />
                  <span className={"chip " + (s.status === "applied" ? "ok" : s.status === "dismissed" ? "danger" : "")}>{s.status}</span>
                </div>
              </div>
              {s.advice?.length > 0 && (
                <ul style={{ margin: "8px 0", paddingLeft: 18 }}>
                  {s.advice.map((a: string, i: number) => <li key={i} style={{ marginBottom: 4 }}>{a}</li>)}
                </ul>
              )}
              {s.proposed_text && (
                <>
                  <label>Proposed enhanced response</label>
                  <pre className="resp">{s.proposed_text}</pre>
                </>
              )}
              {s.status === "proposed" && (
                <div className="row" style={{ marginTop: 6 }}>
                  {s.kind === "response_enhance" && <button onClick={() => apply(s)}>Approve & apply</button>}
                  <button className="ghost" onClick={() => dismiss(s)}>Dismiss</button>
                </div>
              )}
            </div>
          ))}
        </>
      )}
    </div>
  );
}

function Activity({ bidId }: { bidId: number }) {
  const [rows, setRows] = useState<any[]>([]);
  useEffect(() => { api.get(`/bids/${bidId}/audit`).then(setRows); }, [bidId]);
  return (
    <div className="card">
      <h2>Activity & audit trail</h2>
      <p className="muted" style={{ fontSize: 13, marginTop: 0 }}>Every action taken on this bid, and which login performed it.</p>
      <table>
        <thead><tr><th>When</th><th>Login</th><th>Action</th><th>Detail</th></tr></thead>
        <tbody>
          {rows.map((r) => (
            <tr key={r.id}>
              <td className="muted">{new Date(r.ts).toLocaleString()}</td>
              <td>{r.actor}</td>
              <td>{r.action.replace(/_/g, " ")}</td>
              <td className="muted">{Object.entries(r.detail || {}).map(([k, v]) => `${k}: ${v}`).join(", ")}</td>
            </tr>
          ))}
          {rows.length === 0 && <tr><td colSpan={4} className="muted">No activity recorded yet.</td></tr>}
        </tbody>
      </table>
    </div>
  );
}