"use client"

import dynamic from "next/dynamic"
import {
  CalendarClockIcon,
  CheckCheckIcon,
  ClipboardListIcon,
  DollarSignIcon,
  TriangleAlertIcon,
} from "lucide-react"

import { getBookingDashboardSummary } from "@/lib/api/bookings"
import { useFetch } from "@/lib/use-fetch"
import { Spinner } from "@/components/ui/spinner"
import { StatCard } from "@/components/hexa/stat-card"

// FullCalendar touches the DOM at import time -- must not run during server-side rendering.
const BookingCalendar = dynamic(
  () => import("@/components/hexa/views/booking-calendar").then((m) => m.BookingCalendar),
  {
    ssr: false,
    loading: () => (
      <div className="flex h-[500px] items-center justify-center rounded-lg border">
        <Spinner className="size-6" />
      </div>
    ),
  }
)

function BookingDashboardTab() {
  const summaryFetch = useFetch(() => getBookingDashboardSummary())
  const summary = summaryFetch.data

  return (
    <div className="flex flex-col gap-4">
      <div className="grid grid-cols-2 gap-3 lg:grid-cols-5">
        <StatCard
          icon={ClipboardListIcon}
          tone="blue"
          label="Bookings Today"
          value={summaryFetch.loading ? "…" : (summary?.bookingsToday ?? 0)}
        />
        <StatCard
          icon={DollarSignIcon}
          tone="green"
          label="Revenue Today"
          value={summaryFetch.loading ? "…" : `Rs. ${(summary?.revenueToday ?? 0).toLocaleString()}`}
        />
        <StatCard
          icon={CheckCheckIcon}
          tone="purple"
          label="Checked In Now"
          value={summaryFetch.loading ? "…" : (summary?.checkedInNow ?? 0)}
        />
        <StatCard
          icon={CalendarClockIcon}
          tone="amber"
          label="Upcoming"
          value={summaryFetch.loading ? "…" : (summary?.upcomingConfirmed ?? 0)}
          hint="Confirmed, not yet checked in"
        />
        <StatCard
          icon={TriangleAlertIcon}
          tone="amber"
          label="Outstanding"
          value={summaryFetch.loading ? "…" : `Rs. ${(summary?.outstandingUnpaid ?? 0).toLocaleString()}`}
          hint="Unpaid guest bookings"
        />
      </div>

      <BookingCalendar />
    </div>
  )
}

export { BookingDashboardTab }