"use client";

import StatusIndicator from "./StatusIndicator";

interface StationItem {
  id: string;
  name: string;
  status: string;
  detail?: string;
}

interface StationPanelProps {
  title: string;
  icon: string;
  items: StationItem[];
  onSelectItem: (id: string) => void;
  selectedId?: string;
}

function statusToColor(status: string): "green" | "amber" | "red" | "unknown" {
  if (["online", "running", "up"].includes(status)) return "green";
  if (["degraded"].includes(status)) return "amber";
  if (["offline", "stopped", "errored", "down"].includes(status)) return "red";
  return "unknown";
}

export default function StationPanel({ title, icon, items, onSelectItem, selectedId }: StationPanelProps) {
  return (
    <div className="bg-zinc-900/80 border border-zinc-700/50 rounded-lg p-3 flex flex-col min-h-0 h-full relative">
      <div className="flex items-center gap-2 mb-2 text-xs font-mono uppercase tracking-wider text-zinc-400 shrink-0">
        <span>{icon}</span>
        <span>{title}</span>
        <span className="ml-auto text-zinc-500 tabular-nums">{items.length}</span>
      </div>
      <div className="flex flex-col gap-0.5 overflow-y-auto min-h-0 scrollbar-thin">
        {items.map((item) => {
          const color = statusToColor(item.status);
          return (
            <button
              key={item.id}
              onClick={() => onSelectItem(item.id)}
              className={`flex items-center gap-2 px-2 py-1 rounded text-xs text-left transition-colors shrink-0
                ${selectedId === item.id ? "bg-zinc-700/50 ring-1 ring-zinc-600" : "hover:bg-zinc-800/50"}
              `}
            >
              <StatusIndicator status={color} size="sm" />
              <span className={`truncate flex-1 ${color === "red" ? "text-red-300" : color === "amber" ? "text-amber-300" : "text-zinc-200"}`}>
                {item.name}
              </span>
              {item.detail && (
                <span className={`text-[10px] font-mono tabular-nums shrink-0 ${
                  color === "red" ? "text-red-400" : color === "amber" ? "text-amber-400" : "text-zinc-500"
                }`}>
                  {item.detail}
                </span>
              )}
            </button>
          );
        })}
      </div>
      {/* Bottom fade to indicate more content */}
      <div className="absolute bottom-0 left-0 right-0 h-6 bg-gradient-to-t from-zinc-900/80 to-transparent rounded-b-lg pointer-events-none" />
    </div>
  );
}
