import { useState, useMemo } from "react";
import type { Order, OrderStatus, OrderPriority, OrderType } from "../../lib/api";
import { OrderContextMenu } from "./OrderContextMenu";
const STATUS_BADGE: Record<OrderStatus, { color: string; label: string }> = {
open: { color: "text-[#75aafc] border-[rgba(117,170,252,0.4)]", label: "OPEN" },
in_progress: { color: "text-yellow-400 border-yellow-800", label: "IN PROGRESS" },
under_review: { color: "text-purple-400 border-purple-800", label: "REVIEW" },
done: { color: "text-emerald-400 border-emerald-800", label: "DONE" },
archived: { color: "text-[#556677] border-[#2a3a5a]", label: "ARCHIVED" },
};
const PRIORITY_COLOR: Record<OrderPriority, string> = {
critical: "bg-red-400",
high: "bg-orange-400",
medium: "bg-yellow-400",
low: "bg-[#75aafc]",
none: "bg-[#556677]",
};
const TYPE_BADGE: Record<OrderType, { color: string; label: string }> = {
feature: { color: "text-[#75aafc] border-[rgba(117,170,252,0.3)]", label: "FEAT" },
bug: { color: "text-red-400 border-red-800", label: "BUG" },
spike: { color: "text-yellow-400 border-yellow-800", label: "SPIKE" },
chore: { color: "text-[#7788aa] border-[#2a3a5a]", label: "CHORE" },
improvement: { color: "text-emerald-400 border-emerald-800", label: "IMPROVE" },
};
interface OrderListProps {
orders: Order[];
selectedId: string | null;
onSelect: (id: string) => void;
onCreate: () => void;
statusFilter: OrderStatus | undefined;
onStatusFilter: (s: OrderStatus | undefined) => void;
typeFilter: OrderType | undefined;
onTypeFilter: (t: OrderType | undefined) => void;
onChangeStatus?: (order: Order, status: OrderStatus) => void;
onDelete?: (order: Order) => void;
onGoToDirective?: (order: Order) => void;
}
const STATUS_OPTIONS: (OrderStatus | "all")[] = ["all", "open", "in_progress", "under_review", "done", "archived"];
const TYPE_OPTIONS: (OrderType | "all")[] = ["all", "feature", "bug", "spike", "chore", "improvement"];
export function OrderList({
orders,
selectedId,
onSelect,
onCreate,
statusFilter,
onStatusFilter,
typeFilter,
onTypeFilter,
onChangeStatus,
onDelete,
onGoToDirective,
}: OrderListProps) {
const [search, setSearch] = useState("");
const [contextMenuPosition, setContextMenuPosition] = useState<{ x: number; y: number } | null>(null);
const [contextMenuOrder, setContextMenuOrder] = useState<Order | null>(null);
const handleContextMenu = (e: React.MouseEvent, order: Order) => {
e.preventDefault();
setContextMenuPosition({ x: e.clientX, y: e.clientY });
setContextMenuOrder(order);
};
const closeContextMenu = () => {
setContextMenuPosition(null);
setContextMenuOrder(null);
};
const filtered = useMemo(() => {
if (!search.trim()) return orders;
const q = search.toLowerCase();
return orders.filter(
(o) =>
o.title.toLowerCase().includes(q) ||
(o.description && o.description.toLowerCase().includes(q)) ||
o.labels.some((l) => l.toLowerCase().includes(q)) ||
(o.directiveName && o.directiveName.toLowerCase().includes(q)),
);
}, [orders, search]);
return (
<div className="flex flex-col h-full">
{/* Header */}
<div className="flex items-center justify-between px-3 py-2 border-b border-dashed border-[rgba(117,170,252,0.2)]">
<span className="text-[11px] font-mono text-[#9bc3ff] uppercase tracking-wide">
Orders
</span>
<button
type="button"
onClick={onCreate}
className="text-[11px] font-mono text-[#75aafc] hover:text-white bg-transparent border border-[rgba(117,170,252,0.3)] rounded px-2 py-0.5 hover:border-[rgba(117,170,252,0.6)] transition-colors"
>
+ New
</button>
</div>
{/* Search */}
<div className="px-3 py-1.5 border-b border-[rgba(117,170,252,0.1)]">
<input
value={search}
onChange={(e) => setSearch(e.target.value)}
placeholder="Search orders..."
className="w-full bg-transparent border-none outline-none text-[11px] font-mono text-white placeholder:text-[#556677]"
/>
</div>
{/* Filters */}
<div className="px-3 py-1.5 border-b border-[rgba(117,170,252,0.1)] flex flex-col gap-1">
<div className="flex items-center gap-1 flex-wrap">
<span className="text-[9px] font-mono text-[#556677] uppercase w-[38px] shrink-0">
Status
</span>
{STATUS_OPTIONS.map((s) => (
<button
key={s}
type="button"
onClick={() => onStatusFilter(s === "all" ? undefined : s)}
className={`text-[9px] font-mono px-1.5 py-0.5 rounded transition-colors ${
(s === "all" && !statusFilter) || s === statusFilter
? "text-white bg-[rgba(117,170,252,0.15)] border border-[rgba(117,170,252,0.4)]"
: "text-[#556677] hover:text-[#7788aa] border border-transparent"
}`}
>
{s === "all" ? "ALL" : s === "in_progress" ? "WIP" : s === "under_review" ? "REVIEW" : s.toUpperCase()}
</button>
))}
</div>
<div className="flex items-center gap-1 flex-wrap">
<span className="text-[9px] font-mono text-[#556677] uppercase w-[38px] shrink-0">
Type
</span>
{TYPE_OPTIONS.map((t) => (
<button
key={t}
type="button"
onClick={() => onTypeFilter(t === "all" ? undefined : t)}
className={`text-[9px] font-mono px-1.5 py-0.5 rounded transition-colors ${
(t === "all" && !typeFilter) || t === typeFilter
? "text-white bg-[rgba(117,170,252,0.15)] border border-[rgba(117,170,252,0.4)]"
: "text-[#556677] hover:text-[#7788aa] border border-transparent"
}`}
>
{t === "all" ? "ALL" : t.toUpperCase()}
</button>
))}
</div>
</div>
{/* List */}
<div className="flex-1 overflow-y-auto">
{filtered.length === 0 ? (
<div className="px-3 py-6 text-center text-[#556677] font-mono text-[11px]">
No orders found
</div>
) : (
filtered.map((o) => {
const statusBadge = STATUS_BADGE[o.status] || STATUS_BADGE.open;
const typeBadge = TYPE_BADGE[o.orderType] || TYPE_BADGE.feature;
const priorityColor = PRIORITY_COLOR[o.priority] || PRIORITY_COLOR.none;
return (
<button
key={o.id}
type="button"
onClick={() => onSelect(o.id)}
onContextMenu={(e) => handleContextMenu(e, o)}
className={`w-full text-left px-3 py-2.5 border-b border-[rgba(117,170,252,0.1)] hover:bg-[rgba(117,170,252,0.05)] transition-colors ${
selectedId === o.id ? "bg-[rgba(117,170,252,0.1)]" : ""
}`}
>
<div className="flex items-start gap-2 mb-1">
{/* Priority dot */}
<span
className={`w-2 h-2 rounded-full ${priorityColor} shrink-0 mt-[3px]`}
title={o.priority}
/>
<span className="text-[12px] font-mono text-white truncate flex-1">
{o.title}
{o.directiveName && (
<span className="text-[9px] font-mono text-[#556677] truncate block">
{o.directiveName}
</span>
)}
</span>
</div>
<div className="flex items-center gap-1.5 pl-4">
<span
className={`text-[9px] font-mono ${statusBadge.color} border rounded px-1.5 py-0.5`}
>
{statusBadge.label}
</span>
<span
className={`text-[9px] font-mono ${typeBadge.color} border rounded px-1.5 py-0.5`}
>
{typeBadge.label}
</span>
{o.labels.length > 0 && (
<span className="text-[9px] font-mono text-[#556677] truncate">
{o.labels.slice(0, 2).join(", ")}
{o.labels.length > 2 && ` +${o.labels.length - 2}`}
</span>
)}
</div>
</button>
);
})
)}
</div>
{/* Context Menu */}
{contextMenuPosition && contextMenuOrder && (
<OrderContextMenu
x={contextMenuPosition.x}
y={contextMenuPosition.y}
order={contextMenuOrder}
onClose={closeContextMenu}
onChangeStatus={(status) => onChangeStatus?.(contextMenuOrder, status)}
onDelete={() => onDelete?.(contextMenuOrder)}
onGoToDirective={() => onGoToDirective?.(contextMenuOrder)}
/>
)}
</div>
);
}
