import { useState } from "react";
import { Link, router } from "@inertiajs/react";
import { toast } from "sonner";
import {
    AlertTriangle,
    CheckCircle2,
    Clock3,
    MapPin,
    Navigation,
    Play,
    RefreshCw,
    Target,
} from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

export type DailyVisitItem = {
    id: number;
    customer_id: number;
    customer: {
        name: string;
        address?: string | null;
        latitude?: number | null;
        longitude?: number | null;
    };
    scheduled_date: string | null;
    scheduled_time: string | null;
    purpose: string;
    status:
        | "planned"
        | "ongoing"
        | "completed"
        | "missed"
        | "skipped"
        | "cancelled";
    visit_id?: number | null;
    checkin_at?: string | null;
    checkout_at?: string | null;
};

export type DailyPlanning = {
    date: string;
    period_label: string;
    blocked: boolean;
    pending_missed_count: number;
    pending_missed: DailyVisitItem[];
    today: DailyVisitItem[];
    summary: {
        total: number;
        completed: number;
        ongoing: number;
        remaining: number;
    };
    performance: {
        target_amount: number;
        actual_amount: number;
        amount_percent: number;
        target_qty: number;
        actual_qty: number;
        qty_percent: number;
        target_visits: number;
        actual_visits: number;
        visit_percent: number;
    };
};

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

const number = (value: number) =>
    new Intl.NumberFormat("id-ID").format(Number(value || 0));

const purposeLabel: Record<string, string> = {
    survey: "Survey",
    order: "Order",
    collection: "Collection",
    general: "General",
};

function ProgressMetric({
    label,
    actual,
    target,
    percent,
    formatter = number,
}: {
    label: string;
    actual: number;
    target: number;
    percent: number;
    formatter?: (value: number) => string;
}) {
    const width = Math.min(Math.max(percent, 0), 100);

    return (
        <div className="space-y-2">
            <div className="flex items-center justify-between gap-3 text-xs">
                <span className="font-medium text-muted-foreground dark:text-muted-foreground/80">
                    {label}
                </span>
                <span className="font-bold text-foreground dark:text-slate-100">
                    {formatter(actual)} / {formatter(target)}
                </span>
            </div>
            <div className="h-2 overflow-hidden rounded-full bg-muted dark:bg-slate-800">
                <div
                    className="h-full rounded-full bg-indigo-500 transition-all"
                    style={{ width: `${width}%` }}
                />
            </div>
            <div className="text-[10px] font-semibold text-muted-foreground/80">
                {percent.toFixed(1)}% tercapai
            </div>
        </div>
    );
}

function VisitAction({
    item,
    blocked,
}: {
    item: DailyVisitItem;
    blocked: boolean;
}) {
    const [loading, setLoading] = useState(false);

    if (item.status === "completed") {
        return (
            <Badge className="gap-1 rounded-full bg-emerald-50 text-emerald-700 hover:bg-emerald-50 dark:bg-emerald-950/40 dark:text-emerald-400">
                <CheckCircle2 className="size-3" /> Selesai
            </Badge>
        );
    }

    if (item.visit_id && item.status === "ongoing") {
        return (
            <Button asChild size="sm" variant="outline" className="rounded-lg">
                <Link href={`/crm/visits/${item.visit_id}`}>Lanjutkan</Link>
            </Button>
        );
    }

    const start = () => {
        if (loading) return;

        if (!navigator.geolocation) {
            toast.error(
                "Browser tidak mendukung GPS. Buka halaman Visit untuk melanjutkan secara manual.",
            );
            return;
        }

        setLoading(true);
        navigator.geolocation.getCurrentPosition(
            (position) => {
                router.post(
                    `/crm/visit-schedules/${item.id}/checkin`,
                    {
                        latitude: position.coords.latitude,
                        longitude: position.coords.longitude,
                    },
                    {
                        preserveScroll: true,
                        onFinish: () => setLoading(false),
                    },
                );
            },
            () => {
                setLoading(false);
                toast.error(
                    "Lokasi tidak dapat diambil. Aktifkan izin lokasi lalu coba lagi.",
                );
            },
            { enableHighAccuracy: true, timeout: 10000, maximumAge: 30000 },
        );
    };

    return (
        <Button
            size="sm"
            onClick={start}
            disabled={blocked || loading}
            className="gap-1.5 rounded-lg bg-indigo-600 text-white hover:bg-indigo-500"
        >
            {loading ? (
                <RefreshCw className="size-3.5 animate-spin" />
            ) : (
                <Play className="size-3.5" />
            )}
            {loading ? "Mengambil GPS..." : "Mulai"}
        </Button>
    );
}

