import React from "react";
import { router, usePage } from "@inertiajs/react";
import {
    ArrowUpRight,
    ArrowDownRight,
    CalendarDays,
    CheckCircle2,
    CircleDollarSign,
    ShoppingCart,
    Target as TargetIcon,
    Users,
    MapPinned,
    Activity,
    AlertCircle,
} from "lucide-react";
import { Card, Badge, Button, Select } from "../components/ui";
import Map from "../components/Map";
import {
    LineChart,
    Line,
    XAxis,
    YAxis,
    CartesianGrid,
    Tooltip,
    ResponsiveContainer,
    BarChart,
    Bar,
    PieChart,
    Pie,
    Cell,
} from "recharts";

type Stats = {
    customers: number;
    customersDelta: number;
    visits: number;
    visitsDelta: number;
    orders: number;
    ordersDelta: number;
    totalSales: number;
    salesDelta: number;
    targetAmount: number;
    targetAchieved: number;
    targetPercentage: number;
    period: string;
};

type VisitPerformancePoint = { date: string; visits: number; target: number };
type OrderSummaryPoint = { date: string; orders: number };
type StatusSlice = { status: string; total: number; color: string };
type TopSalesRow = { name: string; visits: number; delta: number };
type ActivityRow = { time: string; message: string; status: string };
type NotificationRow = { message: string; time: string };
type MapPoint = { lat: number; lng: number; label: string; status: string };
type TeamOption = { id: number; name: string };
type Filters = { date: string; team_id: number | null };

function rupiah(n: number) {
    return "Rp " + Math.round(n || 0).toLocaleString("id-ID");
}

function Delta({ value }: { value: number }) {
    const positive = value >= 0;
    const Icon = positive ? ArrowUpRight : ArrowDownRight;
    return (
        <div
            className={`mt-1 flex items-center gap-1 text-[11px] ${
                positive ? "text-emerald-600" : "text-rose-600"
            }`}
        >
            <Icon size={12} />
            {Math.abs(value).toFixed(1)}%{" "}
            <span className="text-slate-400">vs kemarin</span>
        </div>
    );
}

function Kpi({
    icon: Icon,
    label,
    value,
    delta,
    tone,
    footnote,
}: {
    icon: any;
    label: string;
    value: string;
    delta?: number;
    tone: string;
    footnote?: string;
}) {
    return (
        <Card className="p-4">
            <div className="flex items-center gap-4">
                <div className={cnIcon(tone)}>
                    <Icon size={21} />
                </div>
                <div className="min-w-0">
                    <div className="text-xs font-medium text-slate-500">
                        {label}
                    </div>
                    <div className="mt-1 text-xl font-extrabold tracking-tight">
                        {value}
                    </div>
                    {typeof delta === "number" ? (
                        <Delta value={delta} />
                    ) : footnote ? (
                        <div className="mt-1 text-[11px] text-slate-400">
                            {footnote}
                        </div>
                    ) : null}
                </div>
            </div>
        </Card>
    );
}
function cnIcon(t: string) {
    return `grid h-11 w-11 shrink-0 place-items-center rounded-2xl ${t}`;
}

function Empty({ label }: { label: string }) {
    return (
        <div className="flex h-full items-center justify-center text-xs text-slate-400">
            {label}
        </div>
    );
}

