"use client";

import Link from "next/link";

import { SectionHeading } from "@/components/section-heading";
import { StatusBadge } from "@/components/status-badge";
import { formatMetricValue, formatTimestamp } from "@/lib/format";
import type { MicrostructureHealth, MicrostructureSignalSummary } from "@/lib/api/types";

import { MICROSTRUCTURE_SECTIONS } from "./microstructure-config";

export function MicrostructureList({
  signals,
  health,
}: {
  signals: MicrostructureSignalSummary[];
  health: MicrostructureHealth | null;
}) {
  return (
    <div className="pageStack">
      <SectionHeading
        kicker="Microstructure"
        title="Medium-horizon engine"
        description="Prediction, regime, calibration, and operational pages for the 30s to 5m microstructure family."
      />

      {/* ── Engine status row ── */}
      <div className="inlineSummary" style={{ fontSize: 12 }}>
        <strong>Engine</strong>{" "}
        <StatusBadge label={health?.engine_status ?? "cold"} tone={health?.status === "ok" ? "ok" : "warn"} />
        <span className="sep">|</span>
        <strong>{health?.signals_available ?? 0}</strong> signals
        <span className="sep">|</span>
        latest prediction {health?.last_prediction_ts ? formatTimestamp(health.last_prediction_ts) : "n/a"}
      </div>

      {/* ── Full-width signal table ── */}
      <div className="panel">
        <div className="panelHeader"><h3>Live signals</h3></div>
        <div className="tableWrap">
          <table className="dataTable">
            <thead>
              <tr>
                <th>Signal</th>
                <th>Asset</th>
                <th>Horizon</th>
                <th>P(Up)</th>
                <th>P(Down)</th>
                <th>Expected Move</th>
                <th>Tradability</th>
                <th>Quality</th>
                <th>Updated</th>
              </tr>
            </thead>
            <tbody>
              {signals.map((signal) => (
                <tr key={signal.id} className="rowClickable">
                  <td>
                    <Link
                      href={`/microstructure/predictions?asset=${signal.asset}&horizon=${signal.horizon}`}
                      style={{ color: "var(--accent)" }}
                    >
                      {signal.name}
                    </Link>
                  </td>
                  <td>{signal.asset}</td>
                  <td>{signal.horizon}</td>
                  <td>{typeof signal.latest_values.prob_up === "number" ? formatMetricValue(signal.latest_values.prob_up as number, "prob_up") : "—"}</td>
                  <td>{typeof signal.latest_values.prob_down === "number" ? formatMetricValue(signal.latest_values.prob_down as number, "prob_down") : "—"}</td>
                  <td>{typeof signal.latest_values.expected_move_bps === "number" ? formatMetricValue(signal.latest_values.expected_move_bps as number, "expected_move_bps") : "—"}</td>
                  <td>{typeof signal.latest_values.tradability_score === "number" ? formatMetricValue(signal.latest_values.tradability_score as number, "tradability_score") : "—"}</td>
                  <td>
                    <StatusBadge
                      label={signal.latest_quality ?? "unknown"}
                      tone={signal.latest_quality === "ok" ? "ok" : "warn"}
                    />
                  </td>
                  <td>{formatTimestamp(signal.latest_updated_at)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {/* ── Section navigation as compact tab row ── */}
      <div className="tabBar">
        {MICROSTRUCTURE_SECTIONS.map((section) => (
          <Link
            key={section.id}
            className="tabItem"
            href={`/microstructure/${section.id}`}
          >
            {section.title}
          </Link>
        ))}
      </div>
    </div>
  );
}
