admin / Bid-Sentinel

import { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import {
  BarElement,
  CategoryScale,
  Chart as ChartJS,
  Filler,
  LinearScale,
  LineElement,
  PointElement,
  Tooltip,
} from "chart.js";
import { Line } from "react-chartjs-2";
import {
  downloadIntelReport,
  downloadManagementSummary,
  emailReport,
  fetchAngles,
  fetchBuyers,
  fetchCapabilityGaps,
  fetchCertGaps,
  fetchEmailStatus,
  fetchIntelReportBlob,
  fetchIntelSummary,
  fetchTrends,
  fetchWinLoss,
} from "../api/client";
import { useAuth } from "../context/AuthContext.jsx";
import ThemeToggle from "../components/ThemeToggle.jsx";
import { formatMoney } from "../utils/format";
import logo from "../assets/bid-sentinel-logo.png";

ChartJS.register(BarElement, LineElement, PointElement, CategoryScale, LinearScale, Tooltip, Filler);
// Neutral axis/label colour that reads on both light and dark backgrounds.
ChartJS.defaults.color = "#94a3b8";
ChartJS.defaults.borderColor = "rgba(148, 163, 184, 0.2)";

export default function Intelligence() {
  const { user } = useAuth();
  const allowed = user?.role === "admin" || user?.role === "analyst";

  const [summary, setSummary] = useState(null);
  const [capGaps, setCapGaps] = useState([]);
  const [certGaps, setCertGaps] = useState([]);
  const [buyers, setBuyers] = useState([]);
  const [winloss, setWinloss] = useState(null);
  const [trends, setTrends] = useState([]);
  const [angles, setAngles] = useState([]);
  const [useAi, setUseAi] = useState(false);
  const [downloading, setDownloading] = useState(false);
  const [emailAvailable, setEmailAvailable] = useState(false);
  const [emailing, setEmailing] = useState(false);
  const [msg, setMsg] = useState("");

  useEffect(() => {
    if (!allowed) return;
    fetchEmailStatus().then((s) => setEmailAvailable(Boolean(s.available))).catch(() => {});
    fetchIntelSummary().then(setSummary).catch(() => {});
    fetchCapabilityGaps().then(setCapGaps).catch(() => {});
    fetchCertGaps().then(setCertGaps).catch(() => {});
    fetchBuyers().then(setBuyers).catch(() => {});
    fetchWinLoss().then(setWinloss).catch(() => {});
    fetchTrends().then(setTrends).catch(() => {});
  }, [allowed]);

  useEffect(() => {
    if (allowed) fetchAngles(useAi).then(setAngles).catch(() => {});
  }, [allowed, useAi]);

  async function exportPdf() {
    setDownloading(true);
    try {
      await downloadIntelReport(useAi);
    } finally {
      setDownloading(false);
    }
  }

  async function emailPdf() {
    setEmailing(true);
    setMsg("");
    try {
      const blob = await fetchIntelReportBlob(useAi);
      const r = await emailReport(blob, "bid-sentinel-intelligence.pdf", "Bid Sentinel — Intelligence Report");
      setMsg(`Report emailed to ${r.to}.`);
    } catch (err) {
      setMsg(err.response?.data?.detail || "Could not send email.");
    } finally {
      setEmailing(false);
    }
  }

  return (
    <div className="min-h-full">
      <header className="bg-brand text-white shadow">
        <div className="mx-auto flex max-w-6xl items-center justify-between px-6 py-3">
          <div className="flex items-center gap-3">
            <div className="rounded-lg bg-white px-2 py-1 shadow-sm">
              <img src={logo} alt="Bid Sentinel" className="h-9 w-auto object-contain" />
            </div>
            <h1 className="text-lg font-bold tracking-wide">Intelligence</h1>
          </div>
          <div className="flex items-center gap-3">
            {allowed && (
              <>
                <label className="flex items-center gap-1.5 text-xs text-white/80">
                  <input type="checkbox" checked={useAi} onChange={(e) => setUseAi(e.target.checked)} />
                  AI angles
                </label>
                <button
                  onClick={exportPdf}
                  disabled={downloading}
                  className="rounded-md bg-white/15 px-3 py-1.5 text-sm font-medium hover:bg-white/25 disabled:opacity-60"
                >
                  {downloading ? "Preparing…" : "Export PDF report"}
                </button>
                <button
                  onClick={() => downloadManagementSummary().catch(() => {})}
                  className="rounded-md bg-white/15 px-3 py-1.5 text-sm font-medium hover:bg-white/25"
                  title="Download the management summary (pipeline + gaps)"
                >
                  📊 Management summary
                </button>
                {emailAvailable && (
                  <button
                    onClick={emailPdf}
                    disabled={emailing}
                    className="rounded-md bg-white/15 px-3 py-1.5 text-sm font-medium hover:bg-white/25 disabled:opacity-60"
                    title="Email the report to your account address"
                  >
                    {emailing ? "Sending…" : "✉ Email me"}
                  </button>
                )}
              </>
            )}
            <ThemeToggle />
            <Link to="/" className="rounded-md bg-white/10 px-3 py-1.5 text-sm hover:bg-white/20">
              ← Back to dashboard
            </Link>
          </div>
        </div>
      </header>

      <main className="mx-auto max-w-6xl space-y-5 px-6 py-6">
        {!allowed ? (
          <div className="rounded-lg bg-amber-50 px-4 py-3 text-sm text-amber-800">
            The Intelligence area is available to analyst and administrator accounts only.
          </div>
        ) : (
          <>
            {msg && (
              <div className="rounded-lg bg-blue-50 px-4 py-2 text-sm text-blue-700">{msg}</div>
            )}
            {/* KPIs */}
            <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6">
              <Kpi label="Opportunities" value={summary?.opportunities ?? "—"} />
              <Kpi label="Pipeline value" value={summary ? formatMoney(summary.pipeline_value) : "—"} />
              <Kpi label="Win rate" value={summary?.win_rate == null ? "—" : `${summary.win_rate}%`} />
              <Kpi label="Capability gaps" value={summary?.capability_gaps ?? "—"} danger />
              <Kpi label="Cert gaps" value={summary?.cert_gaps ?? "—"} danger />
              <Kpi label="Target buyers" value={summary?.target_buyers ?? "—"} good />
            </div>

            <div className="grid grid-cols-1 gap-5 lg:grid-cols-2">
              {/* Capability gaps */}
              <Card title="Capability gaps — demand you don't cover">
                <SimpleTable
                  head={["In-demand capability", "Opps", "Value"]}
                  rows={capGaps.slice(0, 12).map((g) => [g.term, g.opportunities, formatMoney(g.total_value)])}
                  empty="No gaps — your profile covers all tracked demand."
                  aligns={["", "center", "right"]}
                />
              </Card>

              {/* Cert gaps */}
              <Card title="Certifications & clearances — demand vs held">
                <table className="w-full text-sm">
                  <thead>
                    <tr className="text-left text-xs text-slate-400">
                      <th className="py-1.5">Requirement</th>
                      <th className="py-1.5 w-28">Demand</th>
                      <th className="py-1.5">Status</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-slate-100">
                    {certGaps.slice(0, 12).map((c) => (
                      <tr key={c.name}>
                        <td className="py-1.5 text-slate-700">{c.name}</td>
                        <td className="py-1.5">
                          <div className="flex items-center gap-2">
                            <div className="h-1.5 w-16 overflow-hidden rounded-full bg-slate-100">
                              <div
                                className={`h-full ${c.held ? "bg-green-500" : "bg-red-500"}`}
                                style={{ width: `${c.demand_pct}%` }}
                              />
                            </div>
                            <span className="text-xs text-slate-500">{c.demand_pct}%</span>
                          </div>
                        </td>
                        <td className="py-1.5">
                          <span
                            className={`rounded px-1.5 py-0.5 text-xs ${
                              c.held ? "bg-green-50 text-green-700" : "bg-red-50 text-red-700"
                            }`}
                          >
                            {c.held ? "held" : "gap"}
                          </span>
                        </td>
                      </tr>
                    ))}
                    {certGaps.length === 0 && (
                      <tr>
                        <td colSpan={3} className="py-3 text-sm text-slate-400">No certifications detected.</td>
                      </tr>
                    )}
                  </tbody>
                </table>
              </Card>
            </div>

            {/* Buyers */}
            <Card title="Client organisations — buyer intelligence">
              <SimpleTable
                head={["Buyer", "Opps", "Value", "Avg fit", "Won/Lost", "Top services", ""]}
                rows={buyers.slice(0, 15).map((b) => [
                  b.buyer,
                  b.opportunities,
                  formatMoney(b.total_value),
                  b.avg_fit == null ? "—" : `${b.avg_fit}%`,
                  `${b.won}/${b.lost}`,
                  b.top_services.join(", ") || "—",
                  b.is_target ? "target" : "",
                ])}
                aligns={["", "center", "right", "center", "center", "", "center"]}
                lastPill
              />
            </Card>

            <div className="grid grid-cols-1 gap-5 lg:grid-cols-2">
              {/* Win/loss */}
              <Card title="Win / loss intelligence">
                {winloss && (
                  <p className="mb-3 text-sm text-slate-600">
                    Overall win rate{" "}
                    <span className="font-semibold text-brand">
                      {winloss.overall_win_rate == null ? "—" : `${winloss.overall_win_rate}%`}
                    </span>{" "}
                    ({winloss.won} won, {winloss.lost} lost)
                  </p>
                )}
                <SimpleTable
                  head={["Fit band", "Won", "Lost", "Win rate"]}
                  rows={(winloss?.by_fit || []).map((b) => [
                    b.label,
                    b.won,
                    b.lost,
                    b.win_rate == null ? "—" : `${b.win_rate}%`,
                  ])}
                  aligns={["", "center", "center", "center"]}
                />
              </Card>

              {/* Trends */}
              <Card title="Demand over time">
                <div className="relative h-[220px]">
                  <Line
                    data={{
                      labels: trends.map((t) => t.label),
                      datasets: [
                        {
                          data: trends.map((t) => t.count),
                          borderColor: "#0b3d91",
                          backgroundColor: "rgba(11,61,145,0.12)",
                          fill: true,
                          tension: 0.35,
                          pointRadius: 2,
                        },
                      ],
                    }}
                    options={{
                      responsive: true,
                      maintainAspectRatio: false,
                      plugins: { legend: { display: false } },
                      scales: { y: { beginAtZero: true, ticks: { precision: 0 } } },
                    }}
                  />
                </div>
              </Card>
            </div>

            {/* Sales angles */}
            <Card title="Recommended sales angles">
              {angles.length === 0 && (
                <p className="text-sm text-slate-400">No target buyers identified yet.</p>
              )}
              <div className="space-y-3">
                {angles.map((a) => (
                  <div key={a.subject} className="rounded-lg border border-brand/20 bg-brand/5 px-3 py-2">
                    <p className="text-sm font-semibold text-brand">
                      {a.subject}{" "}
                      <span className="ml-1 rounded bg-white px-1 py-0.5 text-[10px] font-normal text-slate-500">
                        {a.source}
                      </span>
                    </p>
                    <p className="mt-0.5 text-sm text-slate-700">{a.angle}</p>
                  </div>
                ))}
              </div>
            </Card>
          </>
        )}
      </main>
    </div>
  );
}

function Kpi({ label, value, danger, good }) {
  const color = danger ? "text-red-600" : good ? "text-green-600" : "text-brand";
  return (
    <div className="rounded-lg bg-white p-3 shadow-sm">
      <div className="text-xs text-slate-500">{label}</div>
      <div className={`mt-1 text-xl font-bold ${color}`}>{value}</div>
    </div>
  );
}

function Card({ title, children }) {
  return (
    <section className="rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
      <h2 className="mb-3 text-sm font-semibold text-slate-700">{title}</h2>
      {children}
    </section>
  );
}

function SimpleTable({ head, rows, aligns = [], empty, lastPill }) {
  return (
    <div className="overflow-x-auto">
      <table className="w-full text-sm">
        <thead>
          <tr className="text-left text-xs text-slate-400">
            {head.map((h, i) => (
              <th key={i} className={`py-1.5 ${aligns[i] === "center" ? "text-center" : aligns[i] === "right" ? "text-right" : ""}`}>
                {h}
              </th>
            ))}
          </tr>
        </thead>
        <tbody className="divide-y divide-slate-100">
          {rows.length === 0 && empty && (
            <tr>
              <td colSpan={head.length} className="py-3 text-sm text-slate-400">{empty}</td>
            </tr>
          )}
          {rows.map((r, ri) => (
            <tr key={ri}>
              {r.map((cell, ci) => {
                const cls = `py-1.5 text-slate-700 ${aligns[ci] === "center" ? "text-center" : aligns[ci] === "right" ? "text-right" : ""}`;
                if (lastPill && ci === r.length - 1) {
                  return (
                    <td key={ci} className={cls}>
                      {cell ? (
                        <span className="rounded bg-green-50 px-1.5 py-0.5 text-xs text-green-700">{cell}</span>
                      ) : null}
                    </td>
                  );
                }
                return <td key={ci} className={cls}>{cell}</td>;
              })}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}