admin / Apex

import { useEffect, useState } from "react";
import { api } from "../lib/api";
import { useAuth } from "../lib/auth";

interface Entry {
  id: number; question: string; answer: string; summary: string; category: string;
  tags: string[]; frameworks: number[]; source_type: string; client: string;
  outcome: string; status: string; is_master: boolean; reuse_count: number;
  word_count: number; updated_at: string;
}

function outcomeChip(o: string) {
  if (o === "won") return <span className="chip ok">won</span>;
  if (o === "lost") return <span className="chip danger">lost</span>;
  if (o === "in_progress") return <span className="chip warn">in progress</span>;
  return <span className="chip">n/a</span>;
}

export default function AnswerLibrary() {
  const { has } = useAuth();
  const [items, setItems] = useState<Entry[]>([]);
  const [total, setTotal] = useState(0);
  const [q, setQ] = useState("");
  const [filters, setFilters] = useState({ category: "", client: "", outcome: "", framework: "" });
  const [facets, setFacets] = useState<any>({ categories: [], clients: [], tags: [], outcomes: [] });
  const [frameworks, setFrameworks] = useState<any[]>([]);
  const [detail, setDetail] = useState<Entry | null>(null);
  const [showAdd, setShowAdd] = useState(false);

  async function load() {
    const params = new URLSearchParams();
    if (q) params.set("q", q);
    if (filters.category) params.set("category", filters.category);
    if (filters.client) params.set("client", filters.client);
    if (filters.outcome) params.set("outcome", filters.outcome);
    if (filters.framework) params.set("framework", filters.framework);
    const r = await api.get(`/library?${params.toString()}`);
    setItems(r.items); setTotal(r.total);
  }
  useEffect(() => { load(); }, [filters]);
  useEffect(() => {
    api.get("/library/facets").then(setFacets);
    api.get("/bids/meta/frameworks").then(setFrameworks);
  }, []);

  const fwName = (id: number) => frameworks.find((f) => f.id === id)?.name || `#${id}`;

  async function copyAnswer(e: Entry) {
    try { await navigator.clipboard.writeText(e.answer); } catch { /* ignore */ }
    await api.post(`/library/${e.id}/reuse`, { action: "copied" });
    load();
  }
  async function toggleMaster(e: Entry) { await api.post(`/library/${e.id}/master`); load(); setDetail(null); }
  async function archive(e: Entry) {
    if (!confirm("Archive this answer?")) return;
    await api.del(`/library/${e.id}`); load(); setDetail(null);
  }
  async function backfill() {
    const r = await api.post("/library/harvest");
    alert(`Harvested ${r.harvested} approved responses into the Library.`);
    load(); api.get("/library/facets").then(setFacets);
  }

  return (
    <div>
      <div className="topbar">
        <div>
          <h1>Answer Library</h1>
          <span className="muted">Searchable catalogue of tender questions & winning responses</span>
        </div>
        <div className="row">
          {has("administrator", "bid_manager") && <button className="ghost" onClick={backfill}>Harvest approved</button>}
          {has("bid_manager", "contributor") && <button onClick={() => setShowAdd(true)}>+ Add answer</button>}
        </div>
      </div>

      <div className="card">
        <div className="row wrap" style={{ alignItems: "flex-end" }}>
          <div style={{ flex: 1, minWidth: 240 }}>
            <label>Search questions & answers</label>
            <input value={q} onChange={(e) => setQ(e.target.value)} onKeyDown={(e) => e.key === "Enter" && load()} placeholder="e.g. security operations centre, SLA, transition…" />
          </div>
          <div><label>Category</label>
            <select value={filters.category} onChange={(e) => setFilters({ ...filters, category: e.target.value })} style={{ width: 150 }}>
              <option value="">All</option>{facets.categories.map((c: string) => <option key={c}>{c}</option>)}
            </select>
          </div>
          <div><label>Client</label>
            <select value={filters.client} onChange={(e) => setFilters({ ...filters, client: e.target.value })} style={{ width: 150 }}>
              <option value="">All</option>{facets.clients.map((c: string) => <option key={c}>{c}</option>)}
            </select>
          </div>
          <div><label>Outcome</label>
            <select value={filters.outcome} onChange={(e) => setFilters({ ...filters, outcome: e.target.value })} style={{ width: 130 }}>
              <option value="">All</option><option value="won">Won</option><option value="lost">Lost</option><option value="in_progress">In progress</option>
            </select>
          </div>
          <div><label>Framework</label>
            <select value={filters.framework} onChange={(e) => setFilters({ ...filters, framework: e.target.value })} style={{ width: 160 }}>
              <option value="">All</option>{frameworks.map((f) => <option key={f.id} value={f.id}>{f.name}</option>)}
            </select>
          </div>
          <button onClick={load}>Search</button>
        </div>
        <div className="muted" style={{ fontSize: 13, marginTop: 8 }}>{total} answer{total === 1 ? "" : "s"} · sorted by master, outcome, reuse</div>
      </div>

      {items.map((e) => (
        <div className="card" key={e.id} style={{ borderLeft: e.is_master ? "3px solid var(--apex-gold)" : undefined }}>
          <div className="spread">
            <div style={{ fontWeight: 500 }}>{e.question}</div>
            <div className="row">
              {e.is_master && <span className="chip" style={{ background: "#fdf0d5", color: "#9a6b00" }}>★ master</span>}
              {outcomeChip(e.outcome)}
            </div>
          </div>
          <div className="muted" style={{ fontSize: 14, margin: "6px 0" }}>
            {(e.answer || "").slice(0, 260)}{(e.answer || "").length > 260 ? "…" : ""}
          </div>
          <div className="row wrap" style={{ fontSize: 12 }}>
            {e.category && <span className="chip">{e.category}</span>}
            {(e.frameworks || []).map((f) => <span key={f} className="chip">{fwName(f)}</span>)}
            {e.client && <span className="muted">· {e.client}</span>}
            <span className="muted">· {e.word_count} words · reused {e.reuse_count}×</span>
          </div>
          <div className="row" style={{ marginTop: 8 }}>
            <button className="secondary" onClick={() => setDetail(e)}>View</button>
            <button className="ghost" onClick={() => copyAnswer(e)}>Copy answer</button>
          </div>
        </div>
      ))}
      {items.length === 0 && <div className="card muted">No answers yet. Approve bid responses (they are harvested automatically) or use "Harvest approved" / "Add answer".</div>}

      {detail && <DetailModal e={detail} fwName={fwName} facets={facets} frameworks={frameworks}
        onClose={() => setDetail(null)} onCopy={copyAnswer} onMaster={toggleMaster} onArchive={archive}
        onSaved={() => { load(); setDetail(null); }} canCurate={has("bid_manager", "contributor")} />}
      {showAdd && <AddModal frameworks={frameworks} onClose={() => setShowAdd(false)} onSaved={() => { setShowAdd(false); load(); }} />}
    </div>
  );
}

