import { router } from "@inertiajs/react";
import { Button } from "@/components/ui/button";
import { CircleDollarSign, MapPin, Package, Users } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import {
    Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
} from "@/components/ui/table";
import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from "@/components/ui/card";
import type { Metrics, OrderRow, Reminder } from "@/types/dashboard";
import {
    money,
    number,
    periodOptionsWith,
    statusLabel,
    statusTone,
} from "@/lib/dashboard";

export default function DashboardLower({
    period,
    recentOrders,
    metrics,
    reminders,
}: {
    period: string;
    recentOrders: OrderRow[];
    metrics: Metrics;
    reminders: Reminder[];
}) {
    const activePeriodLabel =
        periodOptionsWith(period).find((item) => item.value === period)
            ?.label || period;
    return (
        <div className="grid gap-5 xl:grid-cols-12 items-start">
            <Card className="overflow-hidden rounded-2xl border-slate-200/80 bg-white shadow-xs dark:border-slate-800 dark:bg-slate-900 xl:col-span-8">
                <CardHeader className="flex flex-row items-center justify-between border-b border-slate-100 bg-slate-50/50 py-0! dark:border-slate-800/80 dark:bg-slate-800/30">
                    <div>
                        <CardTitle className="text-base font-bold text-slate-900 dark:text-slate-100">
                            Order Terbaru
                        </CardTitle>
                        <CardDescription className="text-xs">
                            Daftar transaksi pada {activePeriodLabel}
                        </CardDescription>
                    </div>
                    <Button
                        size="sm"
                        variant="outline"
                        className="rounded-xl border-slate-200 bg-white text-xs font-semibold shadow-2xs hover:bg-slate-50 dark:border-slate-800 dark:bg-slate-900"
                        onClick={() => router.visit("/crm/orders")}
                    >
                        Semua Order
                    </Button>
                </CardHeader>
                <CardContent className="px-0">
                    <div className="overflow-x-auto">
                        <Table className="w-full text-left text-xs">
                            <TableHeader className="border-b border-slate-100 bg-slate-50/80 text-slate-500 uppercase tracking-wider dark:border-slate-800 dark:bg-slate-800/50 dark:text-slate-400">
                                <TableRow>
                                    <TableHead className="px-5 py-3 font-bold">
                                        No. Order
                                    </TableHead>
                                    <TableHead className="px-5 py-3 font-bold">
                                        Customer
                                    </TableHead>
                                    <TableHead className="px-5 py-3 font-bold">
                                        Sales
                                    </TableHead>
                                    <TableHead className="px-5 py-3 font-bold">
                                        Tanggal
                                    </TableHead>
                                    <TableHead className="px-5 py-3 font-bold text-right">
                                        Total
                                    </TableHead>
                                    <TableHead className="px-5 py-3 font-bold text-center">
                                        Status
                                    </TableHead>
                                </TableRow>
                            </TableHeader>
                            <TableBody className="divide-y divide-slate-100 dark:divide-slate-800">
                                {recentOrders.length ? (
                                    recentOrders.map((row) => (
                                        <TableRow
                                            key={row.id}
                                            className="transition-colors hover:bg-slate-50/80 dark:hover:bg-slate-800/40"
                                        >
                                            <TableCell className="px-5 py-3.5 font-mono font-black text-slate-900 dark:text-slate-100">
                                                {row.number}
                                            </TableCell>
                                            <TableCell className="px-5 py-3.5 font-semibold text-slate-800 dark:text-slate-200">
                                                {row.customer}
                                            </TableCell>
                                            <TableCell className="px-5 py-3.5 text-slate-500 dark:text-slate-400">
                                                {row.sales}
                                            </TableCell>
                                            <TableCell className="px-5 py-3.5 text-slate-400">
                                                {row.date || "-"}
                                            </TableCell>
                                            <TableCell className="px-5 py-3.5 text-right font-black text-slate-900 dark:text-slate-100">
                                                {money(row.amount)}
                                            </TableCell>
                                            <TableCell className="px-5 py-3.5 text-center">
                                                <Badge
                                                    variant="outline"
                                                    className={`rounded-lg px-2.5 py-0.5 text-[10px] font-bold ${statusTone[row.status] || "bg-slate-100 text-slate-600"}`}
                                                >
                                                    {statusLabel[row.status] ||
                                                        row.status}
                                                </Badge>
                                            </TableCell>
                                        </TableRow>
                                    ))
                                ) : (
                                    <TableRow>
                                        <TableCell
                                            colSpan={6}
                                            className="py-10 text-center text-slate-400"
                                        >
                                            Belum ada order.
                                        </TableCell>
                                    </TableRow>
                                )}
                            </TableBody>
                        </Table>
                    </div>
                </CardContent>
            </Card>

            {/* Ringkasan Operasional */}
            <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="border-b border-slate-100 bg-slate-50/50 py-0! dark:border-slate-800/80 dark:bg-slate-800/30">
                    <CardTitle className="text-base font-bold text-slate-900 dark:text-slate-100">
                        Ringkasan Operasional
                    </CardTitle>
                </CardHeader>
                <CardContent className="space-y-3">
                    <div className="flex items-center justify-between rounded-xl bg-slate-50/80 p-3.5 border border-slate-100 transition-all hover:bg-slate-100/50 dark:bg-slate-800/40 dark:border-slate-800">
                        <span className="flex items-center gap-2.5 text-xs font-semibold text-slate-700 dark:text-slate-300">
                            <div className="flex size-7 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600 dark:bg-indigo-950/50 dark:text-indigo-400">
                                <MapPin className="size-4" />
                            </div>
                            Kunjungan Hari Ini
                        </span>
                        <span className="font-black text-slate-900 dark:text-slate-100">
                            {number(metrics.visits_today)}
                        </span>
                    </div>

                    <div className="flex items-center justify-between rounded-xl bg-slate-50/80 p-3.5 border border-slate-100 transition-all hover:bg-slate-100/50 dark:bg-slate-800/40 dark:border-slate-800">
                        <span className="flex items-center gap-2.5 text-xs font-semibold text-slate-700 dark:text-slate-300">
                            <div className="flex size-7 items-center justify-center rounded-lg bg-emerald-50 text-emerald-600 dark:bg-emerald-950/50 dark:text-emerald-400">
                                <CircleDollarSign className="size-4" />
                            </div>
                            Penagihan Hari Ini
                        </span>
                        <span className="font-black text-slate-900 dark:text-slate-100">
                            {number(metrics.collections_today)}
                        </span>
                    </div>

                    <div className="flex items-center justify-between rounded-xl bg-slate-50/80 p-3.5 border border-slate-100 transition-all hover:bg-slate-100/50 dark:bg-slate-800/40 dark:border-slate-800">
                        <span className="flex items-center gap-2.5 text-xs font-semibold text-slate-700 dark:text-slate-300">
                            <div className="flex size-7 items-center justify-center rounded-lg bg-amber-50 text-amber-600 dark:bg-amber-950/50 dark:text-amber-400">
                                <Package className="size-4" />
                            </div>
                            Produk Aktif
                        </span>
                        <span className="font-black text-slate-900 dark:text-slate-100">
                            {number(metrics.products)}
                        </span>
                    </div>

                    <div className="flex items-center justify-between rounded-xl bg-slate-50/80 p-3.5 border border-slate-100 transition-all hover:bg-slate-100/50 dark:bg-slate-800/40 dark:border-slate-800">
                        <span className="flex items-center gap-2.5 text-xs font-semibold text-slate-700 dark:text-slate-300">
                            <div className="flex size-7 items-center justify-center rounded-lg bg-blue-50 text-blue-600 dark:bg-blue-950/50 dark:text-blue-400">
                                <Users className="size-4" />
                            </div>
                            Pelanggan Aktif
                        </span>
                        <span className="font-black text-slate-900 dark:text-slate-100">
                            {number(metrics.customers)}
                        </span>
                    </div>

                    {reminders?.length ? (
                        <div className="border-t border-slate-100 pt-3.5 dark:border-slate-800">
                            <div className="mb-2 flex items-center justify-between">
                                <span className="text-[11px] font-bold uppercase tracking-wider text-slate-400">
                                    Pengingat Operasional
                                </span>
                                <span className="text-[10px] text-slate-400">
                                    14 hari ke depan
                                </span>
                            </div>
                            <div className="space-y-2">
                                {reminders.slice(0, 3).map((reminder) => (
                                    <div
                                        key={reminder.id}
                                        className="rounded-xl border border-slate-200/70 bg-slate-50/50 p-3 dark:border-slate-800 dark:bg-slate-800/30"
                                    >
                                        <p className="text-xs font-bold text-slate-800 dark:text-slate-200">
                                            {reminder.title}
                                        </p>
                                        <p className="mt-0.5 text-[10px] font-medium text-slate-400">
                                            {reminder.meta}
                                        </p>
                                    </div>
                                ))}
                            </div>
                        </div>
                    ) : null}
                </CardContent>
            </Card>
        </div>
    );
}