"use client";

import { useState } from "react";
import Column from "@/components/Column";
import AddTaskForm from "@/components/AddTaskForm";

export default function Dashboard() {
  const [tasks, setTasks] = useState({
    todo: [
      {
        title: "Finish lab",
        description: "Complete physics lab report",
        dueDate: "2026-08-10",
        topic: "Physics",
      },
      {
        title: "Study Next.js",
        description: "Learn routing and layouts",
        dueDate: "2026-08-08",
        topic: "Coding",
      },
    ],
    inProgress: [],
    done: [],
  });

  const [showForm, setShowForm] = useState(false);

  const addTask = (task: any) => {
    setTasks((prev) => ({
      ...prev,
      todo: [...prev.todo, task],
    }));
  };

  return (
    <main style={styles.container}>
      <h1 style={styles.title}>Planner Danner</h1>

      <div style={styles.board}>
        <Column title="To Do" tasks={tasks.todo} onAdd={() => setShowForm(true)} />
        <Column title="In Progress" tasks={tasks.inProgress} />
        <Column title="Done" tasks={tasks.done} />
      </div>

      {showForm && (
        <AddTaskForm
          onSubmit={addTask}
          onClose={() => setShowForm(false)}
        />
      )}
    </main>
  );
}

const styles = {
  container: {
    minHeight: "100vh",
    background: "linear-gradient(to bottom, #38bdf8, #0ea5e9)",
    padding: "30px",
  },
  title: {
    textAlign: "center" as const,
    fontSize: "90px",
    fontWeight: "900",
    color: "white",
    letterSpacing: "2px",
    textShadow: `
      0 4px 0 #0284c7,
      0 8px 20px rgba(0,0,0,0.2)
    `,
    marginBottom: "30px",
  },
  board: {
    display: "flex",
    gap: "20px",
    justifyContent: "center",
  },
};