import React, { useMemo, useState } from "react";
import { Head, router } from "@inertiajs/react";
import AppLayout from "@/layouts/app-layout";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Progress } from "@/components/ui/progress";
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from "@/components/ui/select";
import {
    Sheet,
    SheetContent,
    SheetDescription,
    SheetFooter,
    SheetHeader,
    SheetTitle,
} from "@/components/ui/sheet";
import {
    CalendarDays,
    CheckCircle2,
    ChevronLeft,
    ChevronRight,
    CircleDot,
    ClipboardList,
    Clock,
    ExternalLink,
    Filter,
    LucideIcon,
    MapPin,
    PackageCheck,
    Search,
    ShoppingBag,
    SkipForward,
    Sparkles,
    TrendingUp,
    Users,
    X,
} from "lucide-react";

import { StatChip, STAT_TONES } from "@/components/crm/global-card";

const money = (value: number) =>
    new Intl.NumberFormat("id-ID", {
        style: "currency",
        currency: "IDR",
        maximumFractionDigits: 0,
    }).format(Number(value) || 0);

const dateLabel = (value: string) => {
    if (!value) return "";
    const [year, month, day] = value.split("-").map(Number);
    return new Intl.DateTimeFormat("id-ID", {
        weekday: "long",
        day: "numeric",
        month: "long",
        year: "numeric",
    }).format(new Date(year, month - 1, day));
};

const statusMap: Record<
    string,
    { label: string; badgeClass: string; borderClass: string; dotColor: string }
> = {
    completed: {
        label: "Selesai",
        badgeClass:
            "border-emerald-200/60 bg-emerald-50/80 text-emerald-700 dark:border-emerald-800/60 dark:bg-emerald-950/40 dark:text-emerald-400",
        borderClass: "border-l-emerald-500",
        dotColor: "bg-emerald-500",
    },
    ongoing: {
        label: "Berlangsung",
        badgeClass:
            "border-blue-200/60 bg-blue-50/80 text-blue-700 dark:border-blue-800/60 dark:bg-blue-950/40 dark:text-blue-400",
        borderClass: "border-l-blue-500",
        dotColor: "bg-blue-500",
    },
    skipped: {
        label: "Dilewati",
        badgeClass:
            "border-amber-200/60 bg-amber-50/80 text-amber-700 dark:border-amber-800/60 dark:bg-amber-950/40 dark:text-amber-400",
        borderClass: "border-l-amber-500",
        dotColor: "bg-amber-500",
    },
};

interface Props {
    salesColumns?: any[];
    sales?: any[];
    teams?: any[];
    summary?: {
        sales: number;
        visits: number;
        completed: number;
        ongoing: number;
        skipped: number;
        orders: number;
        omset: number;
    };
    filters?: {
        date?: string;
        team_id?: string;
        sales_id?: string | number | null;
        search?: string;
    };
}

