"use client";

import { ConcessionEntry } from "@/lib/types";

interface Props {
  concessions: ConcessionEntry[];
}

export default function ConcessionTimeline({ concessions }: Props) {
  if (!concessions || concessions.length === 0) {
    return (
      <div className="text-xs text-slate-600 py-4 text-center font-mono">
        No concessions recorded yet
      </div>
    );
  }

  return (
    <div className="relative flex flex-col gap-3">
      {/* Data stream line */}
      <div className="absolute left-[14px] top-4 bottom-4 data-stream-line" />

      {concessions.map((c, i) => {
        const isA = c.by === "A";
        return (
          <div key={i} className="flex items-center gap-3">
            {/* Node */}
            <div
              className={`relative z-10 size-7 rounded-full shrink-0 flex items-center justify-center text-[9px] font-mono font-bold border ${
                isA
                  ? "bg-[#B7A6FB]/10 border-[#B7A6FB]/30 text-[#B7A6FB]"
                  : "bg-cyan-900/20 border-cyan-500/30 text-cyan-400"
              }`}
            >
              {c.by}
            </div>

            {/* Card */}
            <div
              className={`flex-1 flex items-center justify-between gap-3 px-3 py-2 rounded-lg border backdrop-blur-sm text-xs ${
                isA
                  ? "bg-[#B7A6FB]/5 border-[#B7A6FB]/15"
                  : "bg-cyan-900/5 border-cyan-500/15"
              }`}
            >
              <div className="flex items-center gap-2 min-w-0">
                <span
                  className={`text-[9px] font-mono px-1.5 py-0.5 rounded border shrink-0 ${
                    isA
                      ? "text-[#B7A6FB] bg-[#B7A6FB]/10 border-[#B7A6FB]/20"
                      : "text-cyan-400 bg-cyan-500/10 border-cyan-500/20"
                  }`}
                >
                  Agent {c.by}
                </span>
                <span className="material-symbols-outlined text-slate-600 text-sm">arrow_forward</span>
                <span className="text-slate-300 truncate">{c.gave_up}</span>
              </div>
              <span className="text-[9px] text-slate-600 font-mono shrink-0">Rd {c.round}</span>
            </div>
          </div>
        );
      })}
    </div>
  );
}


interface Props {
  concessions: ConcessionEntry[];
}