"use client";

import Link from "next/link";

import { ArrowRight, Clock, LayoutGrid, Users, Utensils, UserCheck } from "lucide-react";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { useOperationsStats } from "@/stores/operations/operations-store";

import { OperationsHeader } from "./_components/operations-header";

const KPI_CONFIG = [
  { key: "occupied", label: "Occupied Tables", icon: Utensils, color: "text-red-600 bg-red-500/10" },
  { key: "available", label: "Available Tables", icon: LayoutGrid, color: "text-emerald-600 bg-emerald-500/10" },
  { key: "upcomingArrivals", label: "Upcoming Arrivals", icon: UserCheck, color: "text-amber-600 bg-amber-500/10" },
  { key: "waitingCount", label: "Waiting Guests", icon: Clock, color: "text-blue-600 bg-blue-500/10" },
  { key: "guestCount", label: "Current Guest Count", icon: Users, color: "text-violet-600 bg-violet-500/10" },
] as const;

export default function OperationsDashboardPage() {
  const stats = useOperationsStats();

  const values: Record<(typeof KPI_CONFIG)[number]["key"], number> = {
    occupied: stats.occupied,
    available: stats.available,
    upcomingArrivals: stats.upcomingArrivals,
    waitingCount: stats.waitingCount,
    guestCount: stats.guestCount,
  };

  return (
    <>
      <OperationsHeader
        title="Operations dashboard"
        subtitle={`${stats.occupied} of ${stats.totalTables} tables in use · live venue overview`}
        showFloorLink
      />
      <div className="flex-1 overflow-auto p-4 md:p-6">
        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5">
          {KPI_CONFIG.map(({ key, label, icon: Icon, color }) => (
            <Card key={key} className="border-0 shadow-sm">
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium text-muted-foreground">{label}</CardTitle>
                <div className={`flex size-9 items-center justify-center rounded-lg ${color}`}>
                  <Icon className="size-4" />
                </div>
              </CardHeader>
              <CardContent>
                <p className="text-3xl font-bold tabular-nums">{values[key]}</p>
              </CardContent>
            </Card>
          ))}
        </div>

        <div className="mt-6 grid gap-4 md:grid-cols-2">
          <Card className="border-0 shadow-sm">
            <CardHeader>
              <CardTitle className="text-base">Live operational overview</CardTitle>
            </CardHeader>
            <CardContent className="space-y-3 text-sm">
              <div className="flex justify-between rounded-lg bg-muted/50 px-3 py-2">
                <span className="text-muted-foreground">Floor utilization</span>
                <span className="font-semibold">
                  {Math.round((stats.occupied / stats.totalTables) * 100)}%
                </span>
              </div>
              <div className="flex justify-between rounded-lg bg-muted/50 px-3 py-2">
                <span className="text-muted-foreground">Tables ready now</span>
                <span className="font-semibold text-emerald-600">{stats.available} available</span>
              </div>
              <div className="flex justify-between rounded-lg bg-muted/50 px-3 py-2">
                <span className="text-muted-foreground">Queue pressure</span>
                <span className="font-semibold">{stats.waitingCount} waiting</span>
              </div>
            </CardContent>
          </Card>

          <Card className="border-0 shadow-sm">
            <CardHeader>
              <CardTitle className="text-base">Quick access</CardTitle>
            </CardHeader>
            <CardContent className="grid gap-2">
              {[
                { href: "/operations/floor", label: "Live floor view", desc: "Table board & status actions" },
                { href: "/operations/arrivals", label: "Arrivals", desc: "Confirm arrivals & no-shows" },
                { href: "/operations/waiting", label: "Waiting list", desc: "Assign tables to walk-ins" },
              ].map((link) => (
                <Link
                  key={link.href}
                  href={link.href}
                  className="flex min-h-[52px] items-center justify-between rounded-lg border bg-card px-4 py-3 transition-colors hover:border-primary/30 hover:bg-muted/40"
                >
                  <div>
                    <p className="font-medium">{link.label}</p>
                    <p className="text-xs text-muted-foreground">{link.desc}</p>
                  </div>
                  <ArrowRight className="size-4 text-muted-foreground" />
                </Link>
              ))}
            </CardContent>
          </Card>
        </div>
      </div>
    </>
  );
}