import { CheckCircle2, Circle } from "lucide-react";
import type { CampaignSummary } from "../types";

export function CampaignQueue({
  campaigns,
  selectedId,
  onSelect,
}: {
  campaigns: CampaignSummary[];
  selectedId: string | null;
  onSelect: (id: string) => void;
}) {
  return (
    <aside className="w-72 shrink-0 border-r border-line bg-surface overflow-y-auto">
      <div className="px-4 py-3 text-xs font-semibold uppercase tracking-wide text-faint">
        Review queue
      </div>
      <ul>
        {campaigns.map((c) => {
          const active = c.id === selectedId;
          return (
            <li key={c.id}>
              <button
                onClick={() => onSelect(c.id)}
                className={`w-full text-left px-4 py-3 border-l-2 transition ${
                  active ? "border-accent bg-accent-soft" : "border-transparent hover:bg-panel"
                }`}
              >
                <div className="flex items-center gap-2">
                  {c.decided ? (
                    <CheckCircle2 size={15} className="text-emerald-600 dark:text-emerald-400" />
                  ) : (
                    <Circle size={15} className="text-faint" />
                  )}
                  <span className="text-xs font-mono text-faint">{c.id}</span>
                </div>
                <div className={`text-sm mt-0.5 line-clamp-2 ${active ? "text-heading font-medium" : "text-body"}`}>
                  {c.title}
                </div>
                {c.decided && (
                  <div className="text-xs text-faint mt-0.5">
                    decided: {c.decision}
                    {c.is_override ? " (override)" : ""}
                  </div>
                )}
              </button>
            </li>
          );
        })}
      </ul>
    </aside>
  );
}