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

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

const statusColors: Record<DirectiveStatus, string> = {
  draft: "text-[#888]",
  planning: "text-yellow-400",
  active: "text-green-400",
  paused: "text-orange-400",
  completed: "text-blue-400",
  archived: "text-[#555]",
  failed: "text-red-400",
};

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

  const filteredDirectives =
    filter === "all"
      ? directives
      : directives.filter((d) => d.status === filter);

  if (loading) {
    return (
      <div className="panel h-full flex items-center justify-center">
        <div className="font-mono text-[#9bc3ff] text-sm">Loading...</div>
      </div>
    );
  }

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

        {/* Filter tabs */}
        <div className="flex gap-1 flex-wrap">
          {(["all", "draft", "planning", "active", "paused", "completed", "failed"] as const).map(
            (status) => (
              <button
                key={status}
                onClick={() => setFilter(status)}
                className={`
                  px-2 py-1 font-mono text-[10px] uppercase tracking-wider transition-colors
                  ${
                    filter === status
                      ? "bg-[rgba(117,170,252,0.1)] text-[#9bc3ff] border border-[rgba(117,170,252,0.3)]"
                      : "text-[#555] hover:text-[#75aafc]"
                  }
                `}
              >
                {status}
              </button>
            )
          )}
        </div>
      </div>

      {/* List */}
      <div className="flex-1 overflow-y-auto">
        {filteredDirectives.length === 0 ? (
          <div className="p-4 text-center">
            <p className="font-mono text-sm text-[#555]">
              {filter === "all"
                ? "No directives yet"
                : `No ${filter} directives`}
            </p>
          </div>
        ) : (
          <div className="divide-y divide-[rgba(117,170,252,0.15)]">
            {filteredDirectives.map((directive) => (
              <button
                key={directive.id}
                onClick={() => onSelect(directive.id)}
                className={`
                  w-full text-left p-4 transition-colors
                  ${
                    selectedId === directive.id
                      ? "bg-[rgba(117,170,252,0.1)]"
                      : "hover:bg-[rgba(117,170,252,0.05)]"
                  }
                `}
              >
                <div className="flex items-start justify-between gap-2 mb-2">
                  <h3 className="font-mono text-sm text-[#dbe7ff] truncate">
                    {directive.title}
                  </h3>
                  <span
                    className={`text-[10px] font-mono uppercase shrink-0 ${
                      statusColors[directive.status] || "text-[#888]"
                    }`}
                  >
                    {directive.status}
                  </span>
                </div>

                {directive.goal && (
                  <p className="font-mono text-xs text-[#555] mb-2 line-clamp-2">
                    {directive.goal}
                  </p>
                )}

                <div className="flex items-center gap-3 text-[10px] font-mono text-[#555]">
                  {directive.chainCount > 0 && (
                    <span>{directive.chainCount} chains</span>
                  )}
                  {directive.stepCount > 0 && (
                    <span>{directive.stepCount} steps</span>
                  )}
                </div>
              </button>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}