import { FormEvent, useState } from "react";
import { Head, Link, router, useForm } from "@inertiajs/react";
import {
    ArrowLeft,
    CheckCircle2,
    MapPin,
    Camera,
    FileText,
    ShoppingCart,
    Navigation,
    PackageCheck,
} from "lucide-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 { Textarea } from "@/components/ui/textarea";
import { CrmSelect } from "@/components/crm-select";
import { toast } from "sonner";

type Visit = {
    id: number;
    status:
        | "planned"
        | "ongoing"
        | "completed"
        | "skipped"
        | "cancelled"
        | "missed";
    result_type: string;
    checkin_at?: string | null;
    checkout_at?: string | null;
    checkin_lat?: string | null;
    checkin_lng?: string | null;
    checkout_lat?: string | null;
    checkout_lng?: string | null;
    customer: { id: number; name: string; address?: string | null };
    sales: { id: number; name: string };
    schedule: {
        id: number;
        scheduled_date: string;
        scheduled_time?: string | null;
        purpose: string;
        notes?: string | null;
    };
    photos: {
        id: number;
        photo_path: string;
        type: string;
        caption?: string | null;
    }[];
    notes: { id: number; note?: string | null; created_at?: string }[];
    order?: {
        id: number;
        order_number?: string;
        status: string;
        grand_total: number | string;
        approved_at?: string | null;
        approval_remarks?: string | null;
    } | null;
};

type Props = {
    visit: Visit;
    products: {
        id: number;
        name: string;
        sku: string;
        price: string | number;
        unit?: string;
    }[];
};

const labels: Record<string, string> = {
    planned: "Belum Check-in",
    cancelled: "Dibatalkan",
    missed: "Terlewat",
    ongoing: "Sedang Berlangsung",
    completed: "Selesai",
    skipped: "Dilewati",
};
const statusClass: Record<string, string> = {
    planned: "bg-amber-50 text-amber-700 border-amber-200",
    cancelled: "bg-rose-50 text-rose-700 border-rose-200",
    missed: "bg-orange-50 text-orange-700 border-orange-200",
    ongoing: "bg-blue-50 text-blue-700 border-blue-200",
    completed: "bg-emerald-50 text-emerald-700 border-emerald-200",
    skipped: "bg-slate-50 text-slate-600 border-slate-200",
};
const orderClass: Record<string, string> = {
    submitted: "bg-amber-50 text-amber-700 border-amber-200",
    approved: "bg-emerald-50 text-emerald-700 border-emerald-200",
    rejected: "bg-rose-50 text-rose-700 border-rose-200",
};
const dt = (value?: string | null) =>
    value
        ? new Date(value).toLocaleString("id-ID", {
              day: "2-digit",
              month: "short",
              year: "numeric",
              hour: "2-digit",
              minute: "2-digit",
          })
        : "—";
const money = (value: number | string) =>
    `Rp ${Number(value).toLocaleString("id-ID")}`;