function DetailModal({ e, fwName, onClose, onCopy, onMaster, onArchive, onSaved, canCurate }: any) {
  const [ans, setAns] = useState(e.answer);
  const [cat, setCat] = useState(e.category);
  const [tags, setTags] = useState((e.tags || []).join(", "));
  async function save() {
    await api.patch(`/library/${e.id}`, { answer: ans, category: cat, tags: tags.split(",").map((t: string) => t.trim()).filter(Boolean) });
    onSaved();
  }
  return (
    <Overlay onClose={onClose}>
      <div className="card" style={{ width: 640, maxHeight: "85vh", overflowY: "auto" }}>
        <div className="spread"><h2>Answer detail</h2><button className="iconbtn" onClick={onClose}>✕</button></div>
        <label>Question</label><div style={{ fontWeight: 500 }}>{e.question}</div>
        <div className="row wrap" style={{ margin: "8px 0" }}>
          {outcomeChip(e.outcome)}{e.is_master && <span className="chip" style={{ background: "#fdf0d5", color: "#9a6b00" }}>★ master</span>}
          {(e.frameworks || []).map((f: number) => <span key={f} className="chip">{fwName(f)}</span>)}
          <span className="muted">· source: {e.source_type}{e.client ? " · " + e.client : ""} · reused {e.reuse_count}×</span>
        </div>
        <label>Answer</label>
        {canCurate ? <textarea rows={10} value={ans} onChange={(ev) => setAns(ev.target.value)} /> : <pre className="resp">{ans}</pre>}
        {canCurate && (
          <div className="grid2">
            <div><label>Category</label><input value={cat} onChange={(ev) => setCat(ev.target.value)} /></div>
            <div><label>Tags (comma-separated)</label><input value={tags} onChange={(ev) => setTags(ev.target.value)} /></div>
          </div>
        )}
        <div className="row wrap" style={{ marginTop: 12 }}>
          <button className="ghost" onClick={() => onCopy(e)}>Copy answer</button>
          {canCurate && <button className="secondary" onClick={save}>Save</button>}
          {canCurate && <button className="ghost" onClick={() => onMaster(e)}>{e.is_master ? "Unset master" : "Mark as master"}</button>}
          {canCurate && <button className="danger" onClick={() => onArchive(e)}>Archive</button>}
        </div>
      </div>
    </Overlay>
  );
}

function AddModal({ frameworks, onClose, onSaved }: any) {
  const [f, setF] = useState({ question: "", answer: "", category: "", tags: "", frameworks: [] as number[] });
  async function save() {
    if (!f.question || !f.answer) return;
    await api.post("/library", {
      question: f.question, answer: f.answer, category: f.category,
      tags: f.tags.split(",").map((t) => t.trim()).filter(Boolean), frameworks: f.frameworks,
    });
    onSaved();
  }
  return (
    <Overlay onClose={onClose}>
      <div className="card" style={{ width: 560 }}>
        <div className="spread"><h2>Add answer</h2><button className="iconbtn" onClick={onClose}>✕</button></div>
        <label>Question</label><input value={f.question} onChange={(e) => setF({ ...f, question: e.target.value })} />
        <label>Answer</label><textarea rows={8} value={f.answer} onChange={(e) => setF({ ...f, answer: e.target.value })} />
        <div className="grid2">
          <div><label>Category</label><input value={f.category} onChange={(e) => setF({ ...f, category: e.target.value })} /></div>
          <div><label>Tags (comma-separated)</label><input value={f.tags} onChange={(e) => setF({ ...f, tags: e.target.value })} /></div>
        </div>
        <label>Frameworks</label>
        <select multiple value={f.frameworks.map(String)} onChange={(e) => setF({ ...f, frameworks: Array.from(e.target.selectedOptions).map((o) => Number(o.value)) })}>
          {frameworks.map((fw: any) => <option key={fw.id} value={fw.id}>{fw.name}</option>)}
        </select>
        <div className="row" style={{ marginTop: 12 }}><button onClick={save}>Save answer</button><button className="ghost" onClick={onClose}>Cancel</button></div>
      </div>
    </Overlay>
  );
}

function Overlay({ children, onClose }: any) {
  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 onClick={(e) => e.stopPropagation()}>{children}</div>
    </div>
  );
}