import Link from "next/link"
import { CalendarCheck, CalendarDays, GraduationCap, Users } from "lucide-react"

import { Button } from "@/shared/components/ui/button"
import { EmptyState } from "@/shared/components/ui/empty-state"
import { ChildCard } from "./child-card"
import type { ParentDashboardData } from "@/modules/parent/types"

export function ParentDashboard({ data }: { data: ParentDashboardData }) {
  const { parentName, children } = data
  const hasChildren = children.length > 0

  const hour = new Date().getHours()
  let greeting = "Welcome"
  if (hour < 12) greeting = "Good morning"
  else if (hour < 18) greeting = "Good afternoon"
  else greeting = "Good evening"

  return (
    <div className="space-y-6">
      <div className="flex flex-col justify-between gap-4 md:flex-row md:items-center">
        <div className="space-y-1">
          <h1 className="text-2xl font-bold tracking-tight">Parent Dashboard</h1>
          <div className="text-sm text-muted-foreground">
            {greeting}
            {parentName ? `, ${parentName}` : ""}. Here&apos;s an overview of your children.
          </div>
        </div>
        <div className="flex flex-wrap items-center gap-2">
          <Button asChild variant="outline" size="sm" className="gap-2">
            <Link href="/parent/grades">
              <GraduationCap className="h-4 w-4" />
              Grades
            </Link>
          </Button>
          <Button asChild variant="outline" size="sm" className="gap-2">
            <Link href="/parent/attendance">
              <CalendarCheck className="h-4 w-4" />
              Attendance
            </Link>
          </Button>
          <Button asChild variant="outline" size="sm" className="gap-2">
            <Link href="/announcements">
              <CalendarDays className="h-4 w-4" />
              Announcements
            </Link>
          </Button>
        </div>
      </div>

      {!hasChildren ? (
        <EmptyState
          icon={Users}
          title="No children linked"
          description="Your account is not linked to any student accounts yet. Please contact the school administrator."
          className="border-none shadow-none"
        />
      ) : (
        <>
          <div className="flex items-center gap-2 text-sm text-muted-foreground">
            <Users className="h-4 w-4" />
            <span>
              {children.length} {children.length === 1 ? "child" : "children"} linked
            </span>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
            {children.map((child) => (
              <ChildCard key={child.basicInfo.id} child={child} />
            ))}
          </div>
        </>
      )}
    </div>
  )
}