admin / Bid-Sentinel

import { useMemo, useState } from "react";
import {
  ArcElement,
  BarElement,
  CategoryScale,
  Chart as ChartJS,
  Filler,
  LinearScale,
  LineElement,
  PointElement,
  Tooltip,
} from "chart.js";
import { Bar, Doughnut, Line } from "react-chartjs-2";
import { formatMoney } from "../utils/format";

ChartJS.register(
  ArcElement,
  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)";

const NAVY = "#0b3d91";
const TEAL = "#1d9e75";
const STATUS_COLORS = { Pending: "#888780", Bid: "#185fa5", "No Bid": "#a32d2d" };
const PIVOTS = ["Portal", "Keyword", "Buyer", "Bid status", "Outcome"];
const PIVOT_FIELD = {
  Portal: "source",
  Keyword: "matched_keyword",
  Buyer: "buyer",
  "Bid status": "bid_status",
  Outcome: "outcome",
};

const baseOpts = (measure) => ({
  responsive: true,
  maintainAspectRatio: false,
  plugins: {
    legend: { display: false },
    tooltip: {
      callbacks: {
        label: (c) =>
          measure === "value" ? formatMoney(c.raw) : `${c.raw}`,
      },
    },
  },
});

export default function AnalyticsPanel({ tenders }) {
  const [collapsed, setCollapsed] = useState(false);
  const [measure, setMeasure] = useState("count"); // count | value
  const [dateBasis, setDateBasis] = useState("published_date"); // published_date | closing_date
  const [range, setRange] = useState("12m"); // 90d | 12m | all
  const [dim, setDim] = useState("Portal");

  const stats = useMemo(() => computeStats(tenders), [tenders]);
  const overTime = useMemo(
    () => buildOverTime(tenders, dateBasis, range, measure),
    [tenders, dateBasis, range, measure]
  );
  const pivot = useMemo(
    () => buildGroup(tenders, PIVOT_FIELD[dim], measure, 8),
    [tenders, dim, measure]
  );
  const statusData = useMemo(
    () => buildGroup(tenders, "bid_status", measure, 5, ["Pending", "Bid", "No Bid"]),
    [tenders, measure]
  );
  const serviceData = useMemo(
    () => buildGroup(tenders, "matched_keyword", measure, 8),
    [tenders, measure]
  );

  const valFmt = (v) => (measure === "value" ? formatMoney(v) : v);

  return (
    <section className="mb-6 rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
      {/* Controls */}
      <div className="mb-4 flex flex-wrap items-center gap-x-5 gap-y-2">
        <div className="flex items-center gap-2 font-semibold text-slate-700">
          <span>Performance overview</span>
          <button
            onClick={() => setCollapsed((c) => !c)}
            className="rounded-md border border-slate-300 px-2 py-0.5 text-xs font-normal text-slate-500 hover:bg-slate-50"
          >
            {collapsed ? "Show" : "Hide"}
          </button>
        </div>
        {!collapsed && (
          <>
            <Segmented
              label="Measure"
              value={measure}
              onChange={setMeasure}
              options={[
                ["count", "Count"],
                ["value", "Value (£)"],
              ]}
            />
            <Segmented
              label="Date"
              value={dateBasis}
              onChange={setDateBasis}
              options={[
                ["published_date", "Published"],
                ["closing_date", "Closing"],
              ]}
            />
            <Segmented
              label="Range"
              value={range}
              onChange={setRange}
              options={[
                ["90d", "90d"],
                ["12m", "12m"],
                ["all", "All"],
              ]}
            />
            <label className="flex items-center gap-1.5 text-xs text-slate-400">
              Pivot by
              <select
                value={dim}
                onChange={(e) => setDim(e.target.value)}
                className="rounded-md border border-slate-300 px-2 py-1 text-sm text-slate-700 outline-none focus:border-brand"
              >
                {PIVOTS.map((p) => (
                  <option key={p}>{p}</option>
                ))}
              </select>
            </label>
          </>
        )}
      </div>

      {!collapsed && (
        <>
          {/* KPI cards */}
          <div className="mb-4 grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-7">
            <Kpi label="Total tracked" value={stats.total} />
            <Kpi label="Open now" value={stats.open} />
            <Kpi label="Bidding" value={stats.bidding} />
            <Kpi label="Pipeline value" value={formatMoney(stats.pipelineValue)} />
            <Kpi label="Closing ≤14d" value={stats.closingSoon} danger />
            <Kpi
              label="Win rate"
              value={stats.winRate == null ? "—" : `${stats.winRate}%`}
              good={stats.winRate != null && stats.winRate >= 50}
            />
            <Kpi label="Value won" value={formatMoney(stats.wonValue)} good />
          </div>

          {/* Charts */}
          <div className="grid grid-cols-1 gap-3 lg:grid-cols-2">
            <ChartCard title="Bid pipeline by status">
              <Doughnut
                data={{
                  labels: statusData.labels,
                  datasets: [
                    {
                      data: statusData.data,
                      backgroundColor: statusData.labels.map(
                        (l) => STATUS_COLORS[l] || NAVY
                      ),
                      borderWidth: 0,
                    },
                  ],
                }}
                options={{ ...baseOpts(measure), cutout: "62%" }}
              />
            </ChartCard>

            <ChartCard title="Opportunities over time">
              <Line
                data={{
                  labels: overTime.labels,
                  datasets: [
                    {
                      data: overTime.data,
                      borderColor: NAVY,
                      backgroundColor: "rgba(11,61,145,0.12)",
                      fill: true,
                      tension: 0.35,
                      pointRadius: 3,
                      pointBackgroundColor: NAVY,
                    },
                  ],
                }}
                options={{
                  ...baseOpts(measure),
                  scales: { y: { beginAtZero: true, ticks: { callback: valFmt } } },
                }}
              />
            </ChartCard>

            <ChartCard title={`Breakdown — by ${dim.toLowerCase()}`}>
              <Bar
                data={{
                  labels: pivot.labels,
                  datasets: [{ data: pivot.data, backgroundColor: NAVY, borderRadius: 3 }],
                }}
                options={{
                  ...baseOpts(measure),
                  indexAxis: "y",
                  scales: { x: { beginAtZero: true, ticks: { callback: valFmt } } },
                }}
              />
            </ChartCard>

            <ChartCard title="Demand by service line">
              <Bar
                data={{
                  labels: serviceData.labels,
                  datasets: [{ data: serviceData.data, backgroundColor: TEAL, borderRadius: 3 }],
                }}
                options={{
                  ...baseOpts(measure),
                  indexAxis: "y",
                  scales: { x: { beginAtZero: true, ticks: { callback: valFmt } } },
                }}
              />
            </ChartCard>
          </div>
          <p className="mt-3 text-xs text-slate-400">
            Charts reflect the opportunities currently loaded (respects the table
            filters above). Sample/live data updates instantly when you change a
            bid status or outcome.
          </p>
        </>
      )}
    </section>
  );
}