export default function Dashboard({
    stats,
    visitPerformance,
    orderSummary,
    visitStatusToday,
    topSales,
    recentActivity,
    alerts,
    mapPoints,
    mapCenter = [-0.95691, 122.7849],
    mapZoom = 12,
    teams = [],
    filters,
}: {
    stats: Stats;
    visitPerformance: VisitPerformancePoint[];
    orderSummary: OrderSummaryPoint[];
    visitStatusToday: StatusSlice[];
    topSales: TopSalesRow[];
    recentActivity: ActivityRow[];
    alerts: NotificationRow[];
    mapPoints: MapPoint[];
    mapCenter?: [number, number];
    mapZoom?: number;
    teams?: TeamOption[];
    filters?: Filters;
}) {
    const statusToneMap: Record<string, string> = {
        Visited: "green",
        Order: "orange",
        "Failed Visit": "red",
        "Not Order": "blue",
    };

    // auth.user sudah di-share otomatis ke semua halaman Inertia lewat
    // HandleInertiaRequests, jadi tidak perlu dikirim manual dari controller.
    const { auth } = usePage<{ auth: { user?: { name?: string } } }>().props;
    const userName = auth?.user?.name || "Admin";

    const today = new Date().toISOString().slice(0, 10);
    const [dateFilter, setDateFilter] = React.useState(filters?.date || today);
    const [teamFilter, setTeamFilter] = React.useState(
        filters?.team_id ? String(filters.team_id) : "",
    );
    const dateInputRef = React.useRef<HTMLInputElement>(null);

    const applyFilter = (overrides?: { date?: string; team_id?: string }) => {
        const nextDate = overrides?.date ?? dateFilter;
        const nextTeam = overrides?.team_id ?? teamFilter;
        router.get(
            "/",
            {
                date: nextDate || undefined,
                team_id: nextTeam || undefined,
            },
            { preserveState: true, preserveScroll: true, replace: true },
        );
    };

    const dateLabel = new Date(`${dateFilter}T00:00:00`).toLocaleDateString(
        "id-ID",
        { day: "2-digit", month: "short", year: "numeric" },
    );
    return (
        <div className="p-7">
            <div className="mb-6 flex flex-wrap items-end justify-between gap-4">
                <div>
                    <h1 className="text-2xl font-extrabold tracking-tight">
                        Assalamu'alaikum, {userName} 👋
                    </h1>
                    <p className="mt-1 text-sm text-slate-500">
                        Berikut ringkasan aktivitas tim hari ini.
                    </p>
                </div>
                <div className="flex flex-wrap gap-2">
                    <div className="relative">
                        <Button
                            variant="outline"
                            type="button"
                            onClick={() =>
                                dateInputRef.current?.showPicker
                                    ? dateInputRef.current.showPicker()
                                    : dateInputRef.current?.click()
                            }
                        >
                            <CalendarDays size={16} className="mr-2 inline" />
                            {dateLabel}
                        </Button>
                        <input
                            ref={dateInputRef}
                            type="date"
                            value={dateFilter}
                            onChange={(e) => {
                                setDateFilter(e.target.value);
                                applyFilter({ date: e.target.value });
                            }}
                            className="absolute inset-0 h-full w-full cursor-pointer opacity-0"
                        />
                    </div>
                    <Select
                        value={teamFilter}
                        onChange={(e) => {
                            setTeamFilter(e.target.value);
                            applyFilter({ team_id: e.target.value });
                        }}
                        className="h-10! w-auto max-w-40"
                        aria-label="Filter Team"
                    >
                        <option value="">Semua Team</option>
                        {teams.map((t) => (
                            <option key={t.id} value={t.id}>
                                {t.name}
                            </option>
                        ))}
                    </Select>
                    <Button type="button" onClick={() => applyFilter()}>
                        Filter
                    </Button>
                </div>
            </div>
            <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-5">
                <Kpi
                    icon={CheckCircle2}
                    label="Total Visit"
                    value={String(stats?.visits ?? 0)}
                    delta={stats?.visitsDelta}
                    tone="bg-emerald-50 text-emerald-600"
                />
                <Kpi
                    icon={ShoppingCart}
                    label="Total Order"
                    value={String(stats?.orders ?? 0)}
                    delta={stats?.ordersDelta}
                    tone="bg-blue-50 text-blue-600"
                />
                <Kpi
                    icon={Users}
                    label="Total Customer"
                    value={Number(stats?.customers ?? 0).toLocaleString(
                        "id-ID",
                    )}
                    delta={stats?.customersDelta}
                    tone="bg-violet-50 text-violet-600"
                />
                <Kpi
                    icon={TargetIcon}
                    label="Pencapaian Target"
                    value={`${stats?.targetPercentage ?? 0}%`}
                    footnote={`Periode ${stats?.period ?? "-"}`}
                    tone="bg-orange-50 text-orange-600"
                />
                <Kpi
                    icon={CircleDollarSign}
                    label="Total Omset (Bulan Ini)"
                    value={rupiah(stats?.totalSales ?? 0)}
                    delta={stats?.salesDelta}
                    tone="bg-rose-50 text-rose-600"
                />
            </div>
            <div className="mt-5 grid gap-5 xl:grid-cols-[1fr_1fr_1.15fr]">
                <Card className="p-5">
                    <h2 className="font-bold">
                        Visit Performance{" "}
                        <span className="font-normal text-slate-400">
                            (7 Hari Terakhir)
                        </span>
                    </h2>
                    <div className="mt-5 h-65">
                        {visitPerformance?.length ? (
                            <ResponsiveContainer>
                                <LineChart data={visitPerformance}>
                                    <CartesianGrid
                                        strokeDasharray="3 3"
                                        vertical={false}
                                    />
                                    <XAxis dataKey="date" fontSize={11} />
                                    <YAxis fontSize={11} />
                                    <Tooltip />
                                    <Line
                                        type="monotone"
                                        dataKey="visits"
                                        name="Visit"
                                        stroke="#20b89a"
                                        strokeWidth={3}
                                        dot={{ r: 3 }}
                                    />
                                    <Line
                                        type="monotone"
                                        dataKey="target"
                                        name="Target/Hari"
                                        stroke="#aab4c2"
                                        strokeDasharray="5 5"
                                    />
                                </LineChart>
                            </ResponsiveContainer>
                        ) : (
                            <Empty label="Belum ada data visit" />
                        )}
                    </div>
                </Card>
                <Card className="p-5">
                    <h2 className="font-bold">
                        Order Summary{" "}
                        <span className="font-normal text-slate-400">
                            (7 Hari Terakhir)
                        </span>
                    </h2>
                    <div className="mt-5 h-65">
                        {orderSummary?.length ? (
                            <ResponsiveContainer>
                                <BarChart data={orderSummary}>
                                    <CartesianGrid
                                        strokeDasharray="3 3"
                                        vertical={false}
                                    />
                                    <XAxis dataKey="date" fontSize={11} />
                                    <YAxis fontSize={11} />
                                    <Tooltip />
                                    <Bar
                                        dataKey="orders"
                                        name="Order"
                                        fill="#3b82f6"
                                        radius={[6, 6, 0, 0]}
                                    />
                                </BarChart>
                            </ResponsiveContainer>
                        ) : (
                            <Empty label="Belum ada data order" />
                        )}
                    </div>
                </Card>
                <Card className="overflow-hidden">
                    <div className="flex items-center justify-between p-5">
                        <h2 className="font-bold">
                            Visit on Map{" "}
                            <span className="font-normal text-slate-400">
                                (Hari Ini)
                            </span>
                        </h2>
                        <MapPinned size={18} className="text-brand-600" />
                    </div>
                    <div className="h-81.25">
                        <Map
                            points={mapPoints || []}
                            center={mapCenter}
                            zoom={mapZoom}
                        />
                    </div>
                </Card>
            </div>
            <div className="mt-5 grid gap-5 xl:grid-cols-3">
                <Card className="p-5">
                    <h2 className="font-bold">
                        Visit Status{" "}
                        <span className="font-normal text-slate-400">
                            (Hari Ini)
                        </span>
                    </h2>
                    {visitStatusToday?.length ? (
                        <div className="mt-4 flex items-center gap-5">
                            <div className="h-44 w-44">
                                <ResponsiveContainer>
                                    <PieChart>
                                        <Pie
                                            data={visitStatusToday}
                                            dataKey="total"
                                            nameKey="status"
                                            innerRadius={52}
                                            outerRadius={78}
                                            paddingAngle={2}
                                        >
                                            {visitStatusToday.map((s, i) => (
                                                <Cell key={i} fill={s.color} />
                                            ))}
                                        </Pie>
                                        <Tooltip />
                                    </PieChart>
                                </ResponsiveContainer>
                            </div>
                            <div className="flex-1 space-y-2">
                                {visitStatusToday.map((s) => (
                                    <div
                                        className="flex items-center justify-between text-xs"
                                        key={s.status}
                                    >
                                        <span className="flex items-center gap-2">
                                            <i
                                                className="h-2.5 w-2.5 rounded-full"
                                                style={{
                                                    background: s.color,
                                                }}
                                            />
                                            {s.status}
                                        </span>
                                        <b>{s.total}</b>
                                    </div>
                                ))}
                            </div>
                        </div>
                    ) : (
                        <div className="mt-4 h-44">
                            <Empty label="Belum ada visit hari ini" />
                        </div>
                    )}
                </Card>
                <Card className="p-5">
                    <h2 className="font-bold">
                        Top Sales{" "}
                        <span className="font-normal text-slate-400">
                            (Bulan Ini, Berdasarkan Visit)
                        </span>
                    </h2>
                    {topSales?.length ? (
                        <div className="mt-4 divide-y divide-slate-100">
                            {topSales.map((s, i) => (
                                <div
                                    className="flex items-center gap-3 py-3"
                                    key={s.name + i}
                                >
                                    <div className="grid h-7 w-7 place-items-center rounded-full bg-slate-100 text-xs font-bold">
                                        {i + 1}
                                    </div>
                                    <div className="flex-1 text-sm font-semibold">
                                        {s.name}
                                    </div>
                                    <div className="text-xs text-slate-500">
                                        {s.visits} Visit
                                    </div>
                                    <span
                                        className={`text-xs font-semibold ${
                                            s.delta >= 0
                                                ? "text-emerald-600"
                                                : "text-rose-600"
                                        }`}
                                    >
                                        {s.delta >= 0 ? "↑" : "↓"}{" "}
                                        {Math.abs(s.delta)}
                                    </span>
                                </div>
                            ))}
                        </div>
                    ) : (
                        <div className="mt-4 h-32">
                            <Empty label="Belum ada data visit bulan ini" />
                        </div>
                    )}
                </Card>
                <Card className="p-5">
                    <h2 className="font-bold">
                        Pencapaian Target{" "}
                        <span className="font-normal text-slate-400">
                            (Bulan Ini)
                        </span>
                    </h2>
                    <div className="mt-3 flex flex-col items-center">
                        <div className="relative h-40 w-72 overflow-hidden">
                            <div className="absolute left-1/2 top-6 h-64 w-64 -translate-x-1/2 rounded-full border-20 border-slate-200" />
                            <div
                                className="absolute left-1/2 top-6 h-64 w-64 -translate-x-1/2 rounded-full border-20 border-brand-500 border-b-transparent border-l-transparent"
                                style={{
                                    opacity: Math.min(
                                        1,
                                        (stats?.targetPercentage ?? 0) / 100,
                                    ),
                                }}
                            />
                            <div className="absolute inset-x-0 top-20 text-center">
                                <div className="text-3xl font-black">
                                    {stats?.targetPercentage ?? 0}%
                                </div>
                                <div className="text-xs text-slate-400">
                                    Dari Total Target
                                </div>
                            </div>
                        </div>
                        <div className="text-sm text-slate-500">
                            Target penjualan{" "}
                            <b className="text-slate-800">
                                {rupiah(stats?.targetAmount ?? 0)}
                            </b>
                        </div>
                        <div className="text-xs text-slate-400">
                            Tercapai {rupiah(stats?.targetAchieved ?? 0)}
                        </div>
                    </div>
                </Card>
            </div>
            <div className="mt-5 grid gap-5 xl:grid-cols-3">
                <Card className="p-5">
                    <h2 className="font-bold">Aktivitas Terbaru</h2>
                    {recentActivity?.length ? (
                        <div className="mt-4 space-y-4">
                            {recentActivity.map((a, i) => (
                                <div className="flex gap-3 text-xs" key={i}>
                                    <span className="w-24 shrink-0 text-slate-400">
                                        {a.time}
                                    </span>
                                    <div className="flex-1">{a.message}</div>
                                    <Badge
                                        tone={statusToneMap[a.status] || "blue"}
                                    >
                                        {a.status}
                                    </Badge>
                                </div>
                            ))}
                        </div>
                    ) : (
                        <div className="mt-4 h-24">
                            <Empty label="Belum ada aktivitas" />
                        </div>
                    )}
                </Card>
                <Card className="p-5">
                    <h2 className="font-bold">Notifikasi Penting</h2>
                    {alerts?.length ? (
                        <div className="mt-4 space-y-3">
                            {alerts.map((n, i) => (
                                <div
                                    className="flex gap-3 rounded-xl bg-slate-50 p-3"
                                    key={i}
                                >
                                    <div className="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-white shadow-sm">
                                        {i === 0 ? (
                                            <TargetIcon size={17} />
                                        ) : i === 1 ? (
                                            <AlertCircle size={17} />
                                        ) : (
                                            <Activity size={17} />
                                        )}
                                    </div>
                                    <div>
                                        <div className="text-xs font-semibold">
                                            {n.message}
                                        </div>
                                        <div className="mt-1 text-[10px] text-slate-400">
                                            {n.time}
                                        </div>
                                    </div>
                                </div>
                            ))}
                        </div>
                    ) : (
                        <div className="mt-4 h-24">
                            <Empty label="Tidak ada notifikasi" />
                        </div>
                    )}
                </Card>
                <Card className="p-5">
                    <h2 className="font-bold">Quick Actions</h2>
                    <div className="mt-4 grid grid-cols-2 gap-3">
                        {[
                            ["Customer", "Tambah customer baru"],
                            ["Visit", "Jadwalkan visit"],
                            ["Order", "Lihat order terbaru"],
                            ["Report", "Buka laporan"],
                        ].map((a) => (
                            <button
                                key={a[0]}
                                className="rounded-xl border border-slate-200 p-4 text-left hover:border-brand-300 hover:bg-brand-50"
                            >
                                <div className="text-sm font-bold">{a[0]}</div>
                                <div className="mt-1 text-[11px] text-slate-400">
                                    {a[1]}
                                </div>
                            </button>
                        ))}
                    </div>
                </Card>
            </div>
        </div>
    );
}