import { useState } from "react";
import type {
DirectiveOrderGroup,
DOGStatus,
CreateDOGRequest,
} from "../../lib/api";
const DOG_STATUS_BADGE: Record<DOGStatus, { 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" },
done: { color: "text-emerald-400 border-emerald-800", label: "DONE" },
archived: { color: "text-[#556677] border-[#2a3a5a]", label: "ARCHIVED" },
};
const DOG_STATUS_OPTIONS: DOGStatus[] = ["open", "in_progress", "done", "archived"];
interface DOGListProps {
dogs: DirectiveOrderGroup[];
loading: boolean;
onCreateDog: (req: CreateDOGRequest) => Promise<DirectiveOrderGroup | null>;
onUpdateDog: (dogId: string, req: { name?: string; description?: string | null; status?: DOGStatus }) => Promise<void>;
onDeleteDog: (dogId: string) => Promise<void>;
onPickUpOrders: (dogId: string) => Promise<any>;
}
export function DOGList({
dogs,
loading,
onCreateDog,
onUpdateDog,
onDeleteDog,
onPickUpOrders,
}: DOGListProps) {
const [showCreate, setShowCreate] = useState(false);
const [newName, setNewName] = useState("");
const [newDesc, setNewDesc] = useState("");
const [creating, setCreating] = useState(false);
const handleCreate = async () => {
if (!newName.trim()) return;
setCreating(true);
try {
await onCreateDog({
name: newName.trim(),
description: newDesc.trim() || null,
});
setNewName("");
setNewDesc("");
setShowCreate(false);
} catch (e) {
console.error("Failed to create DOG:", e);
} finally {
setCreating(false);
}
};
if (loading) {
return (
<div className="flex items-center justify-center py-8">
<span className="text-[10px] font-mono text-[#556677]">Loading DOGs...</span>
</div>
);
}
return (
<div className="flex flex-col gap-3">
{/* Header + Create button */}
<div className="flex items-center justify-between">
<span className="text-[10px] font-mono text-[#9bc3ff] uppercase tracking-wide">
Order Groups ({dogs.length})
</span>
<button
type="button"
onClick={() => setShowCreate(!showCreate)}
className="text-[10px] font-mono text-[#75aafc] hover:text-white border border-[rgba(117,170,252,0.3)] rounded px-2 py-0.5"
>
{showCreate ? "Cancel" : "+ New DOG"}
</button>
</div>
{/* Create form */}
{showCreate && (
<div className="border border-[rgba(117,170,252,0.2)] bg-[#0a1525] rounded p-3 flex flex-col gap-2">
<div>
<label className="text-[9px] font-mono text-[#7788aa] uppercase tracking-wide block mb-1">
Name *
</label>
<input
value={newName}
onChange={(e) => setNewName(e.target.value)}
onKeyDown={(e) => {
if (e.key === "Enter" && newName.trim()) handleCreate();
if (e.key === "Escape") setShowCreate(false);
}}
placeholder="Group name..."
autoFocus
className="w-full bg-[#0a1628] border border-[rgba(117,170,252,0.2)] rounded px-2 py-1.5 text-[11px] font-mono text-white placeholder:text-[#445566]"
/>
</div>
<div>
<label className="text-[9px] font-mono text-[#7788aa] uppercase tracking-wide block mb-1">
Description
</label>
<textarea
value={newDesc}
onChange={(e) => setNewDesc(e.target.value)}
placeholder="Optional description..."
rows={2}
className="w-full bg-[#0a1628] border border-[rgba(117,170,252,0.2)] rounded px-2 py-1.5 text-[11px] font-mono text-white resize-y placeholder:text-[#445566]"
/>
</div>
<div className="flex gap-1.5">
<button
type="button"
onClick={handleCreate}
disabled={!newName.trim() || creating}
className="text-[10px] font-mono text-emerald-400 hover:text-emerald-300 border border-emerald-800 rounded px-2 py-0.5 disabled:opacity-50"
>
{creating ? "Creating..." : "Create"}
</button>
<button
type="button"
onClick={() => setShowCreate(false)}
className="text-[10px] font-mono text-[#7788aa] hover:text-white border border-[#2a3a5a] rounded px-2 py-0.5"
>
Cancel
</button>
</div>
</div>
)}
{/* DOG list */}
{dogs.length === 0 ? (
<div className="flex items-center justify-center py-6">
<span className="text-[10px] font-mono text-[#556677] italic">
No order groups yet
</span>
</div>
) : (
<div className="flex flex-col gap-2">
{dogs.map((dog) => (
<DOGCard
key={dog.id}
dog={dog}
onUpdate={onUpdateDog}
onDelete={onDeleteDog}
onPickUpOrders={onPickUpOrders}
/>
))}
</div>
)}
</div>
);
}
function DOGCard({
dog,
onUpdate,
onDelete,
onPickUpOrders,
}: {
dog: DirectiveOrderGroup;
onUpdate: (dogId: string, req: { name?: string; description?: string | null; status?: DOGStatus }) => Promise<void>;
onDelete: (dogId: string) => Promise<void>;
onPickUpOrders: (dogId: string) => Promise<any>;
}) {
const [editingName, setEditingName] = useState(false);
const [nameText, setNameText] = useState(dog.name);
const [editingDesc, setEditingDesc] = useState(false);
const [descText, setDescText] = useState(dog.description || "");
const [pickingUp, setPickingUp] = useState(false);
const [pickUpResult, setPickUpResult] = useState<string | null>(null);
const [deleting, setDeleting] = useState(false);
const badge = DOG_STATUS_BADGE[dog.status] || DOG_STATUS_BADGE.open;
const handleNameSave = async () => {
if (nameText.trim() && nameText !== dog.name) {
await onUpdate(dog.id, { name: nameText.trim() });
}
setEditingName(false);
};
const handleDescSave = async () => {
const newDesc = descText.trim() || null;
if (newDesc !== dog.description) {
await onUpdate(dog.id, { description: newDesc });
}
setEditingDesc(false);
};
const handleStatusChange = async (status: DOGStatus) => {
await onUpdate(dog.id, { status });
};
const handlePickUpOrders = async () => {
setPickingUp(true);
setPickUpResult(null);
try {
const result = await onPickUpOrders(dog.id);
if (result) {
setPickUpResult(result.message);
setTimeout(() => setPickUpResult(null), 5000);
}
} catch (e) {
setPickUpResult(e instanceof Error ? e.message : "Failed to plan orders");
setTimeout(() => setPickUpResult(null), 5000);
} finally {
setPickingUp(false);
}
};
const handleDelete = async () => {
if (!window.confirm(`Delete DOG "${dog.name}"?`)) return;
setDeleting(true);
try {
await onDelete(dog.id);
} catch (e) {
console.error("Failed to delete DOG:", e);
setDeleting(false);
}
};
return (
<div className="border border-[rgba(117,170,252,0.15)] bg-[#0a1525] rounded">
{/* Name + Status */}
<div className="px-3 py-2 border-b border-[rgba(117,170,252,0.08)]">
<div className="flex items-center justify-between mb-1.5">
{editingName ? (
<div className="flex-1 flex items-center gap-2 pr-2">
<input
value={nameText}
onChange={(e) => setNameText(e.target.value)}
onKeyDown={(e) => {
if (e.key === "Enter") handleNameSave();
if (e.key === "Escape") setEditingName(false);
}}
autoFocus
className="flex-1 bg-[#0a1628] border border-[rgba(117,170,252,0.2)] rounded px-2 py-0.5 text-[12px] font-mono text-white"
/>
<button
type="button"
onClick={handleNameSave}
className="text-[9px] font-mono text-emerald-400 hover:text-emerald-300"
>
[save]
</button>
<button
type="button"
onClick={() => setEditingName(false)}
className="text-[9px] font-mono text-[#556677] hover:text-white"
>
[cancel]
</button>
</div>
) : (
<span
className="text-[12px] font-mono text-white font-medium cursor-pointer hover:text-[#9bc3ff] truncate pr-2"
onClick={() => {
setNameText(dog.name);
setEditingName(true);
}}
>
{dog.name}
</span>
)}
<span className={`text-[9px] font-mono ${badge.color} border rounded px-1.5 py-0.5 shrink-0`}>
{badge.label}
</span>
</div>
{/* Status selector */}
<div className="flex gap-1 flex-wrap">
{DOG_STATUS_OPTIONS.map((s) => {
const sBadge = DOG_STATUS_BADGE[s];
return (
<button
key={s}
type="button"
onClick={() => handleStatusChange(s)}
className={`text-[9px] font-mono border rounded px-1.5 py-0.5 transition-colors ${
s === dog.status
? `${sBadge.color} bg-[rgba(117,170,252,0.1)]`
: "text-[#556677] border-[#2a3a5a] hover:text-[#7788aa]"
}`}
>
{sBadge.label}
</button>
);
})}
</div>
</div>
{/* Description */}
<div className="px-3 py-2 border-b border-[rgba(117,170,252,0.08)]">
<div className="flex items-center justify-between mb-1">
<span className="text-[9px] font-mono text-[#7788aa] uppercase tracking-wide">
Description
</span>
{!editingDesc && (
<button
type="button"
onClick={() => {
setDescText(dog.description || "");
setEditingDesc(true);
}}
className="text-[8px] font-mono text-[#556677] hover:text-[#75aafc]"
>
[edit]
</button>
)}
</div>
{editingDesc ? (
<div className="flex flex-col gap-1">
<textarea
value={descText}
onChange={(e) => setDescText(e.target.value)}
className="w-full bg-[#0a1628] border border-[rgba(117,170,252,0.2)] rounded px-2 py-1 text-[10px] font-mono text-white resize-y min-h-[40px]"
rows={2}
autoFocus
/>
<div className="flex gap-1">
<button
type="button"
onClick={handleDescSave}
className="text-[9px] font-mono text-emerald-400 hover:text-emerald-300 border border-emerald-800 rounded px-1.5 py-0.5"
>
Save
</button>
<button
type="button"
onClick={() => setEditingDesc(false)}
className="text-[9px] font-mono text-[#7788aa] hover:text-white border border-[#2a3a5a] rounded px-1.5 py-0.5"
>
Cancel
</button>
</div>
</div>
) : (
<p className="text-[10px] font-mono text-[#c0d0e0] whitespace-pre-wrap">
{dog.description || <span className="text-[#556677] italic">No description</span>}
</p>
)}
</div>
{/* Actions */}
<div className="px-3 py-2 flex items-center gap-2">
<button
type="button"
onClick={handlePickUpOrders}
disabled={pickingUp}
className="text-[10px] font-mono text-[#c084fc] hover:text-[#d8b4fe] border border-[rgba(192,132,252,0.3)] rounded px-2 py-0.5 disabled:opacity-50"
>
{pickingUp ? "Planning..." : "Plan Orders"}
</button>
<button
type="button"
onClick={handleDelete}
disabled={deleting}
className="text-[10px] font-mono text-red-400 hover:text-red-300 border border-red-800 rounded px-2 py-0.5 ml-auto disabled:opacity-50"
>
{deleting ? "Deleting..." : "Delete"}
</button>
</div>
{/* Pick-up result */}
{pickUpResult && (
<div className="mx-3 mb-2 px-2 py-1.5 bg-[#1a1030] border border-[rgba(192,132,252,0.2)] rounded">
<span className="text-[10px] font-mono text-[#c084fc]">{pickUpResult}</span>
</div>
)}
{/* Metadata */}
<div className="px-3 py-1.5 border-t border-[rgba(117,170,252,0.05)]">
<span className="text-[8px] font-mono text-[#445566]">
Created {new Date(dog.createdAt).toLocaleDateString()}
</span>
</div>
</div>
);
}