export default function PerSales({
    salesColumns = [],
    sales = [],
    teams = [],
    summary,
    filters = {},
}: Props) {
    const [date, setDate] = useState(
        filters.date || new Date().toISOString().slice(0, 10),
    );
    const [search, setSearch] = useState(filters.search || "");
    const [teamId, setTeamId] = useState(String(filters.team_id || "all"));
    const [salesId, setSalesId] = useState(String(filters.sales_id || "all"));
    const [selected, setSelected] = useState<any | null>(null);

    const stats = summary || {
        sales: 0,
        visits: 0,
        completed: 0,
        ongoing: 0,
        skipped: 0,
        orders: 0,
        omset: 0,
    };

    const completionRate = stats.visits
        ? Math.round((stats.completed / stats.visits) * 100)
        : 0;

    const apply = (overrides: Record<string, any> = {}) => {
        router.get(
            window.location.pathname,
            {
                date: overrides.date ?? date,
                search: overrides.search ?? search,
                team_id: overrides.team_id ?? teamId,
                sales_id: overrides.sales_id ?? salesId,
            },
            { preserveState: true, preserveScroll: true, replace: true },
        );
    };

    const shiftDate = (days: number) => {
        const [year, month, day] = date.split("-").map(Number);
        const targetDate = new Date(year, month - 1, day + days);
        const yyyy = targetDate.getFullYear();
        const mm = String(targetDate.getMonth() + 1).padStart(2, "0");
        const dd = String(targetDate.getDate()).padStart(2, "0");
        const nextStr = `${yyyy}-${mm}-${dd}`;
        setDate(nextStr);
        apply({ date: nextStr });
    };

    const visibleColumns = useMemo(
        () =>
            salesColumns.filter(
                (column) =>
                    (column.visits?.length || 0) > 0 || (!search && !salesId),
            ),
        [salesColumns, search, salesId],
    );

    const statCards: Array<{
        title: string;
        value: React.ReactNode;
        icon: LucideIcon;
        tone: keyof typeof STAT_TONES;
    }> = [
        { title: "Sales Aktif", value: stats.sales, icon: Users, tone: "blue" },
        {
            title: "Total Visit",
            value: stats.visits,
            icon: ClipboardList,
            tone: "violet",
        },
        {
            title: "Selesai",
            value: stats.completed,
            icon: CheckCircle2,
            tone: "emerald",
        },
        {
            title: "Berlangsung",
            value: stats.ongoing,
            icon: CircleDot,
            tone: "cyan",
        },
        {
            title: "Dilewati",
            value: stats.skipped,
            icon: SkipForward,
            tone: "orange",
        },
        {
            title: "Dengan Order",
            value: stats.orders,
            icon: ShoppingBag,
            tone: "rose",
        },
        {
            title: "Total Omzet",
            value: money(stats.omset),
            icon: TrendingUp,
            tone: "emerald",
        },
    ];

    return (
        <AppLayout
            breadcrumbs={[
                { title: "CRM", href: "/crm" },
                { title: "Visit per Sales", href: window.location.pathname },
            ]}
        >
            <Head title="Monitoring Visit Sales" />

            <div className="min-h-screen bg-muted/60 pb-16 dark:bg-background/95">
                <div className="mx-auto flex max-w-[1800px] flex-col gap-6 p-4 md:p-6 lg:p-8">
                    {/* Hero Banner dengan Gradient Modern */}
                    <div className="relative overflow-hidden rounded-3xl bg-slate-900 text-white shadow-xl dark:border dark:border-slate-800">
                        {/* Background Decorative Blobs */}
                        <div className="pointer-events-none absolute -right-20 -top-20 size-96 rounded-full bg-blue-600/20 blur-3xl" />
                        <div className="pointer-events-none absolute -bottom-20 right-1/3 size-80 rounded-full bg-violet-600/15 blur-3xl" />

                        <div className="relative z-10 p-6 md:p-8 lg:p-10">
                            <div className="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
                                <div className="space-y-2">
                                    <div className="inline-flex items-center gap-2 rounded-full bg-blue-500/10 px-3.5 py-1 text-xs font-medium text-blue-300 ring-1 ring-inset ring-blue-500/30 backdrop-blur-md">
                                        <Sparkles className="h-3.5 w-3.5 text-blue-400" />
                                        <span>Real-Time Sales Operations</span>
                                    </div>
                                    <h1 className="text-2xl font-extrabold tracking-tight text-white md:text-3xl lg:text-4xl">
                                        Monitoring Visit per Sales
                                    </h1>
                                    <p className="max-w-2xl text-sm text-muted-foreground/60 md:text-base">
                                        Pantau aktivitas lapangan, tingkat
                                        penyelesaian kunjungan, dan konversi
                                        omzet harian tim secara waktu nyata.
                                    </p>
                                </div>

                                {/* Controls Navigasi Tanggal Modern */}
                                <div className="flex flex-wrap items-center gap-2.5 self-start lg:self-center">
                                    <div className="flex items-center rounded-2xl bg-card/10 p-1.5 backdrop-blur-md ring-1 ring-white/15 shadow-inner">
                                        <Button
                                            variant="ghost"
                                            size="icon"
                                            className="h-8 w-8 rounded-xl text-white hover:bg-card/10 hover:text-white"
                                            onClick={() => shiftDate(-1)}
                                        >
                                            <ChevronLeft className="h-4 w-4" />
                                        </Button>

                                        <div className="relative flex items-center px-2">
                                            <Input
                                                type="date"
                                                value={date}
                                                onChange={(e) => {
                                                    if (e.target.value) {
                                                        setDate(e.target.value);
                                                        apply({
                                                            date: e.target
                                                                .value,
                                                        });
                                                    }
                                                }}
                                                className="h-7 w-32 border-0 bg-transparent p-0 text-center text-xs font-semibold text-white shadow-none focus-visible:ring-0 cursor-pointer scheme-dark"
                                            />
                                        </div>

                                        <Button
                                            variant="ghost"
                                            size="icon"
                                            className="h-8 w-8 rounded-xl text-white hover:bg-card/10 hover:text-white"
                                            onClick={() => shiftDate(1)}
                                        >
                                            <ChevronRight className="h-4 w-4" />
                                        </Button>
                                    </div>

                                    <Button
                                        variant="secondary"
                                        className="rounded-2xl bg-card font-semibold text-foreground shadow-md hover:bg-muted transition-all"
                                        onClick={() => {
                                            const today = new Date();
                                            const yyyy = today.getFullYear();
                                            const mm = String(
                                                today.getMonth() + 1,
                                            ).padStart(2, "0");
                                            const dd = String(
                                                today.getDate(),
                                            ).padStart(2, "0");
                                            const todayStr = `${yyyy}-${mm}-${dd}`;
                                            setDate(todayStr);
                                            apply({ date: todayStr });
                                        }}
                                    >
                                        Hari ini
                                    </Button>
                                </div>
                            </div>

                            {/* Summary Metrics Grid */}
                            <div className="mt-8 grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-4 xl:grid-cols-7">
                                {statCards.map((card, idx) => (
                                    <StatChip
                                        key={idx}
                                        icon={card.icon}
                                        label={card.title}
                                        value={card.value}
                                        tone={card.tone}
                                        variant="compact"
                                    />
                                ))}
                            </div>
                        </div>
                    </div>

                    {/* Filter Toolbar & Board View */}
                    <div className="rounded-3xl border border-border/80 bg-card shadow-sm dark:border-border dark:bg-card">
                        {/* Toolbar Filter */}
                        <div className="flex flex-col gap-4 border-b border-slate-100 p-4 sm:flex-row sm:items-center sm:justify-between md:px-6 dark:border-border">
                            <div className="relative flex-1 max-w-md">
                                <Search className="absolute left-3.5 top-3 h-4 w-4 text-muted-foreground/80" />
                                <Input
                                    value={search}
                                    onChange={(e) => setSearch(e.target.value)}
                                    onKeyDown={(e) =>
                                        e.key === "Enter" && apply()
                                    }
                                    placeholder="Cari sales, customer, atau lokasi..."
                                    className="h-10 rounded-2xl border-border bg-muted/50/50 pl-10 text-sm focus-visible:bg-card focus-visible:ring-2 focus-visible:ring-blue-500 dark:bg-muted/30"
                                />
                            </div>

                            <div className="flex flex-wrap items-center gap-2.5">
                                <Select
                                    value={teamId}
                                    onValueChange={(v) => {
                                        setTeamId(v);
                                        apply({ team_id: v });
                                    }}
                                >
                                    <SelectTrigger className="h-10 w-40 rounded-2xl border-border bg-card font-medium text-foreground/80 shadow-2xs dark:border-border dark:text-foreground">
                                        <Filter className="mr-2 h-3.5 w-3.5 text-muted-foreground/80" />
                                        <SelectValue placeholder="Semua Tim" />
                                    </SelectTrigger>
                                    <SelectContent className="rounded-2xl">
                                        <SelectItem value="all">
                                            Semua Tim
                                        </SelectItem>
                                        {teams.map((team) => (
                                            <SelectItem
                                                key={team.id}
                                                value={String(team.id)}
                                            >
                                                {team.name}
                                            </SelectItem>
                                        ))}
                                    </SelectContent>
                                </Select>

                                <Select
                                    value={salesId}
                                    onValueChange={(v) => {
                                        setSalesId(v);
                                        apply({ sales_id: v });
                                    }}
                                >
                                    <SelectTrigger className="h-10 w-44 rounded-2xl border-border bg-card font-medium text-foreground/80 shadow-2xs dark:border-border dark:text-foreground">
                                        <SelectValue placeholder="Semua Sales" />
                                    </SelectTrigger>
                                    <SelectContent className="rounded-2xl">
                                        <SelectItem value="all">
                                            Semua Sales
                                        </SelectItem>
                                        {sales.map((item) => (
                                            <SelectItem
                                                key={item.id}
                                                value={String(item.id)}
                                            >
                                                {item.name}
                                            </SelectItem>
                                        ))}
                                    </SelectContent>
                                </Select>

                                {search && (
                                    <Button
                                        variant="ghost"
                                        size="sm"
                                        className="h-10 rounded-2xl px-3 text-muted-foreground hover:text-foreground"
                                        onClick={() => {
                                            setSearch("");
                                            apply({ search: "" });
                                        }}
                                    >
                                        <X className="mr-1.5 h-4 w-4" />
                                        Reset
                                    </Button>
                                )}
                            </div>
                        </div>

                        {/* Sub-Header / Status Bar */}
                        <div className="flex flex-col gap-2 border-b border-slate-100 bg-muted/50/50 px-6 py-3 text-xs sm:flex-row sm:items-center sm:justify-between sm:text-sm dark:border-border dark:bg-muted/20">
                            <div className="flex items-center gap-2 font-semibold text-foreground/80 dark:text-foreground">
                                <CalendarDays className="h-4 w-4 text-blue-600" />
                                <span>{dateLabel(date)}</span>
                            </div>
                            <div className="flex items-center gap-3">
                                <span className="text-muted-foreground dark:text-muted-foreground">
                                    Total Penyelesaian:
                                </span>
                                <div className="flex items-center gap-2.5">
                                    <Progress
                                        value={completionRate}
                                        className="h-2 w-28 bg-slate-200"
                                    />
                                    <span className="font-bold text-foreground dark:text-foreground">
                                        {completionRate}%
                                    </span>
                                </div>
                            </div>
                        </div>

                        {/* Kanban Columns Board View */}
                        <div className="p-4 md:p-6">
                            {visibleColumns.length === 0 ? (
                                <div className="flex min-h-95 flex-col items-center justify-center rounded-3xl border border-dashed border-border bg-muted/50/50 p-8 text-center dark:border-border dark:bg-muted/10">
                                    <div className="mb-3 rounded-2xl bg-blue-50 p-4 text-blue-600 dark:bg-blue-950/50 dark:text-blue-400">
                                        <ClipboardList className="h-8 w-8" />
                                    </div>
                                    <h3 className="text-base font-bold text-foreground dark:text-foreground">
                                        Tidak Ada Jadwal Visit
                                    </h3>
                                    <p className="mt-1 max-w-sm text-xs text-muted-foreground dark:text-muted-foreground">
                                        Tidak ada jadwal kunjungan yang cocok
                                        dengan pencarian atau filter pilihan
                                        Anda.
                                    </p>
                                </div>
                            ) : (
                                <div className="grid min-w-[320px] grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
                                    {visibleColumns.map((column: any) => {
                                        const columnVisitsCount =
                                            column.visits?.length || 0;
                                        const columnCompleted =
                                            column.completed_count || 0;
                                        const columnProgress =
                                            columnVisitsCount > 0
                                                ? Math.round(
                                                      (columnCompleted /
                                                          columnVisitsCount) *
                                                          100,
                                                  )
                                                : 0;

                                        return (
                                            <div
                                                key={column.id}
                                                className="flex flex-col rounded-3xl border border-border/80 bg-muted/50/70 dark:border-border dark:bg-card/40"
                                            >
                                                {/* Header Kolom Sales */}
                                                <div className="border-b border-border/80 bg-card/80 p-4 backdrop-blur-sm rounded-t-3xl dark:border-border dark:bg-card">
                                                    <div className="flex items-start justify-between gap-3">
                                                        <div className="flex items-center gap-3 min-w-0">
                                                            <Avatar className="h-11 w-11 border-2 border-white shadow-xs ring-2 ring-slate-100">
                                                                <AvatarImage
                                                                    src={
                                                                        column.avatar ||
                                                                        undefined
                                                                    }
                                                                />
                                                                <AvatarFallback className="bg-blue-600 font-bold text-white">
                                                                    {(
                                                                        column.name ||
                                                                        "S"
                                                                    )
                                                                        .slice(
                                                                            0,
                                                                            2,
                                                                        )
                                                                        .toUpperCase()}
                                                                </AvatarFallback>
                                                            </Avatar>
                                                            <div className="min-w-0">
                                                                <h4 className="truncate text-sm font-bold text-foreground dark:text-foreground">
                                                                    {
                                                                        column.name
                                                                    }
                                                                </h4>
                                                                <p className="text-xs font-medium text-muted-foreground">
                                                                    {
                                                                        columnVisitsCount
                                                                    }{" "}
                                                                    Kunjungan
                                                                </p>
                                                            </div>
                                                        </div>
                                                        <div className="text-right shrink-0">
                                                            <div className="text-sm font-extrabold text-emerald-600 dark:text-emerald-400">
                                                                {money(
                                                                    column.total_omset,
                                                                )}
                                                            </div>
                                                            <span className="text-[10px] font-semibold tracking-wider text-muted-foreground/80 uppercase">
                                                                Omzet
                                                            </span>
                                                        </div>
                                                    </div>

                                                    {/* Individual Progress Bar */}
                                                    <div className="mt-3.5 space-y-1.5">
                                                        <div className="flex items-center justify-between text-[11px] font-semibold">
                                                            <span className="text-muted-foreground">
                                                                {
                                                                    columnCompleted
                                                                }{" "}
                                                                /{" "}
                                                                {
                                                                    columnVisitsCount
                                                                }{" "}
                                                                Selesai
                                                            </span>
                                                            <span className="text-foreground dark:text-foreground">
                                                                {columnProgress}
                                                                %
                                                            </span>
                                                        </div>
                                                        <Progress
                                                            value={
                                                                columnProgress
                                                            }
                                                            className="h-1.5 bg-muted"
                                                        />
                                                    </div>
                                                </div>

                                                {/* Daftar Kartu Visit */}
                                                <div className="flex-1 space-y-3 p-3 max-h-150 overflow-y-auto">
                                                    {(column.visits || []).map(
                                                        (visit: any) => {
                                                            const badge =
                                                                statusMap[
                                                                    visit.status
                                                                ] || {
                                                                    label:
                                                                        visit.status ||
                                                                        "-",
                                                                    badgeClass:
                                                                        "bg-muted text-foreground/80",
                                                                    borderClass:
                                                                        "border-l-slate-400",
                                                                    dotColor:
                                                                        "bg-slate-400",
                                                                };

                                                            return (
                                                                <div
                                                                    key={
                                                                        visit.id
                                                                    }
                                                                    onClick={() =>
                                                                        setSelected(
                                                                            {
                                                                                ...visit,
                                                                                salesName:
                                                                                    column.name,
                                                                            },
                                                                        )
                                                                    }
                                                                    className={`group relative flex flex-col justify-between rounded-2xl border border-border/80 bg-card p-4 shadow-2xs transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md border-l-4 cursor-pointer dark:border-border dark:bg-card ${badge.borderClass}`}
                                                                >
                                                                    <div>
                                                                        <div className="flex items-center justify-between gap-2 mb-2">
                                                                            <span className="inline-flex items-center gap-1.5 rounded-lg bg-muted px-2 py-0.5 font-mono text-[11px] font-semibold text-muted-foreground dark:bg-muted dark:text-muted-foreground">
                                                                                <Clock className="h-3 w-3 text-muted-foreground/80" />
                                                                                {
                                                                                    visit.display_time
                                                                                }
                                                                            </span>
                                                                            <Badge
                                                                                variant="outline"
                                                                                className={`text-[10px] px-2 py-0.5 font-semibold rounded-md border ${badge.badgeClass}`}
                                                                            >
                                                                                <span
                                                                                    className={`mr-1 size-1.5 rounded-full ${badge.dotColor}`}
                                                                                />
                                                                                {
                                                                                    badge.label
                                                                                }
                                                                            </Badge>
                                                                        </div>

                                                                        <h5 className="font-bold text-foreground text-sm group-hover:text-blue-600 transition-colors dark:text-foreground">
                                                                            {visit
                                                                                .customer
                                                                                ?.name ||
                                                                                "Customer"}
                                                                        </h5>

                                                                        {visit
                                                                            .schedule
                                                                            ?.purpose && (
                                                                            <p className="mt-1 text-xs text-muted-foreground line-clamp-2 dark:text-muted-foreground">
                                                                                {
                                                                                    visit
                                                                                        .schedule
                                                                                        .purpose
                                                                                }
                                                                            </p>
                                                                        )}
                                                                    </div>

                                                                    <div className="mt-3.5 pt-3 border-t border-slate-100 flex items-center justify-between text-xs dark:border-border">
                                                                        <span className="flex items-center gap-1 text-muted-foreground max-w-35 truncate dark:text-muted-foreground">
                                                                            <MapPin className="h-3.5 w-3.5 shrink-0 text-muted-foreground/80" />
                                                                            {visit
                                                                                .customer
                                                                                ?.city ||
                                                                                visit
                                                                                    .customer
                                                                                    ?.address ||
                                                                                "Lokasi"}
                                                                        </span>
                                                                        {visit.amount >
                                                                            0 && (
                                                                            <span className="font-extrabold text-foreground dark:text-foreground">
                                                                                {money(
                                                                                    visit.amount,
                                                                                )}
                                                                            </span>
                                                                        )}
                                                                    </div>
                                                                </div>
                                                            );
                                                        },
                                                    )}

                                                    {!column.visits?.length && (
                                                        <div className="flex h-32 flex-col items-center justify-center rounded-2xl border border-dashed border-border text-center text-xs font-medium text-muted-foreground/80 dark:border-border">
                                                            <p>
                                                                Tidak ada
                                                                kunjungan
                                                            </p>
                                                        </div>
                                                    )}
                                                </div>
                                            </div>
                                        );
                                    })}
                                </div>
                            )}
                        </div>
                    </div>
                </div>
            </div>

            {/* Visit Detail Sheet / Drawer */}
            <Sheet
                open={!!selected}
                onOpenChange={(open) => !open && setSelected(null)}
            >
                <SheetContent className="w-full sm:max-w-xl overflow-y-auto p-0 rounded-l-3xl border-l">
                    {selected && (
                        <div className="flex flex-col h-full bg-muted/50/50 dark:bg-background">
                            {/* Sheet Header */}
                            <SheetHeader className="border-b border-border/80 bg-card p-6 text-left dark:border-border dark:bg-card">
                                <div className="flex items-center gap-2 mb-2">
                                    <Badge
                                        variant="outline"
                                        className={`text-xs font-semibold ${statusMap[selected.status]?.badgeClass}`}
                                    >
                                        {statusMap[selected.status]?.label ||
                                            selected.status}
                                    </Badge>
                                    <span className="text-xs font-medium text-muted-foreground">
                                        • Sales:{" "}
                                        <strong className="text-foreground dark:text-foreground">
                                            {selected.salesName}
                                        </strong>
                                    </span>
                                </div>
                                <SheetTitle className="text-2xl font-extrabold text-foreground dark:text-foreground">
                                    {selected.customer?.name || "Detail Visit"}
                                </SheetTitle>
                                <SheetDescription className="text-xs flex items-center gap-1.5 mt-1.5 text-muted-foreground">
                                    <MapPin className="h-3.5 w-3.5 text-muted-foreground/80" />
                                    {selected.customer?.address ||
                                        selected.customer?.city ||
                                        "Alamat tidak tersedia"}
                                </SheetDescription>
                            </SheetHeader>

                            {/* Sheet Content Body */}
                            <div className="flex-1 p-6 space-y-4">
                                <div className="grid grid-cols-2 gap-3">
                                    <div className="rounded-2xl border border-border/80 bg-card p-4 dark:border-border dark:bg-card">
                                        <span className="text-xs font-semibold text-muted-foreground/80 uppercase tracking-wider">
                                            Nilai Omzet
                                        </span>
                                        <div className="mt-1 text-xl font-black text-emerald-600 dark:text-emerald-400">
                                            {money(selected.amount)}
                                        </div>
                                    </div>

                                    <div className="rounded-2xl border border-border/80 bg-card p-4 dark:border-border dark:bg-card">
                                        <span className="text-xs font-semibold text-muted-foreground/80 uppercase tracking-wider">
                                            Jadwal Kunjungan
                                        </span>
                                        <div className="mt-1 text-sm font-bold text-foreground flex items-center gap-1.5 dark:text-foreground">
                                            <Clock className="h-4 w-4 text-blue-600" />
                                            {selected.display_time}
                                        </div>
                                    </div>
                                </div>

                                <div className="rounded-2xl border border-border/80 bg-card p-5 space-y-4 dark:border-border dark:bg-card">
                                    <h4 className="text-xs font-bold text-foreground uppercase tracking-wider flex items-center gap-2 dark:text-foreground">
                                        <CalendarDays className="h-4 w-4 text-blue-600" />
                                        Informasi Presensi & Waktu
                                    </h4>
                                    <div className="grid grid-cols-2 gap-4 text-xs">
                                        <div>
                                            <p className="text-muted-foreground/80 font-medium">
                                                Waktu Check-in
                                            </p>
                                            <p className="mt-1 font-semibold text-foreground dark:text-foreground">
                                                {selected.checkin_at
                                                    ? new Date(
                                                          selected.checkin_at,
                                                      ).toLocaleString("id-ID")
                                                    : "-"}
                                            </p>
                                        </div>
                                        <div>
                                            <p className="text-muted-foreground/80 font-medium">
                                                Waktu Check-out
                                            </p>
                                            <p className="mt-1 font-semibold text-foreground dark:text-foreground">
                                                {selected.checkout_at
                                                    ? new Date(
                                                          selected.checkout_at,
                                                      ).toLocaleString("id-ID")
                                                    : "-"}
                                            </p>
                                        </div>
                                        <div className="col-span-2 pt-2 border-t border-slate-100 dark:border-border">
                                            <p className="text-muted-foreground/80 font-medium">
                                                Tujuan Kunjungan
                                            </p>
                                            <p className="mt-1 font-medium text-foreground leading-relaxed dark:text-foreground">
                                                {selected.schedule?.purpose ||
                                                    "-"}
                                            </p>
                                        </div>
                                    </div>
                                </div>

                                <div className="rounded-2xl border border-border/80 bg-card p-5 space-y-2 dark:border-border dark:bg-card">
                                    <h4 className="text-xs font-bold text-foreground uppercase tracking-wider flex items-center gap-2 dark:text-foreground">
                                        <PackageCheck className="h-4 w-4 text-blue-600" />
                                        Catatan Hasil Kunjungan
                                    </h4>
                                    <div className="rounded-xl bg-muted/50 p-3.5 text-xs text-muted-foreground leading-relaxed dark:bg-muted/50 dark:text-muted-foreground">
                                        {selected.note_text ||
                                            "Belum ada catatan hasil kunjungan yang diinputkan."}
                                    </div>
                                </div>
                            </div>

                            {/* Sheet Footer Action */}
                            <SheetFooter className="border-t border-border/80 p-6 bg-card mt-auto dark:border-border dark:bg-card">
                                <Button
                                    className="w-full rounded-2xl h-11 bg-blue-600 font-semibold hover:bg-blue-700 text-white shadow-md transition-all gap-2"
                                    onClick={() =>
                                        router.get(`/crm/visits/${selected.id}`)
                                    }
                                >
                                    <span>Lihat Laporan Detail Visit</span>
                                    <ExternalLink className="h-4 w-4" />
                                </Button>
                            </SheetFooter>
                        </div>
                    )}
                </SheetContent>
            </Sheet>
        </AppLayout>
    );
}