import { useState, useCallback } from "react";
export interface ParsedTask {
name: string;
description?: string;
group?: string;
order: number;
completed: boolean;
dependencies: string[];
}
interface TaskDerivationPreviewProps {
tasks: ParsedTask[];
groups: string[];
fileName: string;
onCreateTasks: (selectedTasks: ParsedTask[]) => void;
onCancel: () => void;
loading?: boolean;
}
export function TaskDerivationPreview({
tasks,
groups,
fileName,
onCreateTasks,
onCancel,
loading = false,
}: TaskDerivationPreviewProps) {
const [selectedIndices, setSelectedIndices] = useState<Set<number>>(
new Set(tasks.map((_, i) => i)) // Select all by default
);
const toggleTask = useCallback((index: number) => {
setSelectedIndices((prev) => {
const newSet = new Set(prev);
if (newSet.has(index)) {
newSet.delete(index);
} else {
newSet.add(index);
}
return newSet;
});
}, []);
const selectAll = useCallback(() => {
setSelectedIndices(new Set(tasks.map((_, i) => i)));
}, [tasks]);
const selectNone = useCallback(() => {
setSelectedIndices(new Set());
}, []);
const handleCreate = useCallback(() => {
const selectedTasks = tasks.filter((_, i) => selectedIndices.has(i));
onCreateTasks(selectedTasks);
}, [tasks, selectedIndices, onCreateTasks]);
// Group tasks by their group property
const tasksByGroup = tasks.reduce((acc, task, index) => {
const groupKey = task.group || "Ungrouped";
if (!acc[groupKey]) {
acc[groupKey] = [];
}
acc[groupKey].push({ task, index });
return acc;
}, {} as Record<string, { task: ParsedTask; index: number }[]>);
const selectedCount = selectedIndices.size;
const totalCount = tasks.length;
return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
<div className="w-full max-w-2xl p-6 bg-[#0a1628] border border-[rgba(117,170,252,0.3)] max-h-[80vh] flex flex-col">
{/* Header */}
<div className="flex items-center justify-between mb-4">
<div>
<h3 className="font-mono text-sm text-[#75aafc] uppercase">
Create Tasks from Document
</h3>
<p className="font-mono text-xs text-[#555] mt-1">
Source: {fileName}
</p>
</div>
<div className="flex items-center gap-2">
<button
onClick={selectAll}
className="font-mono text-[10px] text-[#75aafc] hover:text-[#9bc3ff] transition-colors"
>
Select All
</button>
<span className="text-[#555]">|</span>
<button
onClick={selectNone}
className="font-mono text-[10px] text-[#75aafc] hover:text-[#9bc3ff] transition-colors"
>
Select None
</button>
</div>
</div>
{/* Task List */}
<div className="flex-1 overflow-y-auto space-y-4 mb-4">
{groups.length > 0 ? (
// Grouped view
Object.entries(tasksByGroup).map(([groupName, groupTasks]) => (
<div key={groupName} className="space-y-2">
<h4 className="font-mono text-xs text-[#9bc3ff] uppercase border-b border-[rgba(117,170,252,0.2)] pb-1">
{groupName}
</h4>
{groupTasks.map(({ task, index }) => (
<TaskItem
key={index}
task={task}
index={index}
selected={selectedIndices.has(index)}
onToggle={() => toggleTask(index)}
/>
))}
</div>
))
) : (
// Flat view
tasks.map((task, index) => (
<TaskItem
key={index}
task={task}
index={index}
selected={selectedIndices.has(index)}
onToggle={() => toggleTask(index)}
/>
))
)}
</div>
{/* Footer */}
<div className="flex items-center justify-between pt-4 border-t border-[rgba(117,170,252,0.2)]">
<span className="font-mono text-xs text-[#555]">
{selectedCount} of {totalCount} tasks selected
</span>
<div className="flex gap-2">
<button
onClick={onCancel}
disabled={loading}
className="px-4 py-2 font-mono text-xs text-[#9bc3ff] hover:text-[#dbe7ff] transition-colors disabled:opacity-50"
>
Cancel
</button>
<button
onClick={handleCreate}
disabled={loading || selectedCount === 0}
className="px-4 py-2 font-mono text-xs text-[#dbe7ff] bg-[#0f3c78] border border-[#3f6fb3] hover:bg-[#153667] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
>
{loading ? "Creating..." : `Create ${selectedCount} Task${selectedCount !== 1 ? "s" : ""}`}
</button>
</div>
</div>
{/* Chaining info */}
{selectedCount > 1 && (
<p className="font-mono text-[10px] text-[#555] mt-2 text-center">
Tasks will be chained: each task continues from the previous one's work
</p>
)}
</div>
</div>
);
}
function TaskItem({
task,
index,
selected,
onToggle,
}: {
task: ParsedTask;
index: number;
selected: boolean;
onToggle: () => void;
}) {
return (
<button
onClick={onToggle}
className={`w-full text-left p-3 border transition-colors ${
selected
? "border-[#75aafc] bg-[rgba(117,170,252,0.1)]"
: "border-[rgba(117,170,252,0.15)] hover:border-[rgba(117,170,252,0.3)]"
}`}
>
<div className="flex items-start gap-2">
<span
className={`font-mono text-xs mt-0.5 ${
selected ? "text-[#75aafc]" : "text-[#555]"
}`}
>
{selected ? "[x]" : "[ ]"}
</span>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2">
<span className="font-mono text-[10px] text-[#555]">#{index + 1}</span>
<span className="font-mono text-sm text-[#dbe7ff]">{task.name}</span>
{task.completed && (
<span className="font-mono text-[9px] text-green-400 uppercase">
done in source
</span>
)}
</div>
{task.description && (
<p className="font-mono text-xs text-[#555] mt-1 truncate">
{task.description}
</p>
)}
{task.dependencies.length > 0 && (
<p className="font-mono text-[10px] text-[#75aafc] mt-1">
Depends on: {task.dependencies.join(", ")}
</p>
)}
</div>
</div>
</button>
);
}
