import { DashboardLayout } from "@/components/layout/sidebar";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Plus, Calendar, CheckCircle2, Circle, Clock } from "lucide-react";

const columns = [
  {
    id: "todo",
    title: "To Do",
    tasks: [
      {
        id: 1,
        title: "Submit LLC paperwork",
        description: "For remaining iOS apps",
        priority: "high",
        due: "ASAP",
        tags: ["business", "legal"],
      },
      {
        id: 2,
        title: "Fix App Clips testing",
        description: "Debug the in-progress app",
        priority: "high",
        due: "This week",
        tags: ["ios", "development"],
      },
      {
        id: 3,
        title: "Plan fishing trip details",
        description: "36hr offshore with Jeromy",
        priority: "medium",
        due: "Soon",
        tags: ["family", "fun"],
      },
    ],
  },
  {
    id: "inprogress",
    title: "In Progress",
    tasks: [
      {
        id: 4,
        title: "Mission Control Dashboard",
        description: "Building the central hub",
        priority: "high",
        due: "Today",
        tags: ["project", "development"],
      },
      {
        id: 5,
        title: "Toyota contract work",
        description: "iOS Lead Architect duties",
        priority: "high",
        due: "Daily",
        tags: ["work", "contract"],
      },
    ],
  },
  {
    id: "done",
    title: "Done",
    tasks: [
      {
        id: 6,
        title: "Created 6 iOS apps",
        description: "2 live, 2 pending, 1 in review, 1 in progress",
        priority: "high",
        due: "Completed",
        tags: ["ios", "milestone"],
      },
      {
        id: 7,
        title: "Daily skills automation",
        description: "File system, calendar, email, reminders",
        priority: "medium",
        due: "Completed",
        tags: ["automation", "system"],
      },
      {
        id: 8,
        title: "Morning briefing setup",
        description: "Scheduled for 7:15 AM daily",
        priority: "medium",
        due: "Completed",
        tags: ["automation", "routine"],
      },
    ],
  },
];

const priorityColors: Record<string, string> = {
  high: "bg-red-500/10 text-red-500 border-red-500/20",
  medium: "bg-yellow-500/10 text-yellow-500 border-yellow-500/20",
  low: "bg-blue-500/10 text-blue-500 border-blue-500/20",
};

export default function TasksPage() {
  return (
    <DashboardLayout>
      <div className="space-y-6">
        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
          <div>
            <h1 className="text-3xl font-bold tracking-tight">Tasks</h1>
            <p className="text-muted-foreground mt-1">
              Manage your missions and track progress.
            </p>
          </div>
          <Button>
            <Plus className="w-4 h-4 mr-2" />
            Add Task
          </Button>
        </div>

        {/* Kanban Board */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {columns.map((column) => (
            <div key={column.id} className="space-y-4">
              <div className="flex items-center justify-between">
                <h2 className="font-semibold flex items-center gap-2">
                  {column.id === "todo" && <Circle className="w-4 h-4" />}
                  {column.id === "inprogress" && <Clock className="w-4 h-4" />}
                  {column.id === "done" && <CheckCircle2 className="w-4 h-4" />}
                  {column.title}
                  <span className="text-muted-foreground text-sm">
                    ({column.tasks.length})
                  </span>
                </h2>
              </div>

              <div className="space-y-3">
                {column.tasks.map((task) => (
                  <Card key={task.id} className="cursor-pointer hover:shadow-md transition-shadow">
                    <CardContent className="p-4 space-y-3">
                      <div className="flex items-start justify-between gap-2">
                        <h3 className="font-medium text-sm">{task.title}</h3>
                        <Badge
                          variant="outline"
                          className={`text-xs ${priorityColors[task.priority]}`}
                        >
                          {task.priority}
                        </Badge>
                      </div>

                      <p className="text-xs text-muted-foreground">
                        {task.description}
                      </p>

                      <div className="flex items-center gap-2 flex-wrap">
                        {task.tags.map((tag) => (
                          <span
                            key={tag}
                            className="text-[10px] px-2 py-0.5 rounded-full bg-secondary text-secondary-foreground"
                          >
                            {tag}
                          </span>
                        ))}
                      </div>

                      <div className="flex items-center gap-1 text-xs text-muted-foreground pt-2 border-t border-border">
                        <Calendar className="w-3 h-3" />
                        {task.due}
                      </div>
                    </CardContent>
                  </Card>
                ))}

                <Button variant="ghost" className="w-full justify-start text-muted-foreground">
                  <Plus className="w-4 h-4 mr-2" />
                  Add task
                </Button>
              </div>
            </div>
          ))}
        </div>

        {/* Stats */}
        <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 pt-6 border-t border-border">
          <div className="text-center">
            <div className="text-2xl font-bold">12</div>
            <div className="text-xs text-muted-foreground">Total Tasks</div>
          </div>
          <div className="text-center">
            <div className="text-2xl font-bold">3</div>
            <div className="text-xs text-muted-foreground">To Do</div>
          </div>
          <div className="text-center">
            <div className="text-2xl font-bold">2</div>
            <div className="text-xs text-muted-foreground">In Progress</div>
          </div>
          <div className="text-center">
            <div className="text-2xl font-bold">7</div>
            <div className="text-xs text-muted-foreground">Completed</div>
          </div>
        </div>
      </div>
    </DashboardLayout>
  );
}