import { CalendarHeart, ImageIcon, MailCheck, UsersRound } from "lucide-react"

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { Badge } from "@/components/ui/badge"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

const dashboardCards = [
  {
    title: "Invitations",
    value: "—",
    description: "Guest group management starts in the next milestone.",
    icon: UsersRound,
  },
  {
    title: "RSVPs",
    value: "—",
    description: "Per-member responses will appear here later.",
    icon: MailCheck,
  },
  {
    title: "Photo uploads",
    value: "—",
    description: "MinIO uploads are planned after RSVP interactions.",
    icon: ImageIcon,
  },
]

export default function AdminPage() {
  return (
    <div className="space-y-8">
      <div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
        <div className="space-y-2">
          <Badge variant="secondary" className="w-fit">
            Milestone 02
          </Badge>
          <h1 className="text-3xl font-semibold tracking-tight">Admin dashboard</h1>
          <p className="max-w-2xl text-muted-foreground">
            The protected admin shell is ready. Invitation management will be added
            in the next milestone.
          </p>
        </div>
      </div>

      <Alert>
        <CalendarHeart />
        <AlertTitle>Admin access is protected</AlertTitle>
        <AlertDescription>
          Only Google accounts listed in <code>ADMIN_EMAILS</code> can access this area.
        </AlertDescription>
      </Alert>

      <section className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
        {dashboardCards.map((card) => {
          const Icon = card.icon

          return (
            <Card key={card.title}>
              <CardHeader className="flex flex-row items-center justify-between space-y-0">
                <div className="space-y-1">
                  <CardTitle className="text-sm font-medium">{card.title}</CardTitle>
                  <CardDescription>{card.description}</CardDescription>
                </div>
                <Icon className="size-5 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-3xl font-semibold">{card.value}</div>
              </CardContent>
            </Card>
          )
        })}
      </section>
    </div>
  )
}