import Link from "next/link"
import {
  Camera,
  CheckCircle2,
  Clock3,
  MailCheck,
  MessageSquareText,
  TrendingUp,
  UserRoundCheck,
  UserRoundX,
  UsersRound,
} from "lucide-react"

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Progress } from "@/components/ui/progress"
import { getAdminDashboardMetrics } from "@/lib/db/queries/dashboard"

export const dynamic = "force-dynamic"

function percentage(value: number, total: number) {
  if (total <= 0) return 0

  return Math.round((value / total) * 100)
}

function formatNumber(value: number) {
  return new Intl.NumberFormat("en").format(value)
}

export default async function AdminPage() {
  const metrics = await getAdminDashboardMetrics()

  const attendanceRows = [
    {
      label: "Attending",
      value: metrics.attendingMembers,
      percent: percentage(metrics.attendingMembers, metrics.totalMembers),
      className: "bg-emerald-600",
    },
    {
      label: "Declined",
      value: metrics.declinedMembers,
      percent: percentage(metrics.declinedMembers, metrics.totalMembers),
      className: "bg-rose-600",
    },
    {
      label: "Pending",
      value: metrics.pendingMembers,
      percent: percentage(metrics.pendingMembers, metrics.totalMembers),
      className: "bg-amber-500",
    },
  ]

  const submittedPercent = percentage(
    metrics.submittedInvitations,
    metrics.totalInvitations,
  )
  const uploadedPhotoPercent = percentage(metrics.uploadedPhotos, metrics.totalInvitations)

  const metricCards = [
    {
      title: "Invitation groups",
      value: metrics.totalInvitations,
      description: `${formatNumber(metrics.pendingInvitations)} awaiting RSVP`,
      icon: UsersRound,
    },
    {
      title: "Invited people",
      value: metrics.totalMembers,
      description: "Across all invitation groups",
      icon: UsersRound,
    },
    {
      title: "Attending",
      value: metrics.attendingMembers,
      description: `${percentage(metrics.attendingMembers, metrics.totalMembers)}% of invited people`,
      icon: UserRoundCheck,
    },
    {
      title: "Declined",
      value: metrics.declinedMembers,
      description: `${percentage(metrics.declinedMembers, metrics.totalMembers)}% of invited people`,
      icon: UserRoundX,
    },
    {
      title: "Pending responses",
      value: metrics.pendingMembers,
      description: `${percentage(metrics.pendingMembers, metrics.totalMembers)}% of invited people`,
      icon: Clock3,
    },
    {
      title: "Submitted RSVPs",
      value: metrics.submittedInvitations,
      description: `${submittedPercent}% of invitation groups`,
      icon: MailCheck,
    },
    {
      title: "Uploaded photos",
      value: metrics.uploadedPhotos,
      description: `${uploadedPhotoPercent}% of invitation groups`,
      icon: Camera,
    },
    {
      title: "Pending toasts",
      value: metrics.pendingToastRequests,
      description:
        metrics.pendingToastRequests > 0 ? "Need review or scheduling" : "No pending toast requests",
      icon: MessageSquareText,
    },
  ]

  return (
    <div className="space-y-8">
      <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
        <div className="space-y-2">
          <Badge variant="secondary" className="w-fit">
            Live dashboard
          </Badge>
          <h1 className="text-3xl font-semibold tracking-tight">Admin dashboard</h1>
          <p className="max-w-2xl text-muted-foreground">
            Track invitation groups, RSVP answers, photo uploads, and toast requests.
          </p>
        </div>
        <div className="flex flex-wrap gap-2">
          <Button asChild variant="outline">
            <Link href="/admin/guests">View guest list</Link>
          </Button>
          <Button asChild>
            <Link href="/admin/guests/new">Create invitation</Link>
          </Button>
        </div>
      </div>

      {metrics.totalInvitations === 0 ? (
        <Alert>
          <UsersRound />
          <AlertTitle>No invitations yet</AlertTitle>
          <AlertDescription>
            Create the first invitation group to start tracking RSVP progress.
          </AlertDescription>
        </Alert>
      ) : null}

      <section className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
        {metricCards.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">{formatNumber(card.value)}</div>
              </CardContent>
            </Card>
          )
        })}
      </section>

      <section className="grid gap-4 lg:grid-cols-2">
        <Card>
          <CardHeader>
            <CardTitle>Attendance overview</CardTitle>
            <CardDescription>
              Individual guest answers across all invitation groups.
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-5">
            {attendanceRows.map((row) => (
              <div key={row.label} className="space-y-2">
                <div className="flex items-center justify-between gap-4 text-sm">
                  <span className="font-medium">{row.label}</span>
                  <span className="text-muted-foreground">
                    {formatNumber(row.value)} / {formatNumber(metrics.totalMembers)} · {row.percent}%
                  </span>
                </div>
                <Progress
                  value={row.percent}
                  aria-label={`${row.label} ${row.percent}%`}
                  className="h-2"
                  indicatorClassName={row.className}
                />
              </div>
            ))}
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>Invitation responses</CardTitle>
            <CardDescription>
              Group-level RSVP submission rate.
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-6">
            <div className="space-y-2">
              <div className="flex items-center justify-between gap-4 text-sm">
                <span className="font-medium">Submitted groups</span>
                <span className="text-muted-foreground">
                  {formatNumber(metrics.submittedInvitations)} / {formatNumber(metrics.totalInvitations)} · {submittedPercent}%
                </span>
              </div>
              <Progress value={submittedPercent} aria-label={`${submittedPercent}% submitted`} />
            </div>

            <div className="grid gap-3 sm:grid-cols-2">
              <div className="rounded-lg border p-4">
                <div className="flex items-center gap-2 text-sm text-muted-foreground">
                  <CheckCircle2 className="size-4" />
                  Submitted
                </div>
                <p className="mt-2 text-2xl font-semibold">
                  {formatNumber(metrics.submittedInvitations)}
                </p>
              </div>
              <div className="rounded-lg border p-4">
                <div className="flex items-center gap-2 text-sm text-muted-foreground">
                  <TrendingUp className="size-4" />
                  Awaiting RSVP
                </div>
                <p className="mt-2 text-2xl font-semibold">
                  {formatNumber(metrics.pendingInvitations)}
                </p>
              </div>
            </div>
          </CardContent>
        </Card>
      </section>
    </div>
  )
}