import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
import { Head, router, usePage, Link } from "@inertiajs/react";
import {
    Calendar as CalendarIcon,
    ChevronLeft,
    ChevronRight,
    Clock,
    Briefcase,
    Timer,
    CheckCircle2,
    ArrowRight,
    Layout,
    Building2,
    User as UserIcon,
    Plus,
    Phone,
    Smartphone,
    Mail,
    Globe,
    MapPin,
    ExternalLink,
    Search,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { useState, useEffect } from "react";
import useTranslation from "@/Hooks/useTranslation";
import PlanTaskModal from "./Partials/PlanTaskModal";
import EditPlanModal from "./Partials/EditPlanModal";
import DeletePlanModal from "./Partials/DeletePlanModal";
import StatusSwitcherModal from "./Partials/StatusSwitcherModal";
import { Edit, Trash2 } from "lucide-react";
import useWorkLogListener from "@/Hooks/useWorkLogListener";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
import L from "leaflet";
import "leaflet/dist/leaflet.css";

// Fix for default marker icons in Leaflet
delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
    iconRetinaUrl: "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon-2x.png",
    iconUrl: "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon.png",
    shadowUrl: "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png",
});

export default function MyPlanning({
    planning,
    currentDate,
    availableTasks,
    affaires,
    projects,
    allUsers,
    businessContacts,
    canCreate,
    canEdit,
    canDelete,
}) {
    const user = usePage().props.auth.user;
    const { t } = useTranslation();

    const translateStatus = (statusName) => {
        if (!statusName) return "";
        const key = `status_task_assignments.${statusName.toLowerCase()}`;
        const translated = t(key);
        return translated === key ? statusName : translated;
    };

    const getContactName = (contact) => {
        if (!contact) return "";
        let first = contact.firstname || contact.name || "";
        let last = contact.lastname || "";
        let formattedName = first;
        if (last && last.toLowerCase() !== first.toLowerCase()) {
            formattedName += ` ${last}`;
        }
        if (contact.tier) {
            formattedName += ` @${contact.tier.name}`;
        }
        return `${contact.civility ? contact.civility + " " : ""}${formattedName}`.trim();
    };

    const [now, setNow] = useState(new Date());
    const [isAddModalOpen, setIsAddModalOpen] = useState(false);
    const [searchTerm, setSearchTerm] = useState("");

    // Edit & Delete states
    const [isEditModalOpen, setIsEditModalOpen] = useState(false);
    const [selectedPlanning, setSelectedPlanning] = useState(null);
    const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
    const [itemToDelete, setItemToDelete] = useState(null);
    const [isStatusSwitcherOpen, setIsStatusSwitcherOpen] = useState(false);
    const [selectedStatusPlanning, setSelectedStatusPlanning] = useState(null);

    useEffect(() => {
        const interval = setInterval(() => setNow(new Date()), 1000);
        return () => clearInterval(interval);
    }, []);

    useWorkLogListener((e) => {
        const eventUserId = e.userId !== undefined ? e.userId : e.user_id;
        if (eventUserId && Number(eventUserId) === Number(user.id)) {
            router.reload({
                only: ["planning"],
                preserveScroll: true,
                preserveState: true,
            });
        }
    });

    const handleDateChange = (newDate) => {
        router.get(
            route("planning.my"),
            { date: newDate },
            { preserveState: true },
        );
    };

    const prevDay = () => {
        const d = new Date(currentDate);
        d.setDate(d.getDate() - 1);
        handleDateChange(d.toISOString().split("T")[0]);
    };

    const nextDay = () => {
        const d = new Date(currentDate);
        d.setDate(d.getDate() + 1);
        handleDateChange(d.toISOString().split("T")[0]);
    };

    const openEditModal = (item) => {
        setSelectedPlanning(item);
        setIsEditModalOpen(true);
    };

    const openDeleteModal = (id) => {
        setItemToDelete(id);
        setIsDeleteModalOpen(true);
    };

    const confirmDelete = () => {
        if (!itemToDelete) return;
        router.delete(route("planning.destroy", itemToDelete), {
            preserveScroll: true,
            onSuccess: () => {
                setIsDeleteModalOpen(false);
                setItemToDelete(null);
            },
        });
    };

    const totalDuration = planning.reduce((acc, p) => {
        const diff =
            p.end_time && p.start_time
                ? new Date(`2000-01-01T${p.end_time}`).getTime() -
                  new Date(`2000-01-01T${p.start_time}`).getTime()
                : 0;
        return acc + Math.max(0, diff / (1000 * 60));
    }, 0);

    const formatDuration = (minutes) => {
        if (!minutes) return "0m";
        const h = Math.floor(minutes / 60);
        const m = minutes % 60;
        return h > 0 ? `${h}h ${m}m` : `${m}m`;
    };

    const getAssignmentActiveLog = (item, userId, allPlanningItems) => {
        const activeLogsForTask =
            item.task.work_logs?.filter(
                (log) => !log.ended_at && log.user_id === userId,
            ) || [];
        if (activeLogsForTask.length === 0) return undefined;

        const activeLog = activeLogsForTask[0];

        // Ensure the active log started on the scheduled date of this planning item
        const logDate = activeLog.started_at
            ? activeLog.started_at.split(" ")[0].split("T")[0]
            : "";
        if (logDate && logDate !== item.scheduled_date) {
            return undefined;
        }

        // 1. Try exact match
        const isExactMatch =
            String(activeLog.affaire_id || "") ===
                String(item.affaire_id || "") &&
            String(activeLog.business_tier_id || "") ===
                String(item.business_tier_id || "") &&
            String(activeLog.business_contact_id || "") ===
                String(item.business_contact_id || "");
        if (isExactMatch) return activeLog;

        // 2. Fallbacks if no exact match exists anywhere in planning
        const hasExactMatchInPlanning = allPlanningItems.some(
            (p) =>
                p.task_id === item.task_id &&
                String(p.affaire_id || "") ===
                    String(activeLog.affaire_id || "") &&
                String(p.business_tier_id || "") ===
                    String(activeLog.business_tier_id || "") &&
                String(p.business_contact_id || "") ===
                    String(activeLog.business_contact_id || ""),
        );

        if (!hasExactMatchInPlanning) {
            // Is there any generic item?
            const genericItems = allPlanningItems.filter(
                (p) =>
                    p.task_id === item.task_id &&
                    !p.affaire_id &&
                    !p.business_tier_id &&
                    !p.business_contact_id,
            );
            if (genericItems.length > 0) {
                const logDate = activeLog.started_at
                    ? activeLog.started_at.split(" ")[0].split("T")[0]
                    : "";
                let chosenGeneric = genericItems.find(
                    (p) => p.scheduled_date === logDate,
                );
                if (!chosenGeneric) chosenGeneric = genericItems[0];

                if (item === chosenGeneric) return activeLog;
                return undefined;
            }

            // If there's NO generic item either, just match the first item for this task
            const firstItemForTask = allPlanningItems.find(
                (p) => p.task_id === item.task_id,
            );
            if (firstItemForTask === item) return activeLog;
        }

        return undefined;
    };

    const calculateLiveDuration = (item, userId) => {
        const activeLog = getAssignmentActiveLog(item, userId, planning);
        if (!activeLog || !activeLog.started_at)
            return formatDuration(item.task.work_logs_sum_duration_minutes);

        // Ensure ISO format and treat as UTC if no offset is present
        let startedAtStr = activeLog.started_at.replace(" ", "T");
        if (!startedAtStr.includes("Z") && !startedAtStr.includes("+")) {
            startedAtStr += "Z";
        }

        const startTime = Date.parse(startedAtStr);
        if (isNaN(startTime))
            return formatDuration(item.task.work_logs_sum_duration_minutes);

        const diffMinutes = Math.floor((now.getTime() - startTime) / 60000);

        // If the difference is suspiciously large (e.g. > 1 week), it might be an old session
        // or a parsing error. We'll show the base sum in that case to avoid "535h"
        const finalDiff =
            diffMinutes > 0 && diffMinutes < 10080 ? diffMinutes : 0;

        const totalMinutes =
            (parseInt(item.task.work_logs_sum_duration_minutes) || 0) +
            finalDiff;
        return formatDuration(totalMinutes);
    };

    const formatDate = (dateStr) => {
        if (!dateStr) return "";
        const [year, month, day] = dateStr.split("-").map(Number);
        const date = new Date(year, month - 1, day);
        const options = {
            weekday: "long",
            year: "numeric",
            month: "long",
            day: "numeric",
        };
        return date.toLocaleDateString("en-US", options);
    };

    const filteredPlanning = planning.filter((item) => {
        if (!searchTerm) return true;
        const searchLower = searchTerm.toLowerCase();
        
        const taskTitle = item.task?.title?.toLowerCase() || "";
        const projectName = item.task?.project?.name?.toLowerCase() || "";
        const affaireTitle = item.affaire?.title?.toLowerCase() || "";
        
        const contact = item.business_contact || item.affaire?.business_contact || item.affaire?.businessContact || item.businessContact;
        const tier = item.business_tier || item.affaire?.business_tier || item.affaire?.businessTier || item.businessTier;
        
        const contactName = getContactName(contact).toLowerCase();
        const tierName = tier?.name?.toLowerCase() || "";
        
        return taskTitle.includes(searchLower) || 
               projectName.includes(searchLower) || 
               affaireTitle.includes(searchLower) || 
               contactName.includes(searchLower) || 
               tierName.includes(searchLower);
    });

    return (
        <AuthenticatedLayout header={null}>
            <Head title={t("execution.my_planning.title")} />

            <div className="max-w-4xl mx-auto space-y-10 py-6">
                {/* Header & Date Switcher */}
                <div className="flex flex-col md:flex-row md:items-center justify-between gap-6">
                    <div className="space-y-2">
                        <div className="flex items-center gap-2 px-3 py-1 bg-blue-500/10 border border-blue-500/20 rounded-full w-fit">
                            <span className="size-1.5 rounded-full bg-blue-500 animate-pulse" />
                            <span className="text-[10px] font-black text-blue-600 dark:text-blue-400 uppercase tracking-widest">
                                {t("execution.my_planning.your_daily_agenda")}
                            </span>
                        </div>
                        <h1 className="text-2xl font-black tracking-tight text-slate-900 dark:text-white leading-none">
                            {formatDate(currentDate)}
                        </h1>
                    </div>

                    <div className="flex items-center gap-3 w-full md:w-auto justify-end">
                        {canCreate && (
                            <Button
                                onClick={() => setIsAddModalOpen(true)}
                                className="bg-blue-600 hover:bg-blue-700 text-white rounded-2xl shadow-xl shadow-blue-600/20 px-6 h-12 font-black uppercase tracking-widest text-[11px] border-none"
                            >
                                <Plus className="size-4 mr-2" />
                                {t("execution.team_planning.plan_task")}
                            </Button>
                        )}

                        <div className="flex items-center gap-2 bg-white dark:bg-slate-900 p-2 rounded-[2rem] shadow-xl border border-slate-200 dark:border-slate-800">
                            <Button
                                variant="ghost"
                                size="icon"
                                onClick={prevDay}
                                className="rounded-2xl hover:bg-slate-100 dark:hover:bg-slate-800 size-12"
                            >
                                <ChevronLeft className="size-6" />
                            </Button>

                            <div className="flex items-center gap-2 px-6 py-2 bg-slate-50 dark:bg-slate-800 rounded-2xl border border-slate-200 dark:border-slate-700">
                                <CalendarIcon className="size-5 text-blue-500" />
                                <input
                                    type="date"
                                    value={currentDate}
                                    onChange={(e) =>
                                        handleDateChange(e.target.value)
                                    }
                                    className="bg-transparent border-none p-0 text-sm font-black focus:ring-0 w-32 cursor-pointer"
                                />
                            </div>

                            <Button
                                variant="ghost"
                                size="icon"
                                onClick={nextDay}
                                className="rounded-2xl hover:bg-slate-100 dark:hover:bg-slate-800 size-12"
                            >
                                <ChevronRight className="size-6" />
                            </Button>
                        </div>
                    </div>
                </div>

                {/* Search Bar */}
                <div className="relative w-full">
                    <Search className="absolute left-4 top-1/2 -translate-y-1/2 size-5 text-slate-400" />
                    <input
                        type="text"
                        placeholder={t("execution.my_planning.search", "Search...")}
                        value={searchTerm}
                        onChange={(e) => setSearchTerm(e.target.value)}
                        className="w-full pl-12 pr-4 py-3.5 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-2xl text-sm font-medium focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all outline-none shadow-sm"
                    />
                </div>

                {/* Timeline / Tasks List */}
                <div className="space-y-4">
                    {planning.length === 0 ? (
                        <div className="bg-white dark:bg-slate-900 rounded-[3rem] p-16 flex flex-col items-center justify-center text-center space-y-6 border border-dashed border-slate-200 dark:border-slate-800">
                            <div className="size-24 rounded-full bg-slate-50 dark:bg-slate-800 flex items-center justify-center">
                                <Layout className="size-10 text-slate-300 dark:text-slate-600" />
                            </div>
                            <div className="space-y-2">
                                <h3 className="text-2xl font-black text-slate-900 dark:text-white">
                                    {t("execution.my_planning.all_clear")}
                                </h3>
                                <p className="text-slate-500 font-medium">
                                    {t("execution.my_planning.no_tasks")}
                                </p>
                            </div>
                        </div>
                    ) : (
                        <div className="grid gap-6">
                            {filteredPlanning.map((item, index) => (
                                <Link
                                    key={item.id}
                                    href={route("tasks.show", [
                                        item.task_id,
                                        {
                                            task_assignment_id: item.id,
                                        },
                                    ])}
                                    className="group relative"
                                >
                                    <div className="bg-white dark:bg-slate-900 rounded-[2.5rem] p-8 shadow-sm hover:shadow-2xl hover:shadow-blue-500/10 border border-slate-200 dark:border-slate-800 transition-all duration-500 hover:-translate-y-1">
                                        <div className="flex flex-col md:flex-row gap-8 md:items-center">
                                            {/* Time Slot */}
                                            <div className="md:w-32 shrink-0 space-y-1">
                                                <div className="text-3xl font-black tabular-nums tracking-tighter text-slate-900 dark:text-white">
                                                    {item.start_time?.substring(
                                                        0,
                                                        5,
                                                    ) || "--:--"}
                                                </div>
                                                <div className="text-[10px] font-black text-slate-400 uppercase tracking-widest">
                                                    {item.end_time
                                                        ? t(
                                                              "execution.my_planning.to",
                                                              {
                                                                  time: item.end_time.substring(
                                                                      0,
                                                                      5,
                                                                  ),
                                                              },
                                                          )
                                                        : t(
                                                              "execution.my_planning.start_time",
                                                          )}
                                                </div>
                                            </div>

                                            {/* Vertical Divider (Desktop) */}
                                            <div className="hidden md:block w-px h-16 bg-slate-100 dark:bg-slate-800" />

                                            {/* Task Details */}
                                            <div className="flex-1 space-y-4">
                                                <div className="space-y-1">
                                                    <div className="flex items-center gap-3">
                                                        <h2 className="text-2xl font-black text-slate-900 dark:text-white leading-none">
                                                            {item.task.title}
                                                        </h2>
                                                        {item.severity ===
                                                            "urgent" && (
                                                            <div className="px-3 py-1 rounded-full text-[9px] font-black uppercase bg-red-600 text-white border border-red-600 shadow-lg shadow-red-500/20 animate-pulse">
                                                                URGENT
                                                            </div>
                                                        )}
                                                        <div
                                                            role="button"
                                                            onClick={(e) => {
                                                                e.preventDefault();
                                                                e.stopPropagation();
                                                                setSelectedStatusPlanning(item);
                                                                setIsStatusSwitcherOpen(true);
                                                            }}
                                                            className={cn(
                                                                "px-3 py-1 rounded-full text-[9px] font-black uppercase tracking-widest border flex items-center gap-1.5 hover:scale-105 active:scale-95 transition-all cursor-pointer select-none",
                                                                getAssignmentActiveLog(
                                                                    item,
                                                                    user.id,
                                                                    planning,
                                                                )
                                                                    ? "bg-rose-500/10 text-rose-600 border-rose-500/20 animate-pulse"
                                                                    : !(item.status_task_assignment || item.statusTaskAssignment)
                                                                      ? (item.status === "completed"
                                                                         ? "bg-emerald-500/10 text-emerald-600 border-emerald-500/20"
                                                                         : "bg-blue-500/10 text-blue-600 border-blue-500/20")
                                                                      : ""
                                                            )}
                                                            style={
                                                                !getAssignmentActiveLog(item, user.id, planning) && (item.status_task_assignment || item.statusTaskAssignment)
                                                                    ? {
                                                                          backgroundColor: `${(item.status_task_assignment || item.statusTaskAssignment).color}15`,
                                                                          color: (item.status_task_assignment || item.statusTaskAssignment).color,
                                                                          borderColor: `${(item.status_task_assignment || item.statusTaskAssignment).color}30`,
                                                                        }
                                                                    : {}
                                                            }
                                                        >
                                                            {getAssignmentActiveLog(
                                                                item,
                                                                user.id,
                                                                planning,
                                                            ) && (
                                                                <span className="size-1.5 rounded-full bg-rose-600 animate-ping" />
                                                            )}
                                                            {getAssignmentActiveLog(
                                                                item,
                                                                user.id,
                                                                planning,
                                                            )
                                                                ? t(
                                                                      "execution.my_planning.running",
                                                                  )
                                                                : translateStatus((item.status_task_assignment || item.statusTaskAssignment) ? (item.status_task_assignment || item.statusTaskAssignment).name : item.status)}
                                                        </div>
                                                        <div
                                                            className={cn(
                                                                "flex items-center gap-1.5 px-3 py-1 rounded-full text-[9px] font-black uppercase tracking-widest border",
                                                                getAssignmentActiveLog(
                                                                    item,
                                                                    user.id,
                                                                    planning,
                                                                )
                                                                    ? "bg-rose-600 text-white border-rose-600 shadow-lg shadow-rose-500/20"
                                                                    : "bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 border-slate-200 dark:border-slate-700",
                                                            )}
                                                        >
                                                            <Timer
                                                                className={cn(
                                                                    "size-3",
                                                                    getAssignmentActiveLog(
                                                                        item,
                                                                        user.id,
                                                                        planning,
                                                                    ) &&
                                                                        "animate-spin-slow",
                                                                )}
                                                            />
                                                            {getAssignmentActiveLog(
                                                                item,
                                                                user.id,
                                                                planning,
                                                            )
                                                                ? t(
                                                                      "execution.my_planning.live",
                                                                  )
                                                                : t(
                                                                      "execution.my_planning.tracked",
                                                                  )}
                                                            {calculateLiveDuration(
                                                                item,
                                                                user.id,
                                                            )}
                                                        </div>
                                                    </div>
                                                    <div className="flex flex-wrap items-center gap-x-6 gap-y-2">
                                                        <div className="flex items-center gap-2 text-slate-400">
                                                            <Layout className="size-3.5" />
                                                            <span className="text-[11px] font-bold uppercase tracking-wider">
                                                                {
                                                                    item.task
                                                                        .project
                                                                        ?.name
                                                                }
                                                            </span>
                                                        </div>
                                                        {item.affaire && (
                                                            <div className="flex items-center gap-2 text-blue-500 font-black">
                                                                <Briefcase className="size-3.5" />
                                                                <span className="text-[11px] uppercase tracking-wider">
                                                                    {
                                                                        item
                                                                            .affaire
                                                                            .title
                                                                    }
                                                                </span>
                                                            </div>
                                                        )}
                                                        {(() => {
                                                            const contact = item.business_contact || item.affaire?.business_contact || item.affaire?.businessContact || item.businessContact;
                                                            const tier = item.business_tier || item.affaire?.business_tier || item.affaire?.businessTier || item.businessTier;
                                                            const contactObj = contact || tier;

                                                            if (!contactObj) return null;

                                                            return (
                                                                <div className="flex items-center gap-1.5 px-2 py-1 bg-indigo-50 dark:bg-indigo-900/20 border border-indigo-100 dark:border-indigo-800/30 rounded-lg w-full max-w-fit">
                                                                    <div className="flex items-center gap-1.5">
                                                                        {contact ? (
                                                                            <UserIcon className="size-3 text-indigo-500" />
                                                                        ) : (
                                                                            <Building2 className="size-3 text-indigo-500" />
                                                                        )}
                                                                        <span className="text-[10px] font-black text-indigo-700 dark:text-indigo-300 truncate max-w-[150px]">
                                                                            {contact
                                                                                ? getContactName(contact)
                                                                                : tier?.name}
                                                                        </span>
                                                                    </div>
                                                                {/* Role Badges */}
                                                                <div className="flex items-center gap-0.5 pl-1.5 border-l border-indigo-200 dark:border-indigo-800/50">
                                                                    {item
                                                                        .business_tier
                                                                        ?.is_client && (
                                                                        <span
                                                                            className="w-3.5 h-3.5 rounded bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-400 text-[8px] font-black flex items-center justify-center"
                                                                            title={t(
                                                                                "execution.my_planning.client_title",
                                                                            )}
                                                                        >
                                                                            {t(
                                                                                "execution.my_planning.client",
                                                                            )}
                                                                        </span>
                                                                    )}
                                                                    {item
                                                                        .business_tier
                                                                        ?.is_prospect && (
                                                                        <span
                                                                            className="w-3.5 h-3.5 rounded bg-purple-100 dark:bg-purple-900/40 text-purple-700 dark:text-purple-400 text-[8px] font-black flex items-center justify-center"
                                                                            title={t(
                                                                                "execution.my_planning.prospect_title",
                                                                            )}
                                                                        >
                                                                            {t(
                                                                                "execution.my_planning.prospect",
                                                                            )}
                                                                        </span>
                                                                    )}
                                                                    {item
                                                                        .business_tier
                                                                        ?.is_supplier && (
                                                                        <span
                                                                            className="w-3.5 h-3.5 rounded bg-amber-100 dark:bg-amber-900/40 text-amber-700 dark:text-amber-400 text-[8px] font-black flex items-center justify-center"
                                                                            title={t(
                                                                                "execution.my_planning.supplier_title",
                                                                            )}
                                                                        >
                                                                            {t(
                                                                                "execution.my_planning.supplier",
                                                                            )}
                                                                        </span>
                                                                    )}
                                                                    {item.business_tier &&
                                                                        !item
                                                                            .business_tier
                                                                            .is_client &&
                                                                        !item
                                                                            .business_tier
                                                                            .is_prospect &&
                                                                        !item
                                                                            .business_tier
                                                                            .is_supplier && (
                                                                            <span
                                                                                className="w-3.5 h-3.5 rounded bg-green-100 dark:bg-green-900/40 text-green-700 dark:text-green-400 text-[8px] font-black flex items-center justify-center"
                                                                                title={t(
                                                                                    "execution.my_planning.other_title",
                                                                                )}
                                                                            >
                                                                                {t(
                                                                                    "execution.my_planning.other",
                                                                                )}
                                                                            </span>
                                                                        )}
                                                                    {item.business_contact && (
                                                                        <span
                                                                            className="w-3.5 h-3.5 rounded bg-slate-200 dark:bg-slate-800 text-slate-700 dark:text-slate-300 text-[8px] font-black flex items-center justify-center"
                                                                            title={t(
                                                                                "execution.my_planning.contact_person_title",
                                                                            )}
                                                                        >
                                                                            {t(
                                                                                "execution.my_planning.contact_person",
                                                                            )}
                                                                        </span>
                                                                    )}
                                                                </div>
                                                                </div>
                                                            );
                                                        })()}
                                                    </div>
                                                    
                                                    {/* Contact / Tier Details Section */}
                                                    {(() => {
                                                        const contact = item.business_contact || item.affaire?.business_contact || item.affaire?.businessContact || item.businessContact;
                                                        const tier = item.business_tier || item.affaire?.business_tier || item.affaire?.businessTier || item.businessTier;
                                                        const contactObj = contact || tier;
                                                        if (!contactObj) return null;
                                                        
                                                        const isIndividual = !!contact;
                                                        const latVal = parseFloat(contactObj.lat);
                                                        const lngVal = parseFloat(contactObj.lng);
                                                        const hasCoords = !isNaN(latVal) && !isNaN(lngVal) && Math.abs(latVal) > 0 && Math.abs(lngVal) > 0;
                                                        
                                                        return (
                                                            <div className="mt-3 p-4 bg-slate-50 dark:bg-slate-800/40 rounded-2xl border border-slate-100 dark:border-slate-800 space-y-3" onClick={(e) => { e.stopPropagation(); e.preventDefault(); }}>
                                                                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-xs">
                                                                    {/* Left side: phone / mail / web */}
                                                                    <div className="space-y-1.5">
                                                                        {contactObj.tel && (
                                                                            <div className="flex items-center gap-2 text-slate-600 dark:text-slate-300">
                                                                                <Phone className="size-3.5 text-slate-400 shrink-0" />
                                                                                <a href={`tel:${contactObj.tel}`} className="hover:text-blue-500 hover:underline font-bold">
                                                                                    {contactObj.tel}
                                                                                </a>
                                                                            </div>
                                                                        )}
                                                                        {isIndividual && contactObj.mobile && (
                                                                            <div className="flex items-center gap-2 text-slate-600 dark:text-slate-300">
                                                                                <Smartphone className="size-3.5 text-slate-400 shrink-0" />
                                                                                <a href={`tel:${contactObj.mobile}`} className="hover:text-blue-500 hover:underline font-bold">
                                                                                    {contactObj.mobile}
                                                                                </a>
                                                                            </div>
                                                                        )}
                                                                        {contactObj.email && (
                                                                            <div className="flex items-center gap-2 text-slate-600 dark:text-slate-300">
                                                                                <Mail className="size-3.5 text-slate-400 shrink-0" />
                                                                                <a href={`mailto:${contactObj.email}`} className="hover:text-blue-500 hover:underline font-bold truncate">
                                                                                    {contactObj.email}
                                                                                </a>
                                                                            </div>
                                                                        )}
                                                                        {contactObj.website && (
                                                                            <div className="flex items-center gap-2 text-slate-600 dark:text-slate-300">
                                                                                <Globe className="size-3.5 text-slate-400 shrink-0" />
                                                                                <a href={contactObj.website.startsWith('http') ? contactObj.website : `https://${contactObj.website}`} target="_blank" rel="noreferrer" className="hover:text-blue-500 hover:underline font-bold truncate">
                                                                                    {contactObj.website}
                                                                                </a>
                                                                            </div>
                                                                        )}
                                                                    </div>
                                                                    
                                                                    {/* Right side: address / map link */}
                                                                    <div className="space-y-1.5">
                                                                        {(contactObj.address || contactObj.town || contactObj.zip) && (
                                                                            <div className="flex items-start gap-2 text-slate-600 dark:text-slate-300">
                                                                                <MapPin className="size-3.5 text-slate-400 shrink-0 mt-0.5" />
                                                                                <div className="flex flex-col font-bold">
                                                                                    <span>{contactObj.address}</span>
                                                                                    <span>
                                                                                        {contactObj.zip || ""} {contactObj.town || ""}
                                                                                        {contactObj.country ? `, ${contactObj.country}` : ""}
                                                                                    </span>
                                                                                </div>
                                                                            </div>
                                                                        )}
                                                                        
                                                                        {/* Google Maps link */}
                                                                        {(hasCoords || contactObj.map_link) && (
                                                                            <div className="pt-0.5">
                                                                                <a 
                                                                                    href={hasCoords ? `https://www.google.com/maps?q=${latVal},${lngVal}` : contactObj.map_link}
                                                                                    target="_blank"
                                                                                    rel="noreferrer"
                                                                                    className="text-[10px] font-black text-blue-600 hover:text-blue-700 dark:text-blue-400 hover:underline uppercase tracking-wider flex items-center gap-1"
                                                                                >
                                                                                    <ExternalLink className="size-3" />
                                                                                    Google Maps
                                                                                </a>
                                                                            </div>
                                                                        )}
                                                                    </div>
                                                                </div>

                                                                {/* Leaflet interactive map */}
                                                                {hasCoords && (
                                                                    <div className="pt-1.5 border-t border-slate-200 dark:border-slate-700 z-10 relative">
                                                                        <div className="w-full h-32 rounded-xl overflow-hidden border border-slate-200 dark:border-slate-700">
                                                                            <MapContainer
                                                                                center={[latVal, lngVal]}
                                                                                zoom={12}
                                                                                scrollWheelZoom={false}
                                                                                style={{ height: "100%", width: "100%" }}
                                                                                key={`planning-map-${contactObj.id}-${latVal}-${lngVal}`}
                                                                            >
                                                                                <TileLayer
                                                                                    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
                                                                                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                                                                                />
                                                                                <Marker position={[latVal, lngVal]}>
                                                                                    <Popup>
                                                                                        <div className="text-[10px] font-bold">
                                                                                            {isIndividual ? `${contactObj.firstname || ""} ${contactObj.lastname || ""}`.trim() : contactObj.name}
                                                                                        </div>
                                                                                    </Popup>
                                                                                </Marker>
                                                                            </MapContainer>
                                                                        </div>
                                                                    </div>
                                                                )}
                                                            </div>
                                                        );
                                                    })()}

                                                    {item.description && (
                                                        <div className="mt-3 p-3 bg-slate-50 dark:bg-slate-800/50 rounded-xl border border-slate-100 dark:border-slate-800">
                                                            <p className="text-xs font-medium text-slate-500 dark:text-slate-400 leading-relaxed italic">
                                                                {
                                                                    item.description
                                                                }
                                                            </p>
                                                        </div>
                                                    )}
                                                </div>
                                            </div>

                                            {/* Action Icons */}
                                            <div className="flex flex-col gap-2">
                                                {canEdit && (
                                                    <Button
                                                        variant="ghost"
                                                        size="icon"
                                                        className="size-10 rounded-xl hover:bg-blue-100 hover:text-blue-600 dark:hover:bg-blue-900/30"
                                                        onClick={(e) => {
                                                            e.preventDefault();
                                                            openEditModal(item);
                                                        }}
                                                    >
                                                        <Edit className="size-4" />
                                                    </Button>
                                                )}
                                                {canDelete && (
                                                    <Button
                                                        variant="ghost"
                                                        size="icon"
                                                        className="size-10 rounded-xl hover:bg-red-100 hover:text-red-600 dark:hover:bg-red-900/30"
                                                        onClick={(e) => {
                                                            e.preventDefault();
                                                            openDeleteModal(
                                                                item.id,
                                                            );
                                                        }}
                                                    >
                                                        <Trash2 className="size-4" />
                                                    </Button>
                                                )}
                                                <div className="size-10 rounded-xl bg-slate-50 dark:bg-slate-800 flex items-center justify-center text-slate-400 group-hover:bg-blue-600 group-hover:text-white group-hover:scale-110 transition-all duration-300 mt-auto">
                                                    <ArrowRight className="size-5" />
                                                </div>
                                            </div>
                                        </div>

                                        {/* Status Progress Bar */}
                                        <div className="absolute bottom-0 left-8 right-8 h-1 bg-slate-100 dark:bg-slate-800 rounded-full overflow-hidden translate-y-1/2">
                                            <div
                                                className={cn(
                                                    "h-full transition-all duration-1000",
                                                    (item.status === "completed" || ((item.status_task_assignment || item.statusTaskAssignment) && ((item.status_task_assignment || item.statusTaskAssignment).name === "completed" || (item.status_task_assignment || item.statusTaskAssignment).name === "traité" || (item.status_task_assignment || item.statusTaskAssignment).name === "traite")))
                                                        ? "bg-emerald-500 w-full"
                                                        : "bg-blue-500 w-1/3",
                                                )}
                                                style={
                                                    (item.status_task_assignment || item.statusTaskAssignment)
                                                        ? {
                                                              backgroundColor: (item.status_task_assignment || item.statusTaskAssignment).color,
                                                              width: ((item.status_task_assignment || item.statusTaskAssignment).name === "completed" || (item.status_task_assignment || item.statusTaskAssignment).name === "traité" || (item.status_task_assignment || item.statusTaskAssignment).name === "traite")
                                                                  ? "100%"
                                                                  : "33.3%"
                                                          }
                                                        : {}
                                                }
                                            />
                                        </div>
                                    </div>
                                </Link>
                            ))}
                        </div>
                    )}
                </div>

                {/* Legend / Daily Goal Card */}
                <div className="grid md:grid-cols-2 gap-6">
                    <div className="p-8 rounded-[2.5rem] bg-gradient-to-br from-blue-600 to-indigo-700 text-white shadow-xl shadow-blue-500/20">
                        <Timer className="size-10 mb-4 opacity-50" />
                        <h4 className="text-xl font-black mb-2">
                            {t("execution.my_planning.ready_to_start")}
                        </h4>
                        <p className="text-blue-100 text-sm font-medium mb-6">
                            {t("execution.my_planning.click_on_any")}
                        </p>
                        {planning.length > 0 ? (
                            <Link
                                href={route("tasks.show", [
                                    planning[0].task_id,
                                    {
                                        task_assignment_id: planning[0].id,
                                    },
                                ])}
                                className="inline-flex items-center justify-center rounded-2xl font-black w-full bg-white text-blue-600 hover:bg-blue-50 h-12 transition-colors shadow-lg"
                            >
                                {t("execution.my_planning.go_to_first")}
                            </Link>
                        ) : (
                            <Link
                                href={route("tasks.index")}
                                className="inline-flex items-center justify-center rounded-2xl font-black w-full bg-white text-blue-600 hover:bg-blue-50 h-12 transition-colors shadow-lg"
                            >
                                {t("execution.my_planning.view_all")}
                            </Link>
                        )}
                    </div>
                    <div className="p-8 rounded-[2.5rem] bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800">
                        <CheckCircle2 className="size-10 mb-4 text-emerald-500" />
                        <h4 className="text-xl font-black mb-2 text-slate-900 dark:text-white">
                            {t("execution.my_planning.daily_goal")}
                        </h4>
                        <p className="text-slate-500 text-sm font-medium">
                            {t("execution.my_planning.you_have_tasks", {
                                count: planning.length,
                            })}
                        </p>
                    </div>
                </div>
            </div>

            <PlanTaskModal
                show={isAddModalOpen}
                onClose={() => setIsAddModalOpen(false)}
                users={allUsers || []}
                projects={projects || []}
                affaires={affaires || []}
                businessContacts={businessContacts || []}
                availableTasks={availableTasks || []}
                currentDate={currentDate}
                userId={user.id}
                hideAssignToUser={true}
            />

            <EditPlanModal
                show={isEditModalOpen}
                onClose={() => {
                    setIsEditModalOpen(false);
                    setSelectedPlanning(null);
                }}
                planning={selectedPlanning}
                users={allUsers || []}
                projects={projects || []}
                affaires={affaires || []}
                businessContacts={businessContacts || []}
                availableTasks={availableTasks || []}
                hideAssignToUser={true}
            />

            <DeletePlanModal
                show={isDeleteModalOpen}
                onClose={() => {
                    setIsDeleteModalOpen(false);
                    setItemToDelete(null);
                }}
                onConfirm={confirmDelete}
            />

            <StatusSwitcherModal
                show={isStatusSwitcherOpen}
                onClose={() => {
                    setIsStatusSwitcherOpen(false);
                    setSelectedStatusPlanning(null);
                }}
                planning={selectedStatusPlanning}
            />
        </AuthenticatedLayout>
    );
}