"use client";

import Link from "next/link";

import { ArrowRight, Calendar, Clock, Users } from "lucide-react";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { DEFAULT_VENUE_ID } from "@/data/platform-mock";
import { getAuthUser } from "@/lib/auth";
import { isActiveReservationStatus } from "@/lib/reservation-status";
import { usePlatformStats } from "@/stores/platform/platform-store";
import { useVenueReservations } from "@/stores/platform/use-platform-selectors";

export default function ManagerDashboardPage() {
  const user = getAuthUser();
  const venueId = user?.venueId ?? DEFAULT_VENUE_ID;
  const stats = usePlatformStats(venueId);
  const reservations = useVenueReservations(venueId);
  const today = reservations.filter((r) => r.date === "2026-05-19" && isActiveReservationStatus(r.status));

  const kpis = [
    { label: "Today's reservations", value: today.length, icon: Calendar },
    { label: "Upcoming", value: stats.upcomingArrivals, icon: Clock },
    { label: "Waiting list", value: stats.waitingCount, icon: Users },
    { label: "Guest count (seated)", value: stats.guestCount, icon: Users },
  ];

  return (
    <div className="p-6 space-y-6">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <div>
          <h1 className="text-2xl font-bold">Reservation dashboard</h1>
          <p className="text-sm text-muted-foreground">{user?.venueName} — back-office overview</p>
        </div>
        <Button asChild>
          <Link href="/manager/reservations/new">New reservation</Link>
        </Button>
      </div>

      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        {kpis.map(({ label, value, icon: Icon }) => (
          <Card key={label}>
            <CardHeader className="flex flex-row items-center justify-between pb-2">
              <CardTitle className="text-sm font-medium text-muted-foreground">{label}</CardTitle>
              <Icon className="size-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <p className="text-3xl font-bold">{value}</p>
            </CardContent>
          </Card>
        ))}
      </div>

      <Card>
        <CardHeader>
          <CardTitle className="text-base">Quick links</CardTitle>
        </CardHeader>
        <CardContent className="grid gap-2 sm:grid-cols-2">
          {[
            { href: "/manager/reservations", label: "All reservations" },
            { href: "/manager/waiting", label: "Waiting list" },
            { href: "/manager/guests", label: "Guest profiles" },
          ].map((link) => (
            <Link
              key={link.href}
              href={link.href}
              className="flex items-center justify-between rounded-lg border px-4 py-3 hover:bg-muted/50"
            >
              {link.label}
              <ArrowRight className="size-4 text-muted-foreground" />
            </Link>
          ))}
        </CardContent>
      </Card>
    </div>
  );
}