export default function VisitShow({ visit, products }: Props) {
    const [coords, setCoords] = useState<{
        latitude: number;
        longitude: number;
    } | null>(null);
    const [photo, setPhoto] = useState<File | null>(null);
    const note = useForm({ note: "", survey_answers: {} });
    const order = useForm({
        order_date: new Date().toISOString().slice(0, 10),
        notes: "",
        items: [{ product_id: "", qty: "1", unit_price: "" }] as any[],
    });

    const locate = () =>
        navigator.geolocation.getCurrentPosition(
            (p) =>
                setCoords({
                    latitude: p.coords.latitude,
                    longitude: p.coords.longitude,
                }),
            () =>
                toast.error(
                    "Lokasi tidak dapat diambil. Aktifkan GPS browser.",
                ),
            { enableHighAccuracy: true, timeout: 15000 },
        );
    const gpsAction = (url: string) => {
        if (!coords) {
            locate();
            return;
        }
        router.post(url, coords);
    };
    const addItem = () =>
        order.setData("items", [
            ...order.data.items,
            { product_id: "", qty: "1", unit_price: "" },
        ]);
    const submitPhoto = (e: FormEvent) => {
        e.preventDefault();
        if (!photo) return;
        const fd = new FormData();
        fd.append("photo", photo);
        fd.append("type", "evidence");
        router.post(`/crm/visits/${visit.id}/photos`, fd as any, {
            forceFormData: true,
        });
        setPhoto(null);
    };
    const submitOrder = (e: FormEvent) => {
        e.preventDefault();
        order.post(`/crm/visits/${visit.id}/order`);
    };

    const canWork = visit.status === "ongoing";
    const total = order.data.items.reduce(
        (sum, item) =>
            sum + Number(item.qty || 0) * Number(item.unit_price || 0),
        0,
    );

    return (
        <AppLayout
            breadcrumbs={[
                { title: "Kunjungan", href: "/crm/visits" },
                {
                    title: `Visit #${visit.id}`,
                    href: `/crm/visits/${visit.id}`,
                },
            ]}
        >
            <Head title={`Visit #${visit.id}`} />
            <div className="crm-page space-y-6 pb-12">
                <div className="flex flex-wrap items-start justify-between gap-4 border-b pb-5">
                    <div>
                        <Link
                            href="/crm/visits"
                            className="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground mb-3"
                        >
                            <ArrowLeft className="h-3 w-3" />
                            Kembali ke monitoring
                        </Link>
                        <div className="flex flex-wrap items-center gap-2">
                            <h1 className="text-2xl font-bold">
                                Visit #{visit.id}
                            </h1>
                            <Badge
                                variant="outline"
                                className={statusClass[visit.status]}
                            >
                                {labels[visit.status]}
                            </Badge>
                        </div>
                        <p className="text-muted-foreground mt-1">
                            {visit.customer.name} · Sales {visit.sales.name}
                        </p>
                        <p className="text-sm mt-1">
                            Jadwal {visit.schedule.scheduled_date}{" "}
                            {visit.schedule.scheduled_time?.slice(0, 5) || ""} ·{" "}
                            {visit.schedule.purpose}
                        </p>
                    </div>
                    <div className="flex gap-2">
                        {visit.status === "planned" && (
                            <Button
                                onClick={() =>
                                    gpsAction(`/crm/visits/${visit.id}/checkin`)
                                }
                            >
                                <MapPin className="h-4 w-4 mr-2" />
                                Check-in GPS
                            </Button>
                        )}
                        {visit.status === "ongoing" && (
                            <Button
                                onClick={() =>
                                    gpsAction(
                                        `/crm/visits/${visit.id}/checkout`,
                                    )
                                }
                            >
                                <CheckCircle2 className="h-4 w-4 mr-2" />
                                Check-out GPS
                            </Button>
                        )}
                    </div>
                </div>

                <div className="grid gap-4 md:grid-cols-4">
                    <div className="rounded-xl border p-4">
                        <div className="text-xs text-muted-foreground">
                            Customer
                        </div>
                        <div className="font-semibold mt-1">
                            {visit.customer.name}
                        </div>
                        <div className="text-xs text-muted-foreground mt-1">
                            {visit.customer.address || "Alamat tidak tersedia"}
                        </div>
                    </div>
                    <div className="rounded-xl border p-4">
                        <div className="text-xs text-muted-foreground">
                            Check-in
                        </div>
                        <div className="font-semibold mt-1">
                            {dt(visit.checkin_at)}
                        </div>
                        {visit.checkin_lat && (
                            <div className="text-[11px] text-muted-foreground mt-1">
                                {visit.checkin_lat}, {visit.checkin_lng}
                            </div>
                        )}
                    </div>
                    <div className="rounded-xl border p-4">
                        <div className="text-xs text-muted-foreground">
                            Check-out
                        </div>
                        <div className="font-semibold mt-1">
                            {dt(visit.checkout_at)}
                        </div>
                        {visit.checkout_lat && (
                            <div className="text-[11px] text-muted-foreground mt-1">
                                {visit.checkout_lat}, {visit.checkout_lng}
                            </div>
                        )}
                    </div>
                    <div className="rounded-xl border p-4">
                        <div className="text-xs text-muted-foreground">
                            Order
                        </div>
                        <div className="font-semibold mt-1">
                            {visit.order
                                ? visit.order.order_number ||
                                  `#${visit.order.id}`
                                : "Belum ada"}
                        </div>
                        {visit.order && (
                            <Badge
                                variant="outline"
                                className={`mt-1 ${orderClass[visit.order.status] || ""}`}
                            >
                                {visit.order.status}
                            </Badge>
                        )}
                    </div>
                </div>

                {visit.status === "planned" && (
                    <div className="rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900">
                        <strong>Visit sudah direalisasikan dari jadwal.</strong>{" "}
                        Check-in GPS diperlukan sebelum catatan, foto, dan order
                        dapat dilakukan.
                    </div>
                )}
                {visit.status === "completed" && (
                    <div className="rounded-xl border border-emerald-200 bg-emerald-50 p-4 text-sm text-emerald-900">
                        <strong>Visit sudah selesai.</strong> Data realisasi
                        tidak dapat diedit. Gunakan halaman Order untuk proses
                        approval jika visit memiliki order.
                    </div>
                )}

                <div className="grid gap-6 lg:grid-cols-2">
                    <form
                        onSubmit={(e) => {
                            e.preventDefault();
                            note.post(`/crm/visits/${visit.id}/notes`);
                        }}
                        className="rounded-2xl border p-5 space-y-4"
                    >
                        <div className="flex items-center gap-2">
                            <FileText className="h-4 w-4 text-indigo-600" />
                            <h2 className="font-semibold">
                                Catatan & Hasil Visit
                            </h2>
                        </div>
                        <Textarea
                            disabled={!canWork}
                            className="min-h-32"
                            value={note.data.note}
                            onChange={(e) =>
                                note.setData("note", e.target.value)
                            }
                            placeholder="Hasil kunjungan, kebutuhan customer, follow-up..."
                        />
                        <Button disabled={!canWork || note.processing}>
                            Simpan Catatan
                        </Button>
                        <div className="space-y-3 pt-2">
                            {visit.notes.map((n) => (
                                <div
                                    key={n.id}
                                    className="rounded-lg bg-muted/40 p-3 text-sm"
                                >
                                    <div>{n.note || "—"}</div>
                                    <div className="text-[11px] text-muted-foreground mt-1">
                                        {dt(n.created_at)}
                                    </div>
                                </div>
                            ))}
                        </div>
                    </form>

                    <form
                        onSubmit={submitPhoto}
                        className="rounded-2xl border p-5 space-y-4"
                    >
                        <div className="flex items-center gap-2">
                            <Camera className="h-4 w-4 text-indigo-600" />
                            <h2 className="font-semibold">Foto Bukti</h2>
                        </div>
                        <Input
                            disabled={!canWork}
                            type="file"
                            accept="image/*"
                            capture="environment"
                            onChange={(e) =>
                                setPhoto(e.target.files?.[0] || null)
                            }
                        />
                        <Button disabled={!canWork || !photo}>
                            <Camera className="h-4 w-4 mr-2" />
                            Upload Foto
                        </Button>
                        {visit.photos.length > 0 && (
                            <div className="grid grid-cols-3 gap-2">
                                {visit.photos.map((p) => (
                                    <a
                                        key={p.id}
                                        href={`/storage/${p.photo_path}`}
                                        target="_blank"
                                        rel="noreferrer"
                                    >
                                        <img
                                            className="aspect-square w-full rounded-lg object-cover border"
                                            src={`/storage/${p.photo_path}`}
                                            alt={p.caption || p.type}
                                        />
                                    </a>
                                ))}
                            </div>
                        )}
                    </form>
                </div>

                {!visit.order && canWork && (
                    <form
                        onSubmit={submitOrder}
                        className="rounded-2xl border p-5 space-y-4"
                    >
                        <div className="flex flex-wrap items-center justify-between gap-2">
                            <div>
                                <div className="flex items-center gap-2">
                                    <ShoppingCart className="h-4 w-4 text-indigo-600" />
                                    <h2 className="font-semibold">
                                        Buat Order dari Visit
                                    </h2>
                                </div>
                                <p className="text-xs text-muted-foreground mt-1">
                                    Order akan dibuat sebagai{" "}
                                    <strong>submitted</strong> dan menunggu
                                    approval Supervisor/Manager.
                                </p>
                            </div>
                            <Button
                                type="button"
                                variant="outline"
                                onClick={addItem}
                            >
                                + Produk
                            </Button>
                        </div>
                        {order.data.items.map((item: any, i: number) => (
                            <div
                                key={i}
                                className="grid gap-2 md:grid-cols-[1fr_120px_160px_80px] items-end"
                            >
                                <div>
                                    <label className="text-xs font-medium">
                                        Produk
                                    </label>
                                    <CrmSelect
                                        className="w-full mt-1"
                                        value={item.product_id}
                                        onChange={(e) => {
                                            const a = [...order.data.items];
                                            const p = products.find(
                                                (x) =>
                                                    String(x.id) ===
                                                    e.target.value,
                                            );
                                            a[i] = {
                                                ...a[i],
                                                product_id: e.target.value,
                                                unit_price: p?.price ?? "",
                                            };
                                            order.setData("items", a);
                                        }}
                                    >
                                        <option value="">Pilih produk</option>
                                        {products.map((p) => (
                                            <option key={p.id} value={p.id}>
                                                {p.name} · Rp{" "}
                                                {Number(p.price).toLocaleString(
                                                    "id-ID",
                                                )}
                                            </option>
                                        ))}
                                    </CrmSelect>
                                </div>
                                <div>
                                    <label className="text-xs font-medium">
                                        Qty
                                    </label>
                                    <Input
                                        className="mt-1"
                                        type="number"
                                        min="1"
                                        value={item.qty}
                                        onChange={(e) => {
                                            const a = [...order.data.items];
                                            a[i] = {
                                                ...a[i],
                                                qty: e.target.value,
                                            };
                                            order.setData("items", a);
                                        }}
                                    />
                                </div>
                                <div>
                                    <label className="text-xs font-medium">
                                        Harga
                                    </label>
                                    <Input
                                        className="mt-1"
                                        type="number"
                                        min="0"
                                        value={item.unit_price}
                                        onChange={(e) => {
                                            const a = [...order.data.items];
                                            a[i] = {
                                                ...a[i],
                                                unit_price: e.target.value,
                                            };
                                            order.setData("items", a);
                                        }}
                                    />
                                </div>
                                <Button
                                    type="button"
                                    variant="ghost"
                                    onClick={() =>
                                        order.setData(
                                            "items",
                                            order.data.items.filter(
                                                (_: any, j: number) => j !== i,
                                            ),
                                        )
                                    }
                                >
                                    Hapus
                                </Button>
                            </div>
                        ))}
                        <div className="flex flex-wrap items-center justify-between gap-3 border-t pt-4">
                            <div className="text-sm text-muted-foreground">
                                Estimasi subtotal{" "}
                                <strong className="text-foreground ml-1">
                                    {money(total)}
                                </strong>
                            </div>
                            <Button
                                disabled={
                                    order.processing ||
                                    order.data.items.length === 0
                                }
                            >
                                <ShoppingCart className="h-4 w-4 mr-2" />
                                Submit Order
                            </Button>
                        </div>
                    </form>
                )}

                {visit.order && (
                    <div className="rounded-2xl border p-5 space-y-4">
                        <div className="flex flex-wrap items-center justify-between gap-3">
                            <div>
                                <div className="flex items-center gap-2">
                                    <PackageCheck className="h-4 w-4 text-indigo-600" />
                                    <h2 className="font-semibold">
                                        Order dari Visit
                                    </h2>
                                </div>
                                <p className="text-sm text-muted-foreground mt-1">
                                    {visit.order.order_number ||
                                        `Order #${visit.order.id}`}{" "}
                                    · {money(visit.order.grand_total)}
                                </p>
                            </div>
                            <Badge
                                variant="outline"
                                className={orderClass[visit.order.status] || ""}
                            >
                                {visit.order.status}
                            </Badge>
                        </div>
                        <div className="flex flex-wrap gap-2">
                            <Link href={`/crm/orders/${visit.order.id}`}>
                                <Button variant="outline">
                                    Lihat Detail Order
                                </Button>
                            </Link>
                            {visit.order.status === "submitted" && (
                                <span className="text-xs self-center text-amber-700">
                                    Menunggu approval Supervisor/Manager.
                                </span>
                            )}
                            {visit.order.status === "rejected" && (
                                <span className="text-xs self-center text-rose-700">
                                    {visit.order.approval_remarks ||
                                        "Order ditolak."}
                                </span>
                            )}
                        </div>
                    </div>
                )}

                <div className="rounded-2xl border p-5">
                    <div className="flex items-center gap-2 mb-4">
                        <Navigation className="h-4 w-4 text-indigo-600" />
                        <h2 className="font-semibold">Timeline Visit</h2>
                    </div>
                    <div className="space-y-4 text-sm">
                        <div className="flex gap-3">
                            <div className="mt-1 h-2.5 w-2.5 rounded-full bg-indigo-500" />
                            <div>
                                <div className="font-medium">Jadwal dibuat</div>
                                <div className="text-xs text-muted-foreground">
                                    {visit.schedule.scheduled_date}{" "}
                                    {visit.schedule.scheduled_time?.slice(
                                        0,
                                        5,
                                    ) || ""}
                                </div>
                            </div>
                        </div>
                        <div className="flex gap-3">
                            <div
                                className={`mt-1 h-2.5 w-2.5 rounded-full ${visit.checkin_at ? "bg-emerald-500" : "bg-muted-foreground/30"}`}
                            />
                            <div>
                                <div className="font-medium">Check-in GPS</div>
                                <div className="text-xs text-muted-foreground">
                                    {dt(visit.checkin_at)}
                                </div>
                            </div>
                        </div>
                        <div className="flex gap-3">
                            <div
                                className={`mt-1 h-2.5 w-2.5 rounded-full ${visit.order ? "bg-blue-500" : "bg-muted-foreground/30"}`}
                            />
                            <div>
                                <div className="font-medium">Order</div>
                                <div className="text-xs text-muted-foreground">
                                    {visit.order
                                        ? `${visit.order.order_number || `#${visit.order.id}`} · ${visit.order.status}`
                                        : "Belum ada order"}
                                </div>
                            </div>
                        </div>
                        <div className="flex gap-3">
                            <div
                                className={`mt-1 h-2.5 w-2.5 rounded-full ${visit.checkout_at ? "bg-emerald-500" : "bg-muted-foreground/30"}`}
                            />
                            <div>
                                <div className="font-medium">Check-out GPS</div>
                                <div className="text-xs text-muted-foreground">
                                    {dt(visit.checkout_at)}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </AppLayout>
    );
}