/* ----------------------------- aggregation ----------------------------- */
function computeStats(tenders) {
  const now = Date.now();
  const in14 = now + 14 * 86400_000;
  let open = 0,
    bidding = 0,
    closingSoon = 0,
    pipelineValue = 0,
    won = 0,
    lost = 0,
    wonValue = 0;

  for (const t of tenders) {
    const close = t.closing_date ? new Date(t.closing_date).getTime() : null;
    const isLost = t.outcome === "Lost";
    if (close && close > now) open += 1;
    if (close && close >= now && close <= in14) closingSoon += 1;
    // A lost bid leaves the active pipeline: drop it from Bidding and pipeline value.
    if (t.bid_status === "Bid" && !isLost) bidding += 1;
    if (t.value_amount != null && !isLost) pipelineValue += t.value_amount;
    if (t.outcome === "Won") {
      won += 1;
      if (t.value_amount != null) wonValue += t.value_amount;
    }
    if (isLost) lost += 1;
  }

  const decided = won + lost;
  return {
    total: tenders.length,
    open,
    bidding,
    closingSoon,
    pipelineValue,
    wonValue,
    winRate: decided > 0 ? Math.round((won / decided) * 100) : null,
  };
}

function buildGroup(tenders, field, measure, topN, fixedOrder) {
  const totals = new Map();
  for (const t of tenders) {
    const key = t[field] || "Unspecified";
    const add = measure === "value" ? t.value_amount || 0 : 1;
    totals.set(key, (totals.get(key) || 0) + add);
  }
  let entries = [...totals.entries()];
  if (fixedOrder) {
    entries = fixedOrder.map((k) => [k, totals.get(k) || 0]);
  } else {
    entries.sort((a, b) => b[1] - a[1]);
    if (topN) entries = entries.slice(0, topN);
  }
  return { labels: entries.map((e) => e[0]), data: entries.map((e) => Math.round(e[1])) };
}

function buildOverTime(tenders, field, range, measure) {
  const now = new Date();
  let cutoff = null;
  if (range === "90d") cutoff = new Date(now.getTime() - 90 * 86400_000);
  else if (range === "12m") cutoff = new Date(now.getFullYear() - 1, now.getMonth(), 1);

  const totals = new Map();
  for (const t of tenders) {
    if (!t[field]) continue;
    const d = new Date(t[field]);
    if (Number.isNaN(d.getTime())) continue;
    if (cutoff && d < cutoff) continue;
    const key = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}`;
    const add = measure === "value" ? t.value_amount || 0 : 1;
    totals.set(key, (totals.get(key) || 0) + add);
  }
  const keys = [...totals.keys()].sort();
  const labels = keys.map((k) => {
    const [y, m] = k.split("-");
    return new Date(y, m - 1, 1).toLocaleDateString("en-GB", { month: "short", year: "2-digit" });
  });
  return { labels, data: keys.map((k) => Math.round(totals.get(k))) };
}

/* ------------------------------- UI bits ------------------------------- */
function Segmented({ label, value, onChange, options }) {
  return (
    <span className="flex items-center gap-1.5 text-xs text-slate-400">
      {label}
      <span className="inline-flex overflow-hidden rounded-md border border-slate-300">
        {options.map(([v, l]) => (
          <button
            key={v}
            onClick={() => onChange(v)}
            className={`px-2.5 py-1 text-sm transition ${
              value === v ? "bg-brand text-white" : "bg-white text-slate-600 hover:bg-slate-50"
            }`}
          >
            {l}
          </button>
        ))}
      </span>
    </span>
  );
}

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

function ChartCard({ title, children }) {
  return (
    <div className="rounded-lg border border-slate-200 p-3">
      <p className="mb-2 text-sm font-medium text-slate-600">{title}</p>
      <div className="relative h-[240px]">{children}</div>
    </div>
  );
}