"use client";

import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { usePlatformStats, usePlatformStore } from "@/stores/platform/platform-store";
import { Building2, Calendar, Clock, Users, UserCheck } from "lucide-react";

const CHART_DATA = [
  { day: "Mon", reservations: 42 },
  { day: "Tue", reservations: 38 },
  { day: "Wed", reservations: 55 },
  { day: "Thu", reservations: 61 },
  { day: "Fri", reservations: 78 },
  { day: "Sat", reservations: 92 },
  { day: "Sun", reservations: 68 },
];

export default function AdminDashboardPage() {
  const stats = usePlatformStats();
  const reservations = usePlatformStore((s) => s.reservations);

  const kpis = [
    { label: "Total Venues", value: stats.totalVenues, icon: Building2 },
    { label: "Total Reservations", value: stats.totalReservations, icon: Calendar },
    {
      label: "Active Users",
      value: stats.activeManagers + stats.activeOpsStaff,
      icon: Users,
    },
    { label: "Today's Guests", value: stats.todaysGuests, icon: UserCheck },
    { label: "Pending Reservations", value: stats.pendingReservations, icon: Clock },
  ];

  const occupancy = stats.totalTables
    ? Math.round((stats.occupied / stats.totalTables) * 100)
    : 0;

  return (
    <div className="p-6 space-y-6">
      <div>
        <h1 className="text-2xl font-bold">Platform dashboard</h1>
        <p className="text-sm text-muted-foreground">Operational summary across all venues</p>
      </div>

      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
        {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>

      <div className="grid gap-4 lg:grid-cols-2">
        <Card>
          <CardHeader>
            <CardTitle className="text-base">Reservation trend</CardTitle>
          </CardHeader>
          <CardContent className="h-[240px]">
            <ResponsiveContainer width="100%" height="100%">
              <BarChart data={CHART_DATA}>
                <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
                <XAxis dataKey="day" fontSize={12} />
                <YAxis fontSize={12} />
                <Tooltip />
                <Bar dataKey="reservations" fill="hsl(var(--primary))" radius={[4, 4, 0, 0]} />
              </BarChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>
        <Card>
          <CardHeader>
            <CardTitle className="text-base">Daily occupancy summary</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex items-end justify-between">
              <span className="text-4xl font-bold">{occupancy}%</span>
              <span className="text-sm text-muted-foreground">Bistro Laurent (primary)</span>
            </div>
            <div className="h-3 overflow-hidden rounded-full bg-muted">
              <div className="h-full rounded-full bg-primary transition-all" style={{ width: `${occupancy}%` }} />
            </div>
            <p className="text-sm text-muted-foreground">
              {stats.occupied} occupied · {stats.available} available · {reservations.length} total bookings in system
            </p>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}