"use client";

import BackToMC from "@/components/mission-control/BackToMC";
import { TaskCardsPanel } from "@/components/mission-control/TaskCardsPanel";
import { useState } from "react";
import { Task, TaskStatus } from "@/lib/mission-control/types";

const SAMPLE_TASKS: Task[] = [
  { id: "1", title: "Complete SiteMente landing page", status: "todo", project: "sitemente", priority: "high", createdAt: "2026-03-22", agent: "ptah" },
  { id: "2", title: "Write content for HostPioneers", status: "in_progress", project: "sitemente", priority: "medium", createdAt: "2026-03-21", agent: "seshat" },
  { id: "3", title: "Deploy trading bot", status: "done", project: "trading", priority: "high", createdAt: "2026-03-20", agent: "sekhmet" },
];

export default function TasksPage() {
  const [tasks, setTasks] = useState<Task[]>(SAMPLE_TASKS);

  const toggleTask = (id: string) => {
    setTasks(tasks.map(t => 
      t.id === id 
        ? { ...t, status: t.status === "done" ? "todo" as TaskStatus : "done" as TaskStatus }
        : t
    ));
  };

  return (
    <div className="min-h-screen bg-slate-950 text-white">
      <BackToMC />
      <div className="p-6">
        <div className="mb-6">
          <h1 className="text-3xl font-bold text-white mb-2">📋 Task Board</h1>
          <p className="text-slate-400">Manage tasks across all projects</p>
        </div>
        <TaskCardsPanel tasks={tasks} toggleTask={toggleTask} />
      </div>
    </div>
  );
}