"use client"

import { useMemo } from "react"
import { useSearchParams } from "next/navigation"
import { Loader2 } from "lucide-react"
import { useDashboardData } from "./use-dashboard-data"
import { FinancialTotalsCards } from "./financial-totals-cards"
import { IncomeExpenseChart } from "./income-expense-chart"
import { FinancialSummaryChart } from "./financial-summary-chart"
import { WorkOrdersStatusCard } from "./work-orders-status-card"
import { AppointmentsSummaryCard } from "./appointments-summary-card"
import { UpcomingAppointmentsCard } from "./upcoming-appointments-card"
import { ItemsTotalsCard } from "./items-totals-card"
import { CustomersTotalsCard } from "./customers-totals-card"
import { SalesPurchaseCards } from "./sales-purchase-cards"
import { VehicleStatsCards } from "./vehicle-stats-cards"
import { QuickShortcuts } from "./quick-shortcuts"
import { DashboardPeriods, type DashboardPeriod, type HomeDashboardQuery } from "@garage/api"

const DEFAULT_PERIOD: DashboardPeriod = "this_month"

function isDashboardPeriod(value: string | null): value is DashboardPeriod {
    return Boolean(value && (DashboardPeriods as readonly string[]).includes(value))
}

export function DashboardContent() {
    const searchParams = useSearchParams()
    const filters = useMemo<HomeDashboardQuery>(() => {
        const periodValue = searchParams.get("period")
        const period = isDashboardPeriod(periodValue) ? periodValue : DEFAULT_PERIOD

        const nextFilters: HomeDashboardQuery = { period }

        if (period === "custom") {
            const startDate = searchParams.get("start_date")
            const endDate = searchParams.get("end_date")

            if (startDate) {
                nextFilters.start_date = startDate
            }
            if (endDate) {
                nextFilters.end_date = endDate
            }
        }

        return nextFilters
    }, [searchParams])

    const { data, isLoading, isError, error } = useDashboardData(filters)

    if (isLoading) {
        return (
            <div className="flex items-center justify-center py-24">
                <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
            </div>
        )
    }

    if (isError || !data) {
        return (
            <div className="flex flex-col items-center justify-center py-24 text-muted-foreground">
                <p className="text-lg font-medium">Failed to load dashboard</p>
                <p className="text-sm">{error?.message ?? "An unexpected error occurred"}</p>
            </div>
        )
    }

    return (
        <div className="space-y-6">
            {/* Quick Shortcuts */}
            <QuickShortcuts />

            {/* Financial Overview */}
            <FinancialTotalsCards data={data} />

            {/* Charts Row */}
            <div className="grid gap-4 lg:grid-cols-2">
                <IncomeExpenseChart data={data} />
                <FinancialSummaryChart data={data} />
            </div>

            {/* Work Orders + Appointments */}
            <div className="grid gap-4 lg:grid-cols-2">
                <WorkOrdersStatusCard data={data} />
                <AppointmentsSummaryCard data={data} />
            </div>

            {/* Upcoming Appointments */}
            <UpcomingAppointmentsCard data={data} />

            {/* Sales & Purchase Documents */}
            <SalesPurchaseCards data={data} />

            {/* Quick Stats Row */}
            <div className="grid gap-4 md:grid-cols-2">
                <ItemsTotalsCard data={data} />
                <CustomersTotalsCard data={data} />
            </div>

            {/* Vehicle Statistics */}
            <VehicleStatsCards data={data} />
        </div>
    )
}