import { prisma } from "@/lib/prisma"
import { notFound } from "next/navigation"
import TaskCard from "./TaskCard"
import ActivityCard from "./ActivityCard"
import AutoRefresh from "./AutoRefresh"

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: {
            include: { materials: true }
          }
        },
        orderBy: { date: 'asc' }
      }
    }
  })


  if (!kid) {
    return notFound()
  }

  // Fetch all activities the kid is involved with to display in the library
  const kidActivities = await prisma.activity.findMany({
    where: {
      plannerTasks: {
        some: {
          kidId: kid.id
        }
      }
    },
    include: { materials: true }
  })

  return (
    <div style={{ 
      display: "flex", 
      flexDirection: "column", 
      minHeight: "100vh", 
      background: "var(--background)",
      paddingTop: "env(safe-area-inset-top)",
      paddingBottom: "env(safe-area-inset-bottom)"
    }}>
      <AutoRefresh interval={15000} />
      <header style={{ 
        width: "100%", 
        padding: "1rem 1.5rem", 
        background: "var(--surface)", 
        borderBottom: "1px solid var(--border)",
        display: "flex", 
        justifyContent: "space-between", 
        alignItems: "center", 
        marginBottom: "1.5rem",
        position: "sticky",
        top: 0,
        zIndex: 10
      }}>
        <h1 style={{ fontSize: "1.8rem", color: "var(--primary)", fontWeight: "800", letterSpacing: "-0.03em", margin: 0 }}>
          Hi, {kid.name}! 👋
        </h1>
        <div style={{ fontSize: "1.1rem", fontWeight: "600", opacity: 0.8 }}>
          {new Date().toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' })}
        </div>
      </header>

      <div style={{ width: "100%", maxWidth: "800px", margin: "0 auto", padding: "0 1.5rem" }}>
        <h2 style={{ fontSize: "1.6rem", fontWeight: "700", marginBottom: "1rem", color: "var(--foreground)" }}>My Day</h2>
        
        {kid.plannerTasks.length === 0 ? (
          <div className="ios-list">
            <div className="ios-list-item" style={{ justifyContent: "center", padding: "3rem", flexDirection: "column", gap: "1rem" }}>
              <span style={{ fontSize: "3rem" }}>🎉</span>
              <p style={{ fontSize: "1.2rem", opacity: 0.7, fontWeight: "500" }}>You have a free day today!</p>
            </div>
          </div>
        ) : (
          <div style={{ display: "flex", flexDirection: "column", gap: "1.25rem", paddingBottom: "2rem" }}>
            {kid.plannerTasks.map((task, index) => (
              <TaskCard key={task.id} task={task} isFirst={index === 0} />
            ))}
          </div>
        )}

        <div style={{ marginTop: "3rem", marginBottom: "2rem" }}>
          <h2 style={{ fontSize: "1.6rem", fontWeight: "700", marginBottom: "1rem", color: "var(--foreground)" }}>Activity Library</h2>
          {kidActivities.length === 0 ? (
            <p style={{ opacity: 0.7, padding: "1rem", textAlign: "center", background: "var(--surface)", borderRadius: "var(--radius-xl)" }}>No activities available yet.</p>
          ) : (
            <div style={{ display: "flex", flexDirection: "column", gap: "1.25rem" }}>
              {kidActivities.map((activity) => (
                <ActivityCard key={activity.id} activity={activity} />
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  )
}