import { Link } from "@inertiajs/react";
import { Award, ChevronRight } from "lucide-react";
import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from "@/components/ui/card";
import type { CategoryPoint, SalesPoint, TrendPoint } from "@/types/dashboard";
import { periodOptionsWith } from "@/lib/dashboard";
import type { Metrics } from "@/types/dashboard";
import { MiniTrend, DonutChart, Leaderboard } from "./dashboard-charts";

export default function DashboardAnalytics({
    period,
    metrics,
    monthlyTrend,
    categorySales,
    topSales,
}: {
    period: string;
    metrics: Metrics;
    monthlyTrend: TrendPoint[];
    categorySales: CategoryPoint[];
    topSales: SalesPoint[];
}) {
    const categoryTotal = categorySales.reduce(
        (sum, item) => sum + Number(item.value || 0),
        0,
    );
    const activePeriodLabel =
        periodOptionsWith(period).find((item) => item.value === period)
            ?.label || period;
    return (
        <div className="grid gap-5 xl:grid-cols-12">
            <Card className="rounded-2xl border-slate-200/80 bg-white shadow-xs dark:border-slate-800 dark:bg-slate-900 xl:col-span-5">
                <CardHeader className="flex flex-row items-center justify-between pb-2">
                    <div>
                        <CardTitle className="text-base font-bold text-slate-900 dark:text-slate-100">
                            Tren Penjualan
                        </CardTitle>
                        <CardDescription className="text-xs">
                            Tren total nilai order · {activePeriodLabel}
                        </CardDescription>
                    </div>
                    <Link
                        href="/crm/reports"
                        className="inline-flex items-center gap-0.5 text-xs font-bold text-indigo-600 hover:text-indigo-700 dark:text-indigo-400"
                    >
                        Detail <ChevronRight className="size-3.5" />
                    </Link>
                </CardHeader>
                <CardContent>
                    {monthlyTrend.length ? (
                        <MiniTrend data={monthlyTrend} />
                    ) : (
                        <div className="flex h-56 items-center justify-center text-xs text-slate-400">
                            Belum ada data.
                        </div>
                    )}
                </CardContent>
            </Card>

            <Card className="rounded-2xl border-slate-200/80 bg-white shadow-xs dark:border-slate-800 dark:bg-slate-900 xl:col-span-4">
                <CardHeader className="pb-2">
                    <CardTitle className="text-base font-bold text-slate-900 dark:text-slate-100">
                        Kategori Produk
                    </CardTitle>
                    <CardDescription className="text-xs">
                        Distribusi kontribusi penjualan · {activePeriodLabel}
                    </CardDescription>
                </CardHeader>
                <CardContent>
                    {categorySales.length ? (
                        <DonutChart
                            data={categorySales}
                            total={metrics.sales}
                        />
                    ) : (
                        <div className="flex h-56 items-center justify-center text-xs text-slate-400">
                            Belum ada data.
                        </div>
                    )}
                </CardContent>
            </Card>

            {/* Top Sales Leaderboard */}
            <Card className="rounded-2xl border-slate-200/80 bg-white shadow-xs dark:border-slate-800 dark:bg-slate-900 xl:col-span-3">
                <CardHeader className="flex flex-row items-center justify-between py-0!">
                    <CardTitle className="flex items-center gap-2 text-base font-bold text-slate-900 dark:text-slate-100">
                        <Award className="size-4 text-amber-500" /> Top Sales
                    </CardTitle>
                    <Link
                        href="/crm/sales/performance"
                        className="inline-flex items-center gap-0.5 text-xs font-bold text-indigo-600 hover:text-indigo-700 dark:text-indigo-400"
                    >
                        Performa <ChevronRight className="size-3.5" />
                    </Link>
                </CardHeader>
                <CardContent className="pr-2 scrollbar-thin scrollbar-thumb-slate-200 dark:scrollbar-thumb-slate-800">
                    {topSales.length ? (
                        <Leaderboard data={topSales} />
                    ) : (
                        <div className="flex h-56 items-center justify-center text-xs text-slate-400">
                            Belum ada data sales.
                        </div>
                    )}
                </CardContent>
            </Card>
        </div>
    );
}