"use client";

import { buildGradeTimeline } from "@/lib/gradeShift";

/**
 * GradeShift (Wave 4B) — the LIVE GRADE-SHIFT / GRADE HISTORY · LAST 24 view.
 * A timeline VIEW over ALREADY-EMITTED data: the intraday line-history points
 * ({t, line}) + any public revision (revised_from_grade). No new backend.
 *
 * Doctrine:
 *  - Self-hides below 3 real history points (buildGradeTimeline.show).
 *  - Color law (ROW-GRAMMAR): green = toward the graded side, amber = against,
 *    dim = flat. NEVER red — nothing here is settled.
 *  - A revision shows the ORIGINAL grade struck-through (never silently dropped).
 *  - Data is mono; nothing glitches.
 */
export interface GradeShiftHistoryPoint {
  t: string;
  line: number;
}

interface GradeShiftProps {
  history?: Array<GradeShiftHistoryPoint> | null;
  side?: string;
  grade?: string | null;
  revisedFrom?: string | null;
  gradedLine?: number | null;
}

export default function GradeShift({ history, side, grade, revisedFrom, gradedLine }: GradeShiftProps) {
  const tl = buildGradeTimeline({ history, side, grade, revisedFrom, gradedLine });
  if (!tl.show) return null; // honest self-hide — no fabricated timeline

  const lines = tl.points.map((p) => p.line);
  const min = Math.min(...lines);
  const max = Math.max(...lines);
  const rng = max - min || 1;
  const netSign = tl.net.delta > 0 ? "+" : "";

  return (
    <div
      style={{
        margin: "0 20px 16px",
        padding: "14px 16px",
        borderRadius: 12,
        border: "1px solid var(--border)",
        background: "var(--bg-2)",
      }}
      aria-label="Line history since lock"
    >
      {/* header + legend */}
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 10 }}>
        <span className="mono" style={{ fontSize: 10, fontWeight: 700, letterSpacing: "0.16em", color: "var(--text-1)" }}>
          GRADE HISTORY · LAST 24
        </span>
        <span className="mono" style={{ fontSize: 11, fontWeight: 700, color: tl.net.color, letterSpacing: "0.04em" }}>
          {tl.net.dir === "toward" ? "TOWARD" : tl.net.dir === "against" ? "AGAINST" : "FLAT"} {netSign}{tl.net.delta}
        </span>
      </div>

      {/* revision — original grade struck-through, never silently */}
      {tl.revision && (
        <div className="mono" style={{ fontSize: 11, color: "var(--text-2)", marginBottom: 10, display: "flex", alignItems: "center", gap: 7 }}>
          <span style={{ letterSpacing: "0.08em" }}>REVISED</span>
          <span style={{ textDecoration: "line-through", color: "var(--text-2)" }}>{tl.revision.from}</span>
          <span style={{ color: "var(--text-1)" }}>→</span>
          <span style={{ color: "var(--text-0)", fontWeight: 700 }}>{tl.revision.to}</span>
        </div>
      )}

      {/* bars — one per capture, height by relative line, colored by segment dir */}
      <div style={{ display: "flex", alignItems: "flex-end", gap: 4, height: 44 }}>
        {tl.points.map((p, i) => {
          const h = 30 + ((p.line - min) / rng) * 70; // 30%..100%
          const isGreen = p.color === "var(--g-a)";
          const isAmber = p.color === "var(--amber)";
          const bg = isGreen
            ? "var(--g-a)"
            : isAmber
              ? "var(--amber)"
              : "var(--border-hi)";
          return (
            <div
              key={i}
              title={`${p.line}${p.delta ? ` (${p.delta > 0 ? "+" : ""}${p.delta})` : ""}`}
              style={{
                flex: 1,
                height: `${h}%`,
                borderRadius: "3px 3px 0 0",
                background: bg,
                opacity: p.dir === "flat" ? 0.55 : 0.9,
              }}
            />
          );
        })}
      </div>

      {/* clock rail — lock -> now, mirrors the mockup's TIP/NOW */}
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginTop: 6 }}>
        <span className="mono" style={{ fontSize: 8.5, color: "var(--text-2)", letterSpacing: "0.1em" }}>
          LOCK {tl.firstLine}
        </span>
        <span className="mono" style={{ fontSize: 8.5, color: "var(--text-2)", letterSpacing: "0.1em" }}>
          NOW {tl.lastLine}
        </span>
      </div>
    </div>
  );
}
