import { useState } from "react";
import type { DirectiveSummary } from "../../lib/api";
import { DirectiveListItem } from "./DirectiveListItem";

interface DirectiveListProps {
  directives: DirectiveSummary[];
  loading: boolean;
  onSelect: (id: string) => void;
  onCreate: () => void;
  selectedId?: string;
  onArchive: (directive: DirectiveSummary) => void;
}

export function DirectiveList({
  directives,
  loading,
  onSelect,
  onCreate,
  selectedId,
  onArchive,
}: DirectiveListProps) {
  const [filter, setFilter] = useState<"all" | "active" | "completed" | "failed">("all");

  const filteredDirectives = directives.filter((d) => {
    if (filter === "all") return true;
    if (filter === "active") return ["draft", "planning", "active", "paused"].includes(d.status);
    if (filter === "completed") return d.status === "completed";
    if (filter === "failed") return d.status === "failed";
    return true;
  });

  return (
    <div className="panel h-full flex flex-col overflow-hidden">
      <div className="flex items-center justify-between p-3 border-b border-[rgba(117,170,252,0.15)]">
        <h2 className="font-mono text-sm text-[#75aafc] uppercase">Directives</h2>
        <button
          onClick={onCreate}
          className="px-3 py-1 font-mono text-[10px] text-[#dbe7ff] bg-[#0f3c78] border border-[#3f6fb3] hover:bg-[#153667] transition-colors uppercase"
        >
          + New
        </button>
      </div>

      {/* Filters */}
      <div className="flex gap-1 p-2 border-b border-[rgba(117,170,252,0.1)]">
        {(["all", "active", "completed", "failed"] as const).map((f) => (
          <button
            key={f}
            onClick={() => setFilter(f)}
            className={`px-2 py-1 font-mono text-[10px] uppercase ${
              filter === f
                ? "text-[#dbe7ff] bg-[#0f3c78] border border-[#3f6fb3]"
                : "text-[#556677] hover:text-[#9bc3ff]"
            }`}
          >
            {f}
          </button>
        ))}
      </div>

      {/* List */}
      <div className="flex-1 overflow-y-auto">
        {loading ? (
          <div className="p-4 text-center">
            <p className="font-mono text-xs text-[#556677]">Loading...</p>
          </div>
        ) : filteredDirectives.length === 0 ? (
          <div className="p-4 text-center">
            <p className="font-mono text-xs text-[#556677]">No directives found</p>
          </div>
        ) : (
          filteredDirectives.map((d) => (
            <DirectiveListItem
              key={d.id}
              directive={d}
              selected={d.id === selectedId}
              onClick={() => onSelect(d.id)}
              onArchive={() => onArchive(d)}
            />
          ))
        )}
      </div>
    </div>
  );
}