function VisitRow({
    item,
    blocked,
}: {
    item: DailyVisitItem;
    blocked: boolean;
}) {
    const isMissed = item.status === "missed";

    return (
        <div
            className={`flex flex-col gap-3 rounded-xl border p-4 sm:flex-row sm:items-center sm:justify-between ${
                isMissed
                    ? "border-rose-200 bg-rose-50/60 dark:border-rose-900/60 dark:bg-rose-950/20"
                    : "border-border/80 bg-card dark:border-slate-800 dark:bg-slate-900"
            }`}
        >
            <div className="flex min-w-0 items-start gap-3">
                <div
                    className={`mt-0.5 flex size-9 shrink-0 items-center justify-center rounded-xl ${
                        isMissed
                            ? "bg-rose-100 text-rose-600 dark:bg-rose-950/60 dark:text-rose-400"
                            : item.status === "ongoing"
                              ? "bg-amber-100 text-amber-600 dark:bg-amber-950/50 dark:text-amber-400"
                              : "bg-indigo-50 text-indigo-600 dark:bg-indigo-950/50 dark:text-indigo-400"
                    }`}
                >
                    {isMissed ? (
                        <AlertTriangle className="size-4" />
                    ) : (
                        <MapPin className="size-4" />
                    )}
                </div>

                <div className="min-w-0">
                    <div className="flex flex-wrap items-center gap-2">
                        <h3 className="truncate text-sm font-bold text-foreground dark:text-slate-100">
                            {item.customer.name}
                        </h3>
                        <Badge
                            variant="outline"
                            className="rounded-full text-[10px]"
                        >
                            {purposeLabel[item.purpose] || "General"}
                        </Badge>
                        {isMissed && (
                            <Badge className="rounded-full bg-rose-100 text-[10px] text-rose-700 hover:bg-rose-100 dark:bg-rose-950/50 dark:text-rose-400">
                                MISSed
                            </Badge>
                        )}
                    </div>

                    <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-[11px] text-muted-foreground dark:text-muted-foreground/80">
                        {item.scheduled_time && (
                            <span className="inline-flex items-center gap-1">
                                <Clock3 className="size-3" />{" "}
                                {item.scheduled_time}
                            </span>
                        )}
                        {item.customer.address && (
                            <span className="inline-flex min-w-0 items-center gap-1 truncate">
                                <Navigation className="size-3 shrink-0" />{" "}
                                {item.customer.address}
                            </span>
                        )}
                    </div>

                    {isMissed && (
                        <p className="mt-1 text-[11px] font-semibold text-rose-600 dark:text-rose-400">
                            Wajib diselesaikan sebelum tugas baru.
                        </p>
                    )}
                </div>
            </div>

            <div className="flex shrink-0 items-center justify-end gap-2">
                {item.visit_id && item.status !== "completed" && (
                    <Button
                        asChild
                        size="sm"
                        variant="ghost"
                        className="rounded-lg text-muted-foreground"
                    >
                        <Link href={`/crm/visits/${item.visit_id}`}>
                            Detail
                        </Link>
                    </Button>
                )}
                <VisitAction item={item} blocked={blocked && !isMissed} />
            </div>
        </div>
    );
}

