import { prisma } from "@/lib/prisma"
import { notFound } from "next/navigation"

export default async function KidDashboard({ params }: { params: Promise<{ loginToken: string }> }) {
  const { loginToken: token } = await params

  const kid = await prisma.kid.findUnique({
    where: { loginToken: token },
    include: {
      plannerTasks: {
        include: { activity: true },
        orderBy: { date: 'asc' }
      }
    }
  })

  if (!kid) {
    return notFound()
  }

  return (
    <div className="container" style={{ padding: "1rem", background: "var(--background)" }}>
      <header style={{ width: "100%", padding: "1rem", background: "var(--surface)", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-sm)", display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "2rem" }}>
        <h1 style={{ fontSize: "2rem", color: "var(--primary)", fontWeight: "bold", margin: 0 }}>
          Hi, {kid.name}! 👋
        </h1>
        <div style={{ fontSize: "1.2rem", fontWeight: "bold" }}>
          {new Date().toLocaleDateString('en-US', { weekday: 'long', month: 'short', day: 'numeric' })}
        </div>
      </header>

      <div style={{ width: "100%", maxWidth: "800px" }}>
        <h2 style={{ fontSize: "1.8rem", marginBottom: "1rem", color: "var(--foreground)" }}>My Day</h2>
        
        {kid.plannerTasks.length === 0 ? (
          <div className="card" style={{ maxWidth: "100%" }}>
            <p style={{ fontSize: "1.2rem" }}>You have a free day today! 🎉</p>
          </div>
        ) : (
          <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
            {kid.plannerTasks.map((task, index) => (
              <div 
                key={task.id} 
                style={{ 
                  background: "var(--surface)", 
                  padding: "1.5rem", 
                  borderRadius: "var(--radius-lg)", 
                  boxShadow: "var(--shadow-sm)", 
                  display: "flex", 
                  alignItems: "center", 
                  gap: "1.5rem",
                  borderLeft: "6px solid var(--primary)",
                  transform: index === 0 ? "scale(1.02)" : "scale(1)", // highlight first task
                  transition: "var(--transition)"
                }}
              >
                <div style={{ flex: 1 }}>
                  {task.startTime && <div style={{ fontSize: "1.1rem", fontWeight: "bold", color: "var(--primary)", marginBottom: "0.2rem" }}>{task.startTime}</div>}
                  <h3 style={{ fontSize: "1.5rem", margin: 0 }}>{task.title}</h3>
                  {task.activity && (
                    <div style={{ marginTop: "0.5rem", color: "var(--primary-hover)", fontWeight: 500 }}>
                      Activity: {task.activity.name}
                    </div>
                  )}
                </div>
                <div>
                  <button className="btn" style={{ fontSize: "1.2rem", padding: "1rem 2rem", borderRadius: "30px" }}>
                    Start
                  </button>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  )
}