import { Head, usePage } from "@inertiajs/react";
import AppLayout from "@/layouts/app-layout";
import DailyVisitPlanning from "@/components/crm/global-daily-visit";
import DashboardHeader from "@/components/dashboard/dashboard-header";
import DashboardCompany from "@/components/dashboard/dashboard-company";
import DashboardKpis from "@/components/dashboard/dashboard-kpis";
import DashboardAnalytics from "@/components/dashboard/dashboard-analytics";
import DashboardLower from "@/components/dashboard/dashboard-lower";
import type { Props } from "@/types/dashboard";
import { CURRENT_PERIOD } from "@/lib/dashboard";

export default function Dashboard({
    period = CURRENT_PERIOD,
    company,
    metrics,
    recentOrders = [],
    monthlyTrend = [],
    categorySales = [],
    topSales = [],
    reminders = [],
    dailyPlanning = null,
    companyDashboard = null,
}: Props) {
    const page = usePage();
    const auth = page.props.auth as { user?: { name?: string } };
    const user = auth?.user;
    const companyName = company?.nama || "Perusahaan";

    return (
        <AppLayout breadcrumbs={[{ title: "Dashboard", href: "/dashboard" }]}>
            <Head title="Dashboard CRM Perusahaan" />
            <div className="crm-page space-y-6 pb-12">
                <DashboardHeader
                    period={period}
                    userName={user?.name}
                    companyName={companyName}
                />
                {dailyPlanning && (
                    <DailyVisitPlanning planning={dailyPlanning} />
                )}
                {companyDashboard && (
                    <DashboardCompany companyDashboard={companyDashboard} />
                )}
                <DashboardKpis metrics={metrics} />
                <DashboardAnalytics
                    period={period}
                    metrics={metrics}
                    monthlyTrend={monthlyTrend}
                    categorySales={categorySales}
                    topSales={topSales}
                />
                <DashboardLower
                    period={period}
                    recentOrders={recentOrders}
                    metrics={metrics}
                    reminders={reminders}
                />
            </div>
        </AppLayout>
    );
}