export default function DailyVisitPlanning({
    planning,
}: {
    planning: DailyPlanning;
}) {
    const { performance, summary } = planning;
    const [showAllMissed, setShowAllMissed] = useState(false);
    const [showAllToday, setShowAllToday] = useState(false);

    const missedItems = showAllMissed
        ? planning.pending_missed
        : planning.pending_missed.slice(0, 5);
    const todayItems = showAllToday
        ? planning.today
        : planning.today.slice(0, 8);

    return (
        <div className="space-y-5">
            {planning.blocked && (
                <Card className="overflow-hidden rounded-2xl border-rose-200 bg-rose-50/70 shadow-sm dark:border-rose-900/60 dark:bg-rose-950/20">
                    <CardContent className="flex flex-col gap-3 p-5 sm:flex-row sm:items-center">
                        <div className="flex size-10 shrink-0 items-center justify-center rounded-xl bg-rose-100 text-rose-600 dark:bg-rose-950/60 dark:text-rose-400">
                            <AlertTriangle className="size-5" />
                        </div>
                        <div className="min-w-0 flex-1">
                            <p className="text-sm font-bold text-rose-800 dark:text-rose-300">
                                {planning.pending_missed_count} kunjungan
                                tertunda wajib diselesaikan
                            </p>
                            <p className="mt-0.5 text-xs text-rose-700/80 dark:text-rose-400/80">
                                Kunjungan hari ini yang baru belum dapat dimulai
                                sebelum seluruh kunjungan tertunda selesai.
                            </p>
                        </div>
                        <Badge className="w-fit rounded-full bg-rose-100 text-rose-700 hover:bg-rose-100 dark:bg-rose-950/50 dark:text-rose-400">
                            Daily task diblokir
                        </Badge>
                    </CardContent>
                </Card>
            )}

            <div className="grid gap-4 lg:grid-cols-[1.15fr_0.85fr]">
                <Card className="rounded-2xl border-border/80 shadow-sm dark:border-slate-800 dark:bg-slate-900">
                    <CardHeader className="flex flex-row items-center justify-between gap-3 pb-3">
                        <div>
                            <CardTitle className="flex items-center gap-2 text-base font-bold">
                                <Target className="size-4 text-indigo-500" />
                                Target & Performance
                            </CardTitle>
                            <p className="mt-1 text-xs text-muted-foreground dark:text-muted-foreground/80">
                                Periode {planning.period_label}
                            </p>
                        </div>
                        <Button
                            asChild
                            variant="ghost"
                            size="sm"
                            className="rounded-lg text-xs"
                        >
                            <Link href="/crm/sales/performance">Detail</Link>
                        </Button>
                    </CardHeader>
                    <CardContent className="grid gap-5 sm:grid-cols-3">
                        <ProgressMetric
                            label="Omzet"
                            actual={performance.actual_amount}
                            target={performance.target_amount}
                            percent={performance.amount_percent}
                            formatter={money}
                        />
                        <ProgressMetric
                            label="Qty Produk"
                            actual={performance.actual_qty}
                            target={performance.target_qty}
                            percent={performance.qty_percent}
                        />
                        <ProgressMetric
                            label="Kunjungan"
                            actual={performance.actual_visits}
                            target={performance.target_visits}
                            percent={performance.visit_percent}
                        />
                    </CardContent>
                </Card>

                <Card className="rounded-2xl border-border/80 shadow-sm dark:border-slate-800 dark:bg-slate-900">
                    <CardHeader className="pb-3">
                        <CardTitle className="text-base font-bold">
                            Progress Hari Ini
                        </CardTitle>
                    </CardHeader>
                    <CardContent className="grid grid-cols-3 gap-3">
                        <div className="rounded-xl bg-muted/50 p-3 dark:bg-slate-800/60">
                            <p className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/80">
                                Total
                            </p>
                            <p className="mt-1 text-xl font-extrabold">
                                {summary.total}
                            </p>
                        </div>
                        <div className="rounded-xl bg-emerald-50 p-3 dark:bg-emerald-950/30">
                            <p className="text-[10px] font-semibold uppercase tracking-wider text-emerald-600">
                                Selesai
                            </p>
                            <p className="mt-1 text-xl font-extrabold text-emerald-700 dark:text-emerald-400">
                                {summary.completed}
                            </p>
                        </div>
                        <div className="rounded-xl bg-amber-50 p-3 dark:bg-amber-950/30">
                            <p className="text-[10px] font-semibold uppercase tracking-wider text-amber-600">
                                Sisa
                            </p>
                            <p className="mt-1 text-xl font-extrabold text-amber-700 dark:text-amber-400">
                                {summary.remaining}
                            </p>
                        </div>
                    </CardContent>
                </Card>
            </div>

            {planning.pending_missed.length > 0 && (
                <Card className="rounded-2xl border-rose-200 shadow-sm dark:border-rose-900/60 dark:bg-slate-900">
                    <CardHeader className="flex flex-row items-center justify-between gap-3 pb-3">
                        <div>
                            <CardTitle className="text-base font-bold text-rose-700 dark:text-rose-400">
                                Wajib Diselesaikan
                            </CardTitle>
                            <p className="mt-1 text-xs text-muted-foreground dark:text-muted-foreground/80">
                                Kunjungan terlewat dari hari sebelumnya.
                            </p>
                        </div>
                        <Badge className="rounded-full bg-rose-100 text-rose-700 hover:bg-rose-100 dark:bg-rose-950/50 dark:text-rose-400">
                            {planning.pending_missed_count}
                        </Badge>
                    </CardHeader>
                    <CardContent className="space-y-3">
                        {missedItems.map((item) => (
                            <VisitRow
                                key={item.id}
                                item={item}
                                blocked={planning.blocked}
                            />
                        ))}
                        {planning.pending_missed.length > 5 && (
                            <Button
                                variant="ghost"
                                className="w-full rounded-xl text-xs"
                                onClick={() =>
                                    setShowAllMissed((value) => !value)
                                }
                            >
                                {showAllMissed
                                    ? "Tampilkan lebih sedikit"
                                    : `Lihat ${planning.pending_missed.length - 5} lainnya`}
                            </Button>
                        )}
                    </CardContent>
                </Card>
            )}

            <Card className="rounded-2xl border-border/80 shadow-sm dark:border-slate-800 dark:bg-slate-900">
                <CardHeader className="flex flex-row items-center justify-between gap-3 pb-3">
                    <div>
                        <CardTitle className="text-base font-bold">
                            Kunjungan Hari Ini
                        </CardTitle>
                        <p className="mt-1 text-xs text-muted-foreground dark:text-muted-foreground/80">
                            {planning.date} · Urut berdasarkan waktu kunjungan.
                        </p>
                    </div>
                    <Button
                        asChild
                        variant="outline"
                        size="sm"
                        className="rounded-lg text-xs"
                    >
                        <Link href="/crm/visit-schedules">Semua Jadwal</Link>
                    </Button>
                </CardHeader>
                <CardContent className="space-y-3">
                    {todayItems.length ? (
                        todayItems.map((item) => (
                            <VisitRow
                                key={item.id}
                                item={item}
                                blocked={planning.blocked}
                            />
                        ))
                    ) : (
                        <div className="rounded-xl border border-dashed border-border p-8 text-center dark:border-slate-800">
                            <MapPin className="mx-auto size-7 text-muted-foreground/60" />
                            <p className="mt-2 text-sm font-semibold text-muted-foreground dark:text-muted-foreground/60">
                                Belum ada jadwal kunjungan hari ini.
                            </p>
                            <p className="mt-1 text-xs text-muted-foreground/80">
                                Jadwal yang dibuat tetap akan mengikuti aturan
                                minimum interval 3 hari.
                            </p>
                        </div>
                    )}
                    {planning.today.length > 8 && (
                        <Button
                            variant="ghost"
                            className="w-full rounded-xl text-xs"
                            onClick={() => setShowAllToday((value) => !value)}
                        >
                            {showAllToday
                                ? "Tampilkan lebih sedikit"
                                : `Lihat ${planning.today.length - 8} jadwal lainnya`}
                        </Button>
                    )}
                </CardContent>
            </Card>
        </div>
    );
}