"use client";

import React, { useEffect, useMemo, useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Label } from "@/components/ui/label";

import { motion } from "framer-motion";

const STORAGE_KEY = "schichtplan_dispo_board_v2";

function getCurrentWeekStart() {
  const now = new Date();
  const day = now.getDay();
  const diff = day === 0 ? -6 : 1 - day;
  const monday = new Date(now);
  monday.setDate(now.getDate() + diff);
  return monday.toISOString().slice(0, 10);
}

function formatDateLabel(dateString) {
  const date = new Date(`${dateString}T12:00:00`);
  return new Intl.DateTimeFormat("cs-CZ", {
    day: "2-digit",
    month: "2-digit",
    year: "numeric",
  }).format(date);
}

function getWeekDates(weekStart) {
  const start = new Date(`${weekStart}T12:00:00`);
  return days.map((day, index) => {
    const current = new Date(start);
    current.setDate(start.getDate() + index);
    const iso = current.toISOString().slice(0, 10);
    return {
      day,
      iso,
      label: formatDateLabel(iso),
    };
  });
}

const days = ["Pondělí", "Úterý", "Středa", "Čtvrtek", "Pátek", "Sobota", "Neděle"];
const shifts = [
  { id: "rano", label: "8:00–16.30:00", short: "Ranní", icon: "🌅" },
  { id: "odpo", label: "16:30–22:30", short: "Odpolední", icon: "🌆" },
  
];

function IconText({ children, className = "" }) {
  return <span className={`inline-flex h-5 w-5 items-center justify-center text-base leading-none ${className}`}>{children}</span>;
}

function ProgressBar({ label, value, max, rightLabel, tone = "slate" }) {
  const percent = max > 0 ? Math.min(100, Math.round((value / max) * 100)) : 0;
  const toneClass = {
    slate: "bg-slate-700",
    emerald: "bg-emerald-600",
    amber: "bg-amber-500",
    sky: "bg-sky-600",
    red: "bg-red-500",
  }[tone] || "bg-slate-700";

  return (
    <div className="space-y-1">
      <div className="flex items-center justify-between gap-3 text-xs">
        <span className="truncate font-medium text-slate-700">{label}</span>
        <span className="shrink-0 text-slate-500">{rightLabel || `${value}/${max}`}</span>
      </div>
      <div className="h-2.5 overflow-hidden rounded-full bg-slate-200">
        <div className={`h-full rounded-full ${toneClass}`} style={{ width: `${percent}%` }} />
      </div>
    </div>
  );
}

const initialDrivers = [
  { id: "d1", name: "Řidič 1", phone: "", note: "" },
  { id: "d2", name: "Řidič 2", phone: "", note: "" },
  { id: "d3", name: "Řidič 3", phone: "", note: "" },
  { id: "d4", name: "Řidič 4", phone: "", note: "" },
];

const initialVehicles = [
  { id: "v1", name: "Octavia", plate: "8AJ 1629", note: "Hlavní vozidlo" },
  { id: "v2", name: "Fabia", plate: "", note: "Rezerva / město" },
  { id: "v3", name: "Mercedes", plate: "", note: "Transfer / VIP" },
];

const createAssignment = (driverId = "", vehicleId = "", note = "") => ({
  id: `a${Date.now()}_${Math.random().toString(36).slice(2, 8)}`,
  driverId,
  vehicleId,
  note,
});

const makeEmptySchedule = () => {
  const schedule = {};
  days.forEach((day) => {
    schedule[day] = {};
    shifts.filter((shift) => isShiftAvailableOnDay(shift, day)).forEach((shift) => {
      schedule[day][shift.id] = [];
    });
  });
  return schedule;
};

const normalizeSchedule = (savedSchedule) => {
  const next = makeEmptySchedule();
  if (!savedSchedule || typeof savedSchedule !== "object") return next;

  days.forEach((day) => {
    const oldDay = savedSchedule[day] || {};

    // Nový formát: všechny směny ve všech dnech
    shifts.forEach((shift) => {
      if (Array.isArray(oldDay[shift.id])) {
        next[day][shift.id] = oldDay[shift.id];
      }
    });

    if (Array.isArray(oldDay.den) || Array.isArray(oldDay.odpo) || Array.isArray(oldDay.noc)) {
      return;
    }

    // Starý formát: ranní + odpolední. Aby aplikace nespadla,
    // převezmeme ranní směnu jako denní a staré odpolední ignorujeme.
    if (Array.isArray(oldDay.frueh)) {
      next[day].den = oldDay.frueh.map((entry) => ({
        ...entry,
        note: entry.note || "Převedeno ze staré ranní směny na 6:00–16:00",
      }));
    }
  });

  return next;
};

function getDriver(drivers, id) {
  return drivers.find((d) => d.id === id);
}

function getVehicle(vehicles, id) {
  return vehicles.find((v) => v.id === id);
}

function getDriverName(drivers, id) {
  return getDriver(drivers, id)?.name || "Bez řidiče";
}

function getVehicleName(vehicles, id) {
  const v = getVehicle(vehicles, id);
  if (!v) return "Bez vozidla";
  return v.plate ? `${v.name} (${v.plate})` : v.name;
}

function isShiftAvailableOnDay(shift, day) {
  if (!shift.onlyDays) return true;
  return shift.onlyDays.includes(day);
}

function isAssignmentConflict(schedule, day, shiftId, entry, drivers, vehicles) {
  const assignmentsSameDay = shifts.flatMap((shift) => (schedule?.[day]?.[shift.id] || []).map((a) => ({ ...a, shiftId: shift.id })));

  const driverConflict = entry.driverId
    ? assignmentsSameDay.some(
        (a) => a.id !== entry.id && a.driverId === entry.driverId && a.shiftId !== shiftId
      )
    : false;

  const vehicleConflict = entry.vehicleId
    ? assignmentsSameDay.some(
        (a) => a.id !== entry.id && a.vehicleId === entry.vehicleId && a.shiftId !== shiftId
      )
    : false;

  return {
    driverConflict,
    vehicleConflict,
    hasConflict: driverConflict || vehicleConflict,
    driverName: getDriverName(drivers, entry.driverId),
    vehicleName: getVehicleName(vehicles, entry.vehicleId),
  };
}

function PoolChip({ label, sublabel, onDragStart, onDelete }) {
  return (
    <div
      draggable
      onDragStart={onDragStart}
      className="flex items-center justify-between gap-2 rounded-2xl border bg-white px-3 py-3 text-sm shadow-sm cursor-grab active:cursor-grabbing"
    >
      <div className="flex min-w-0 items-center gap-2">
        <IconText className="text-slate-400">↕</IconText>
        <div className="min-w-0">
          <div className="truncate font-medium">{label}</div>
          {sublabel ? <div className="truncate text-xs text-slate-500">{sublabel}</div> : null}
        </div>
      </div>
      {onDelete && (
        <button onClick={onDelete} className="rounded-md p-1 hover:bg-slate-100" type="button">
          <IconText className="text-slate-500">🗑</IconText>
        </button>
      )}
    </div>
  );
}

export default function SchichtplanFahrerApp() {
  const [drivers, setDrivers] = useState(initialDrivers);
  const [vehicles, setVehicles] = useState(initialVehicles);
  const [schedule, setSchedule] = useState(makeEmptySchedule());
  const [newDriver, setNewDriver] = useState({ name: "", phone: "", note: "" });
  const [newVehicle, setNewVehicle] = useState({ name: "", plate: "", note: "" });
  const [dragItem, setDragItem] = useState(null);
  const [copiedAssignment, setCopiedAssignment] = useState(null);
  const [loaded, setLoaded] = useState(false);
  const [showWeeklyOverview, setShowWeeklyOverview] = useState(false);
  const [weekStart, setWeekStart] = useState(getCurrentWeekStart());
  const [actionMessage, setActionMessage] = useState("");

  useEffect(() => {
    if (typeof window === "undefined") return;

    try {
      const raw = window.localStorage.getItem(STORAGE_KEY);
      if (raw) {
        const parsed = JSON.parse(raw);
        setDrivers(parsed.drivers || initialDrivers);
        setVehicles(parsed.vehicles || initialVehicles);
        setSchedule(normalizeSchedule(parsed.schedule));
        setWeekStart(parsed.weekStart || getCurrentWeekStart());
      }
    } catch (e) {
      console.error("Chyba při načítání", e);
      setActionMessage("Nepodařilo se načíst uložená data.");
    } finally {
      setLoaded(true);
    }
  }, []);

  useEffect(() => {
    if (!loaded || typeof window === "undefined") return;

    try {
      window.localStorage.setItem(
        STORAGE_KEY,
        JSON.stringify({
          drivers,
          vehicles,
          schedule,
          weekStart,
        })
      );
    } catch (e) {
      console.error("Chyba při ukládání", e);
    }
  }, [drivers, vehicles, schedule, weekStart, loaded]);

  const addDriver = () => {
    if (!newDriver.name.trim()) return;
    setDrivers((prev) => [
      ...prev,
      { id: `d${Date.now()}`, name: newDriver.name.trim(), phone: newDriver.phone.trim(), note: newDriver.note.trim() },
    ]);
    setNewDriver({ name: "", phone: "", note: "" });
  };

  const addVehicle = () => {
    if (!newVehicle.name.trim()) return;
    setVehicles((prev) => [
      ...prev,
      { id: `v${Date.now()}`, name: newVehicle.name.trim(), plate: newVehicle.plate.trim(), note: newVehicle.note.trim() },
    ]);
    setNewVehicle({ name: "", plate: "", note: "" });
  };

  const deleteDriver = (driverId) => {
    setDrivers((prev) => prev.filter((d) => d.id !== driverId));
    setSchedule((prev) => {
      const next = structuredClone(prev);
      days.forEach((day) => {
        shifts.filter((shift) => isShiftAvailableOnDay(shift, day)).forEach((shift) => {
          next[day][shift.id] = (next[day][shift.id] || []).map((a) =>
            a.driverId === driverId ? { ...a, driverId: "" } : a
          );
        });
      });
      return next;
    });
  };

  const deleteVehicle = (vehicleId) => {
    setVehicles((prev) => prev.filter((v) => v.id !== vehicleId));
    setSchedule((prev) => {
      const next = structuredClone(prev);
      days.forEach((day) => {
        shifts.filter((shift) => isShiftAvailableOnDay(shift, day)).forEach((shift) => {
          next[day][shift.id] = (next[day][shift.id] || []).map((a) =>
            a.vehicleId === vehicleId ? { ...a, vehicleId: "" } : a
          );
        });
      });
      return next;
    });
  };

  const addAssignment = (day, shiftId, preset = {}) => {
    setSchedule((prev) => ({
      ...prev,
      [day]: {
        ...prev[day],
        [shiftId]: [...prev[day][shiftId], createAssignment(preset.driverId || "", preset.vehicleId || "", preset.note || "")],
      },
    }));
  };

  const updateAssignment = (day, shiftId, assignmentId, field, value) => {
    setSchedule((prev) => ({
      ...prev,
      [day]: {
        ...prev[day],
        [shiftId]: prev[day][shiftId].map((a) =>
          a.id === assignmentId ? { ...a, [field]: value } : a
        ),
      },
    }));
  };

  const deleteAssignment = (day, shiftId, assignmentId) => {
    setSchedule((prev) => ({
      ...prev,
      [day]: {
        ...prev[day],
        [shiftId]: prev[day][shiftId].filter((a) => a.id !== assignmentId),
      },
    }));
  };

  const moveAssignment = (fromDay, fromShiftId, toDay, toShiftId, assignmentId) => {
    setSchedule((prev) => {
      const next = structuredClone(prev);
      const sourceList = next[fromDay][fromShiftId];
      const idx = sourceList.findIndex((a) => a.id === assignmentId);
      if (idx === -1) return prev;
      const [moved] = sourceList.splice(idx, 1);
      next[toDay][toShiftId].push(moved);
      return next;
    });
  };

  const onDropToCell = (day, shiftId) => {
    if (!dragItem) return;

    if (dragItem.kind === "driver") {
      addAssignment(day, shiftId, { driverId: dragItem.id });
    }

    if (dragItem.kind === "vehicle") {
      addAssignment(day, shiftId, { vehicleId: dragItem.id });
    }

    if (dragItem.kind === "assignment") {
      moveAssignment(dragItem.fromDay, dragItem.fromShiftId, day, shiftId, dragItem.assignment.id);
    }

    setDragItem(null);
  };

  const onDropToTrash = () => {
    if (!dragItem) return;

    if (dragItem.kind === "assignment") {
      deleteAssignment(dragItem.fromDay, dragItem.fromShiftId, dragItem.assignment.id);
    }

    if (dragItem.kind === "driver") {
      deleteDriver(dragItem.id);
    }

    if (dragItem.kind === "vehicle") {
      deleteVehicle(dragItem.id);
    }

    setDragItem(null);
  };

  const weekDates = useMemo(() => getWeekDates(weekStart), [weekStart]);
  const weekRangeLabel = useMemo(() => {
    if (!weekDates.length) return "";
    return `${weekDates[0].label} – ${weekDates[weekDates.length - 1].label}`;
  }, [weekDates]);

  const stats = useMemo(() => {
    const driverCounts = {};
    const vehicleCounts = {};
    const conflicts = [];

    days.forEach((day) => {
      const availableShifts = shifts.filter((shift) => isShiftAvailableOnDay(shift, day));
      const dayDriverUse = {};
      const dayVehicleUse = {};

      availableShifts.forEach((shift) => {
        const entries = schedule?.[day]?.[shift.id] || [];

        entries.forEach((entry) => {
          if (entry.driverId) {
            driverCounts[entry.driverId] = (driverCounts[entry.driverId] || 0) + 1;
            dayDriverUse[entry.driverId] = (dayDriverUse[entry.driverId] || []).concat(shift.label);
          }

          if (entry.vehicleId) {
            vehicleCounts[entry.vehicleId] = (vehicleCounts[entry.vehicleId] || 0) + 1;
            dayVehicleUse[entry.vehicleId] = (dayVehicleUse[entry.vehicleId] || []).concat(shift.label);
          }
        });
      });

      Object.entries(dayDriverUse).forEach(([driverId, usedShifts]) => {
        if (usedShifts.length > 1) {
          conflicts.push(`Řidič ${getDriverName(drivers, driverId)} je v ${day} přiřazen vícekrát: ${usedShifts.join(", ")}`);
        }
      });

      Object.entries(dayVehicleUse).forEach(([vehicleId, usedShifts]) => {
        if (usedShifts.length > 1) {
          conflicts.push(`Vozidlo ${getVehicleName(vehicles, vehicleId)} je v ${day} obsazeno vícekrát: ${usedShifts.join(", ")}`);
        }
      });
    });

    return { driverCounts, vehicleCounts, conflicts };
  }, [schedule, drivers, vehicles, weekDates]);

  const graphicsStats = useMemo(() => {
    const shiftUsage = shifts.map((shift) => {
      const count = days.reduce((sum, day) => sum + (schedule?.[day]?.[shift.id] || []).length, 0);
      return { ...shift, count };
    });

    const dayUsage = days.map((day) => {
      const count = shifts.reduce((sum, shift) => sum + (schedule?.[day]?.[shift.id] || []).length, 0);
      const dateInfo = weekDates.find((item) => item.day === day);
      return { day, date: dateInfo?.label || "", count };
    });

    const driverUsage = drivers.map((driver) => ({
      id: driver.id,
      name: driver.name,
      count: stats.driverCounts[driver.id] || 0,
    }));

    const vehicleUsage = vehicles.map((vehicle) => ({
      id: vehicle.id,
      name: vehicle.plate ? `${vehicle.name} (${vehicle.plate})` : vehicle.name,
      count: stats.vehicleCounts[vehicle.id] || 0,
    }));

    const plannedCells = days.reduce(
      (sum, day) => sum + shifts.reduce((inner, shift) => inner + ((schedule?.[day]?.[shift.id] || []).length > 0 ? 1 : 0), 0),
      0
    );
    const totalCells = days.length * shifts.length;

    return { shiftUsage, dayUsage, driverUsage, vehicleUsage, plannedCells, totalCells };
  }, [schedule, drivers, vehicles, stats, weekDates]);

  const fillExample = () => {
    const next = makeEmptySchedule();
    days.forEach((day) => {
      next[day].rano = [
        createAssignment(drivers[0]?.id || "", vehicles[0]?.id || "", "Ranní směna 6:00–14:00"),
        createAssignment(drivers[1]?.id || "", vehicles[1]?.id || "", "Centrum / hotely"),
      ];

      next[day].odpo = [
        createAssignment(drivers[2]?.id || "", vehicles[2]?.id || "", "Odpolední směna 14:30–22:30"),
      ];
    });
    setSchedule(next);
  };

  const clearAll = () => {
    setSchedule(makeEmptySchedule());
    setActionMessage("Plán byl vymazán.");
  };

  const handleSave = () => {
    if (typeof window === "undefined") return;

    try {
      window.localStorage.setItem(
        STORAGE_KEY,
        JSON.stringify({ drivers, vehicles, schedule, weekStart })
      );
      setActionMessage("Data byla uložena.");
    } catch (e) {
      console.error("Chyba při ručním ukládání", e);
      setActionMessage("Uložení se nepodařilo.");
    }
  };

  const handlePrint = () => {
    if (typeof window === "undefined") return;

    const printableContent = document.getElementById("print-area");
    if (!printableContent) {
      setActionMessage("Nejprve otevřete týdenní přehled a pak zkuste tisk znovu.");
      return;
    }

    const printWindow = window.open("", "_blank", "width=1400,height=900");
    if (!printWindow) {
      setActionMessage("Prohlížeč zablokoval tiskové okno.");
      return;
    }

    printWindow.document.write(`
      <html>
        <head>
          <title>Týdenní přehled směn</title>
          <meta charset="utf-8" />
          <style>
            body { font-family: Arial, sans-serif; margin: 20px; color: #0f172a; }
            .print-title { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
            .print-subtitle { font-size: 14px; margin-bottom: 16px; color: #475569; }
            * { box-sizing: border-box; }
            table { width: 100%; border-collapse: collapse; table-layout: fixed; }
            th, td { border: 1px solid #cbd5e1; padding: 8px; vertical-align: top; font-size: 12px; }
            @media print { body { margin: 10px; } }
          </style>
        </head>
        <body>
          <div class="print-title">Celotýdenní přehled směn</div>
          <div class="print-subtitle">Týden: ${weekRangeLabel}</div>
          ${printableContent.innerHTML}
        </body>
      </html>
    `);
    printWindow.document.close();
    printWindow.focus();
    setTimeout(() => {
      printWindow.print();
    }, 250);
  };

  const resetEverything = () => {
    if (typeof window !== "undefined") {
      try {
        window.localStorage.removeItem(STORAGE_KEY);
      } catch (e) {
        console.error("Chyba při mazání uložených dat", e);
      }
    }

    setDrivers(initialDrivers);
    setVehicles(initialVehicles);
    setSchedule(makeEmptySchedule());
    setWeekStart(getCurrentWeekStart());
    setCopiedAssignment(null);
    setShowWeeklyOverview(false);
    setActionMessage("Všechna data byla obnovena do výchozího stavu.");
  };

  const totalAssignments = useMemo(() => {
    return days.reduce((sum, day) => sum + shifts.reduce((inner, shift) => inner + (schedule?.[day]?.[shift.id] || []).length, 0), 0);
  }, [schedule]);

  const driverOutputs = useMemo(() => {
    return drivers.map((driver) => {
      const plan = [];

      days.forEach((day) => {
        shifts.filter((shift) => isShiftAvailableOnDay(shift, day)).forEach((shift) => {
          (schedule?.[day]?.[shift.id] || []).forEach((entry) => {
            if (entry.driverId === driver.id) {
              const dateInfo = weekDates.find((item) => item.day === day);
              plan.push({
                day,
                date: dateInfo?.label || "",
                shift: shift.short,
                time: shift.label,
                note: entry.note || "",
              });
            }
          });
        });
      });

      return {
        ...driver,
        plan,
      };
    });
  }, [drivers, schedule, weekDates]);

  const weeklyOverview = useMemo(() => {
    return shifts.filter((shift) => shift.onlyDays ? true : true).map((shift) => ({
      ...shift,
      days: days.map((day) => {
        const dateInfo = weekDates.find((item) => item.day === day);
        const entries = schedule?.[day]?.[shift.id] || [];
        const assignedDriverIds = entries.map((entry) => entry.driverId).filter(Boolean);
        const assignedVehicleIds = entries.map((entry) => entry.vehicleId).filter(Boolean);
        const freeDrivers = drivers.filter((driver) => !assignedDriverIds.includes(driver.id));
        const freeVehicles = vehicles.filter((vehicle) => !assignedVehicleIds.includes(vehicle.id));

        return {
          day,
          date: dateInfo?.label || "",
          entryCount: entries.length,
          isFree: entries.length === 0,
          assignedDrivers: entries
            .map((entry) => getDriverName(drivers, entry.driverId))
            .filter((name) => name !== "Bez řidiče"),
          assignedVehicles: entries
            .map((entry) => getVehicleName(vehicles, entry.vehicleId))
            .filter((name) => name !== "Bez vozidla"),
          freeDrivers: freeDrivers.map((driver) => driver.name),
          freeVehicles: freeVehicles.map((vehicle) => (vehicle.plate ? `${vehicle.name} (${vehicle.plate})` : vehicle.name)),
        };
      }),
    }));
  }, [schedule, drivers, vehicles]);

  return (
    <div className="min-h-screen bg-slate-100 p-4 md:p-8">
      <div className="mx-auto max-w-[1800px] space-y-6">
        <div className="flex flex-col gap-4 xl:flex-row xl:items-center xl:justify-between">
          <div>
            <h1 className="text-3xl font-bold tracking-tight">Dispečerská tabule řidičů</h1>
            <p className="mt-1 text-sm text-slate-600">
              Týdenní plánování jako skutečná tabule s funkcí drag & drop, barevným označením konfliktů, košem a automatickým ukládáním.
            </p>
          </div>
          <div className="flex flex-wrap items-center gap-2">
            <div className="flex items-center gap-2 rounded-2xl border bg-white px-3 py-2">
              <Label className="text-sm">Začátek týdne</Label>
              <Input type="date" value={weekStart} onChange={(e) => setWeekStart(e.target.value)} className="w-[170px]" />
            </div>
            <Button variant="outline" onClick={fillExample}><IconText className="mr-2">📄</IconText>Ukázka</Button>
            <Button variant="outline" onClick={() => setShowWeeklyOverview((prev) => !prev)}><IconText className="mr-2">📅</IconText>{showWeeklyOverview ? "Skrýt týdenní přehled" : "Týdenní přehled"}</Button>
            <Button variant="outline" onClick={handlePrint}><IconText className="mr-2">🖨</IconText>Tisk / PDF</Button>
            <Button variant="outline" onClick={clearAll}><IconText className="mr-2">↺</IconText>Vymazat plán</Button>
            <Button variant="outline" onClick={resetEverything}><IconText className="mr-2">🗑</IconText>Obnovit vše</Button>
            <Button variant="outline" onClick={handleSave}><IconText className="mr-2">💾</IconText>Uložit</Button>
          </div>
        </div>

        {actionMessage ? (
          <div className="rounded-2xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-800">
            {actionMessage}
          </div>
        ) : null}

        <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-5">
          <Card className="rounded-3xl shadow-sm">
            <CardContent className="flex items-center gap-3 p-5">
              <IconText>👤</IconText>
              <div>
                <div className="text-sm text-slate-500">Řidiči</div>
                <div className="text-2xl font-semibold">{drivers.length}</div>
              </div>
            </CardContent>
          </Card>
          <Card className="rounded-3xl shadow-sm">
            <CardContent className="flex items-center gap-3 p-5">
              <IconText>🚕</IconText>
              <div>
                <div className="text-sm text-slate-500">Vozidla</div>
                <div className="text-2xl font-semibold">{vehicles.length}</div>
              </div>
            </CardContent>
          </Card>
          <Card className="rounded-3xl shadow-sm">
            <CardContent className="flex items-center gap-3 p-5">
              <IconText>📅</IconText>
              <div>
                <div className="text-sm text-slate-500">Směny</div>
                <div className="text-2xl font-semibold">21</div>
              </div>
            </CardContent>
          </Card>
          <Card className="rounded-3xl shadow-sm">
            <CardContent className="flex items-center gap-3 p-5">
              <IconText>📋</IconText>
              <div>
                <div className="text-sm text-slate-500">Přiřazení</div>
                <div className="text-2xl font-semibold">{totalAssignments}</div>
              </div>
            </CardContent>
          </Card>
          <Card className="rounded-3xl shadow-sm">
            <CardContent className="flex items-center gap-3 p-5">
              <IconText>⚠️</IconText>
              <div>
                <div className="text-sm text-slate-500">Konflikty</div>
                <div className="text-2xl font-semibold">{stats.conflicts.length}</div>
              </div>
            </CardContent>
          </Card>
        </div>

        <div className="grid gap-4 xl:grid-cols-[1.1fr_1fr_1fr]">
          <Card className="rounded-3xl shadow-sm">
            <CardHeader className="pb-2">
              <CardTitle className="flex items-center gap-2 text-lg"><IconText>📊</IconText>Obsazenost týdne</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="rounded-2xl border bg-slate-50 p-4">
                <div className="mb-2 flex items-end justify-between">
                  <div>
                    <div className="text-sm text-slate-500">Obsazené bloky směn</div>
                    <div className="text-3xl font-bold">{graphicsStats.plannedCells}/{graphicsStats.totalCells}</div>
                  </div>
                  <Badge variant={graphicsStats.plannedCells === graphicsStats.totalCells ? "default" : "secondary"}>
                    {Math.round((graphicsStats.plannedCells / Math.max(1, graphicsStats.totalCells)) * 100)} %
                  </Badge>
                </div>
                <ProgressBar label="Celkově" value={graphicsStats.plannedCells} max={graphicsStats.totalCells} tone={graphicsStats.plannedCells === graphicsStats.totalCells ? "emerald" : "amber"} />
              </div>
              <div className="grid grid-cols-7 gap-2">
                {graphicsStats.dayUsage.map((item) => {
                  const height = Math.max(12, Math.min(100, item.count * 22));
                  return (
                    <div key={`day_chart_${item.day}`} className="flex flex-col items-center gap-2 rounded-2xl border bg-white p-2 text-center">
                      <div className="flex h-24 items-end">
                        <div className="w-6 rounded-t-xl bg-slate-700" style={{ height: `${height}%` }} />
                      </div>
                      <div className="text-[11px] font-semibold">{item.day.slice(0, 2)}</div>
                      <div className="text-[11px] text-slate-500">{item.count}</div>
                    </div>
                  );
                })}
              </div>
            </CardContent>
          </Card>

          <Card className="rounded-3xl shadow-sm">
            <CardHeader className="pb-2">
              <CardTitle className="flex items-center gap-2 text-lg"><IconText>👤</IconText>Graf řidičů</CardTitle>
            </CardHeader>
            <CardContent className="space-y-3">
              {graphicsStats.driverUsage.length === 0 ? (
                <div className="rounded-2xl border bg-white p-3 text-sm text-slate-600">Zatím nejsou vloženi řidiči.</div>
              ) : (
                graphicsStats.driverUsage.map((driver) => (
                  <ProgressBar key={driver.id} label={driver.name} value={driver.count} max={21} rightLabel={`${driver.count} směn`} tone={driver.count > 7 ? "amber" : "emerald"} />
                ))
              )}
            </CardContent>
          </Card>

          <Card className="rounded-3xl shadow-sm">
            <CardHeader className="pb-2">
              <CardTitle className="flex items-center gap-2 text-lg"><IconText>🚕</IconText>Graf vozidel</CardTitle>
            </CardHeader>
            <CardContent className="space-y-3">
              {graphicsStats.vehicleUsage.length === 0 ? (
                <div className="rounded-2xl border bg-white p-3 text-sm text-slate-600">Zatím nejsou vložena vozidla.</div>
              ) : (
                graphicsStats.vehicleUsage.map((vehicle) => (
                  <ProgressBar key={vehicle.id} label={vehicle.name} value={vehicle.count} max={21} rightLabel={`${vehicle.count} směn`} tone={vehicle.count > 10 ? "sky" : "slate"} />
                ))
              )}
            </CardContent>
          </Card>
        </div>

        <Card className="rounded-3xl shadow-sm">
          <CardHeader className="pb-2">
            <CardTitle className="flex items-center gap-2 text-lg"><IconText>🧭</IconText>Rozložení podle typu směny</CardTitle>
          </CardHeader>
          <CardContent className="grid gap-3 md:grid-cols-3">
            {graphicsStats.shiftUsage.map((shift) => (
              <div key={`shift_usage_${shift.id}`} className="rounded-2xl border bg-white p-4">
                <div className="mb-3 flex items-center justify-between">
                  <div className="flex items-center gap-2 font-semibold"><IconText>{shift.icon}</IconText>{shift.short}</div>
                  <Badge variant="secondary">{shift.count}</Badge>
                </div>
                <ProgressBar label={shift.label} value={shift.count} max={days.length * Math.max(1, vehicles.length)} tone={shift.id === "rano" ? "emerald" : shift.id === "odpo" ? "amber" : "sky"} />
              </div>
            ))}
          </CardContent>
        </Card>

        {showWeeklyOverview ? (
          <Card className="rounded-3xl shadow-sm print:shadow-none print:rounded-none print:border-0">
            <CardHeader className="pb-3 print:pb-2">
              <CardTitle className="text-xl print:text-lg">Celotýdenní přehled směn</CardTitle>
              <div className="text-sm font-medium text-slate-700 print:text-[11px]">Týden: {weekRangeLabel}</div>
              <div className="text-sm text-slate-600 print:text-[11px]">
                Kompaktní výstup na jednu stránku podle směn.
              </div>
            </CardHeader>
            <CardContent id="print-area" className="print:p-0">
              <div className="overflow-x-auto">
                <div className="grid min-w-[1180px] grid-cols-[110px_repeat(7,minmax(135px,1fr))] gap-2 text-xs print:min-w-0 print:gap-1 print:text-[10px]">
                  <div className="rounded-xl border bg-slate-100 px-2 py-2 font-semibold">Směna</div>
                  {weekDates.map((item) => (
                    <div key={`overview_head_${item.day}`} className="rounded-xl border bg-slate-100 px-2 py-2 text-center font-semibold">
                      <div>{item.day}</div>
                      <div className="text-[11px] font-normal text-slate-500 print:text-[9px]">{item.label}</div>
                    </div>
                  ))}

                  {weeklyOverview.map((shift) => (
                    <React.Fragment key={`overview_${shift.id}`}>
                      <div className="rounded-xl border bg-white px-2 py-2">
                        <div className="font-semibold">{shift.short}</div>
                        <div className="text-[11px] text-slate-500 print:text-[9px]">{shift.label}</div>
                      </div>

                      {shift.days.map((cell) => (
                        <div
                          key={`overview_${shift.id}_${cell.day}`}
                          className={`rounded-xl border px-2 py-2 leading-tight ${cell.isFree ? "border-red-300 bg-red-50" : "bg-white"}`}
                        >
                          <div className={`mb-1 font-semibold ${cell.isFree ? "text-red-700" : ""}`}>
                            {cell.isFree ? "VOLNÝ TERMÍN" : `Obsazeno: ${cell.entryCount}`}
                          </div>
                          <div className="text-slate-700">
                            <span className="font-medium">Řidiči:</span>{" "}
                            {cell.assignedDrivers.length ? cell.assignedDrivers.join(", ") : "nikdo"}
                          </div>
                          
                          <div className="mt-1 text-slate-500">
                            <span className="font-medium">Volná auta:</span>{" "}
                            {cell.freeVehicles.length ? cell.freeVehicles.join(", ") : "žádná"}
                          </div>
                        </div>
                      ))}
                    </React.Fragment>
                  ))}
                </div>
              </div>
            </CardContent>
          </Card>
        ) : null}

        <Tabs defaultValue="board" className="space-y-4">
          <TabsList className="grid w-full grid-cols-5 rounded-2xl">
            <TabsTrigger value="board">Dispečink</TabsTrigger>
            <TabsTrigger value="warnungen">Upozornění</TabsTrigger>
            <TabsTrigger value="fahrer">Řidiči</TabsTrigger>
            <TabsTrigger value="fahrzeuge">Vozidla</TabsTrigger>
            <TabsTrigger value="vystup">Výstup pro řidiče</TabsTrigger>
          </TabsList>

          <TabsContent value="board" className="space-y-4">
            <div className="grid gap-4 2xl:grid-cols-[320px_minmax(0,1fr)]">
              <div className="space-y-4">
                <Card className="rounded-3xl shadow-sm">
                  <CardHeader>
                    <CardTitle>Seznam řidičů</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-2">
                    {drivers.map((driver) => (
                      <PoolChip
                        key={driver.id}
                        label={driver.name}
                        sublabel={driver.phone || driver.note || "Připraven k naplánování"}
                        onDragStart={() => setDragItem({ kind: "driver", id: driver.id })}
                        onDelete={() => deleteDriver(driver.id)}
                      />
                    ))}
                  </CardContent>
                </Card>

                <Card className="rounded-3xl shadow-sm">
                  <CardHeader>
                    <CardTitle>Seznam vozidel</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-2">
                    {vehicles.map((vehicle) => (
                      <PoolChip
                        key={vehicle.id}
                        label={vehicle.plate ? `${vehicle.name} (${vehicle.plate})` : vehicle.name}
                        sublabel={vehicle.note || "Vozidlo"}
                        onDragStart={() => setDragItem({ kind: "vehicle", id: vehicle.id })}
                        onDelete={() => deleteVehicle(vehicle.id)}
                      />
                    ))}
                  </CardContent>
                </Card>

                <Card
                  className={`rounded-3xl border-2 border-dashed shadow-sm transition ${dragItem ? "border-red-300 bg-red-50" : "border-slate-200"}`}
                  onDragOver={(e) => e.preventDefault()}
                  onDrop={onDropToTrash}
                >
                  <CardContent className="flex min-h-[120px] flex-col items-center justify-center gap-2 p-6 text-center">
                    <IconText className="text-slate-500">🗑</IconText>
                    <div className="font-medium">Koš</div>
                    <div className="text-sm text-slate-500">Přetáhněte sem přiřazení, řidiče nebo vozidlo pro smazání.</div>
                  </CardContent>
                </Card>
              </div>

              <Card className="rounded-3xl shadow-sm">
                <CardHeader>
                  <CardTitle>Týdenní tabule</CardTitle>
                  <div className="text-sm text-slate-500">Týden: {weekRangeLabel}</div>
                </CardHeader>
                <CardContent>
                  <div className="overflow-x-auto">
                    <div className="grid min-w-[1320px] grid-cols-[140px_repeat(7,minmax(160px,1fr))] gap-3">
                      <div />
                      {weekDates.map((item) => (
                        <div key={item.day} className="sticky top-0 z-10 rounded-2xl border bg-slate-50 px-3 py-3 text-center font-semibold">
                          <div>{item.day}</div>
                          <div className="mt-1 text-xs font-normal text-slate-500">{item.label}</div>
                        </div>
                      ))}

                      {shifts.map((shift) => {
                        const Icon = shift.icon;
                        return (
                          <React.Fragment key={shift.id}>
                            <div className="rounded-2xl border bg-white px-3 py-4">
                              <div className="flex items-center gap-2 font-semibold">
                                <IconText>{Icon}</IconText>
                                {shift.short}
                              </div>
                              <div className="mt-1 text-xs text-slate-500">{shift.label}</div>
                            </div>

                            {days.map((day) => {
                              if (!isShiftAvailableOnDay(shift, day)) {
                                return (
                                  <div
                                    key={`${day}_${shift.id}`}
                                    className="rounded-2xl border border-dashed bg-slate-100 p-2 min-h-[280px] opacity-40"
                                  >
                                    <div className="flex h-full items-center justify-center text-xs text-slate-400">
                                      Směna není aktivní
                                    </div>
                                  </div>
                                );
                              }

                              const entries = schedule?.[day]?.[shift.id] || [];
                              return (
                                <div
                                  key={`${day}_${shift.id}`}
                                  onDragOver={(e) => e.preventDefault()}
                                  onDrop={() => onDropToCell(day, shift.id)}
                                  className="rounded-2xl border bg-slate-50 p-2 min-h-[280px]"
                                >
                                  <div className="mb-2 flex items-center justify-between">
                                    <Badge variant="secondary">{entries.length}</Badge>
                                    <Button size="sm" variant="ghost" onClick={() => addAssignment(day, shift.id)}>
                                      <IconText className="mr-1">＋</IconText> Nové
                                    </Button>
                                  </div>

                                  <div className="space-y-2">
                                    {entries.length === 0 ? (
                                      <div className="rounded-2xl border border-dashed bg-white px-3 py-4 text-center text-xs text-slate-500">
                                        Přetáhněte sem řidiče, vozidlo nebo přiřazení.
                                      </div>
                                    ) : (
                                      entries.map((entry) => {
                                        const conflictState = isAssignmentConflict(schedule, day, shift.id, entry, drivers, vehicles);
                                        return (
                                          <motion.div
                                            layout
                                            key={entry.id}
                                            draggable
                                            onDragStart={() =>
                                              setDragItem({ kind: "assignment", fromDay: day, fromShiftId: shift.id, assignment: entry })
                                            }
                                            className={`cursor-grab rounded-2xl border p-3 shadow-sm active:cursor-grabbing ${
                                              conflictState.hasConflict
                                                ? "border-amber-300 bg-amber-50"
                                                : "border-slate-200 bg-white"
                                            }`}
                                          >
                                            <div className="mb-2 flex items-start justify-between gap-2">
                                              <div className="flex items-center gap-2 text-sm font-semibold">
                                                <IconText className="text-slate-400">↕</IconText>
                                                Jízda
                                              </div>
                                              <div className="flex items-center gap-1">
                                                <button
                                                  type="button"
                                                  onClick={() => setCopiedAssignment({ driverId: entry.driverId, vehicleId: entry.vehicleId, note: entry.note })}
                                                  className="rounded-md p-1 hover:bg-slate-100"
                                                  title="Kopírovat přiřazení"
                                                >
                                                  <IconText className="text-slate-500">📋</IconText>
                                                </button>
                                                <button
                                                  type="button"
                                                  onClick={() => deleteAssignment(day, shift.id, entry.id)}
                                                  className="rounded-md p-1 hover:bg-slate-100"
                                                  title="Smazat"
                                                >
                                                  <IconText className="text-slate-500">🗑</IconText>
                                                </button>
                                              </div>
                                            </div>

                                            <div className="space-y-2">
                                              <div className="grid gap-1">
                                                <Label className="text-xs">Řidič</Label>
                                                <select
                                                  className="w-full rounded-xl border bg-white px-3 py-2 text-sm"
                                                  value={entry.driverId}
                                                  onChange={(e) => updateAssignment(day, shift.id, entry.id, "driverId", e.target.value)}
                                                >
                                                  <option value="">Bez řidiče</option>
                                                  {drivers.map((driver) => (
                                                    <option key={driver.id} value={driver.id}>{driver.name}</option>
                                                  ))}
                                                </select>
                                              </div>

                                              <div className="grid gap-1">
                                                <Label className="text-xs">Vozidlo</Label>
                                                <select
                                                  className="w-full rounded-xl border bg-white px-3 py-2 text-sm"
                                                  value={entry.vehicleId}
                                                  onChange={(e) => updateAssignment(day, shift.id, entry.id, "vehicleId", e.target.value)}
                                                >
                                                  <option value="">Bez vozidla</option>
                                                  {vehicles.map((vehicle) => (
                                                    <option key={vehicle.id} value={vehicle.id}>
                                                      {vehicle.plate ? `${vehicle.name} (${vehicle.plate})` : vehicle.name}
                                                    </option>
                                                  ))}
                                                </select>
                                              </div>

                                              <div className="grid gap-1">
                                                <Label className="text-xs">Poznámka</Label>
                                                <Input
                                                  value={entry.note}
                                                  onChange={(e) => updateAssignment(day, shift.id, entry.id, "note", e.target.value)}
                                                  placeholder="Nádraží, hotel, letiště"
                                                />
                                              </div>
                                            </div>

                                            <div className="mt-2 flex flex-wrap gap-1">
                                              {entry.driverId ? <Badge variant="outline">{getDriverName(drivers, entry.driverId)}</Badge> : null}
                                              {entry.vehicleId ? <Badge variant="outline">{getVehicleName(vehicles, entry.vehicleId)}</Badge> : null}
                                              {conflictState.driverConflict ? <Badge className="bg-amber-100 text-amber-900 hover:bg-amber-100">Konflikt řidiče</Badge> : null}
                                              {conflictState.vehicleConflict ? <Badge className="bg-amber-100 text-amber-900 hover:bg-amber-100">Konflikt vozidla</Badge> : null}
                                            </div>
                                          </motion.div>
                                        );
                                      })
                                    )}
                                  </div>

                                  {copiedAssignment ? (
                                    <Button
                                      size="sm"
                                      variant="outline"
                                      className="mt-2 w-full"
                                      onClick={() => addAssignment(day, shift.id, copiedAssignment)}
                                    >
                                      <IconText className="mr-2">📋</IconText>Vložit přiřazení
                                    </Button>
                                  ) : null}
                                </div>
                              );
                            })}
                          </React.Fragment>
                        );
                      })}
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          </TabsContent>

          <TabsContent value="warnungen">
            <div className="grid gap-4 lg:grid-cols-2">
              <Card className="rounded-3xl shadow-sm">
                <CardHeader>
                  <CardTitle>Vytížení řidičů</CardTitle>
                </CardHeader>
                <CardContent className="space-y-2">
                  {drivers.map((driver) => (
                    <div key={driver.id} className="flex items-center justify-between rounded-2xl border bg-white p-3">
                      <span>{driver.name}</span>
                      <Badge>{stats.driverCounts[driver.id] || 0} přiřazení</Badge>
                    </div>
                  ))}
                </CardContent>
              </Card>

              <Card className="rounded-3xl shadow-sm">
                <CardHeader>
                  <CardTitle>Upozornění / konflikty</CardTitle>
                </CardHeader>
                <CardContent className="space-y-2">
                  {stats.conflicts.length === 0 ? (
                    <div className="rounded-2xl border bg-white p-3 text-sm text-slate-600">Nebyly zjištěny žádné konflikty.</div>
                  ) : (
                    stats.conflicts.map((conflict, index) => (
                      <div key={index} className="rounded-2xl border border-amber-200 bg-amber-50 p-3 text-sm">
                        {conflict}
                      </div>
                    ))
                  )}
                </CardContent>
              </Card>
            </div>
          </TabsContent>

          <TabsContent value="fahrer">
            <div className="grid gap-4 lg:grid-cols-[1.1fr_0.9fr]">
              <Card className="rounded-3xl shadow-sm">
                <CardHeader>
                  <CardTitle>Seznam řidičů</CardTitle>
                </CardHeader>
                <CardContent className="space-y-3">
                  {drivers.map((driver) => (
                    <div key={driver.id} className="flex items-start justify-between gap-3 rounded-2xl border bg-white p-4">
                      <div>
                        <div className="font-medium">{driver.name}</div>
                        <div className="mt-1 text-sm text-slate-600">Telefon: {driver.phone || "—"}</div>
                        <div className="text-sm text-slate-600">Poznámka: {driver.note || "—"}</div>
                      </div>
                      <button onClick={() => deleteDriver(driver.id)} className="rounded-md p-2 hover:bg-slate-100" type="button">
                        <IconText className="text-slate-500">🗑</IconText>
                      </button>
                    </div>
                  ))}
                </CardContent>
              </Card>

              <Card className="rounded-3xl shadow-sm">
                <CardHeader>
                  <CardTitle>Přidat nového řidiče</CardTitle>
                </CardHeader>
                <CardContent className="space-y-3">
                  <div className="space-y-2">
                    <Label>Jméno</Label>
                    <Input value={newDriver.name} onChange={(e) => setNewDriver({ ...newDriver, name: e.target.value })} placeholder="např. Jan Novák" />
                  </div>
                  <div className="space-y-2">
                    <Label>Telefon</Label>
                    <Input value={newDriver.phone} onChange={(e) => setNewDriver({ ...newDriver, phone: e.target.value })} placeholder="+420 ..." />
                  </div>
                  <div className="space-y-2">
                    <Label>Poznámka</Label>
                    <Input value={newDriver.note} onChange={(e) => setNewDriver({ ...newDriver, note: e.target.value })} placeholder="např. pouze denní směny" />
                  </div>
                  <Button className="w-full" onClick={addDriver}>Přidat řidiče</Button>
                </CardContent>
              </Card>
            </div>
          </TabsContent>

          <TabsContent value="fahrzeuge">
            <div className="grid gap-4 lg:grid-cols-[1.1fr_0.9fr]">
              <Card className="rounded-3xl shadow-sm">
                <CardHeader>
                  <CardTitle>Seznam vozidel</CardTitle>
                </CardHeader>
                <CardContent className="space-y-3">
                  {vehicles.map((vehicle) => (
                    <div key={vehicle.id} className="flex items-start justify-between gap-3 rounded-2xl border bg-white p-4">
                      <div>
                        <div className="flex items-center gap-2 font-medium"><IconText>🚗</IconText> {vehicle.name}</div>
                        <div className="mt-1 text-sm text-slate-600">SPZ: {vehicle.plate || "—"}</div>
                        <div className="text-sm text-slate-600">Poznámka: {vehicle.note || "—"}</div>
                      </div>
                      <button onClick={() => deleteVehicle(vehicle.id)} className="rounded-md p-2 hover:bg-slate-100" type="button">
                        <IconText className="text-slate-500">🗑</IconText>
                      </button>
                    </div>
                  ))}
                </CardContent>
              </Card>

              <Card className="rounded-3xl shadow-sm">
                <CardHeader>
                  <CardTitle>Přidat nové vozidlo</CardTitle>
                </CardHeader>
                <CardContent className="space-y-3">
                  <div className="space-y-2">
                    <Label>Název vozidla</Label>
                    <Input value={newVehicle.name} onChange={(e) => setNewVehicle({ ...newVehicle, name: e.target.value })} placeholder="např. Octavia 1" />
                  </div>
                  <div className="space-y-2">
                    <Label>SPZ</Label>
                    <Input value={newVehicle.plate} onChange={(e) => setNewVehicle({ ...newVehicle, plate: e.target.value })} placeholder="např. 8AJ 1629" />
                  </div>
                  <div className="space-y-2">
                    <Label>Poznámka</Label>
                    <Input value={newVehicle.note} onChange={(e) => setNewVehicle({ ...newVehicle, note: e.target.value })} placeholder="např. Comfort / rezerva / brzy servis" />
                  </div>
                  <Button className="w-full" onClick={addVehicle}>Přidat vozidlo</Button>
                </CardContent>
              </Card>
            </div>
          </TabsContent>

          <TabsContent value="vystup">
            <div className="grid gap-4 lg:grid-cols-2">
              {driverOutputs.map((driver) => (
                <Card key={driver.id} className="rounded-3xl shadow-sm">
                  <CardHeader>
                    <CardTitle>{driver.name}</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-3">
                    {driver.plan.length === 0 ? (
                      <div className="rounded-2xl border bg-white p-3 text-sm text-slate-600">
                        Tento řidič zatím nemá naplánovanou žádnou směnu.
                      </div>
                    ) : (
                      <div className="space-y-2">
                        {driver.plan.map((item, index) => (
                          <div key={`${driver.id}_${index}`} className="rounded-2xl border bg-white p-3">
                            <div className="font-medium">{item.day}</div>
                            <div className="text-sm text-slate-500">{item.date}</div>
                            <div className="text-sm text-slate-600">{item.shift} • {item.time}</div>
                            {item.note ? <div className="mt-1 text-sm text-slate-500">Poznámka: {item.note}</div> : null}
                          </div>
                        ))}
                      </div>
                    )}
                  </CardContent>
                </Card>
              ))}
            </div>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  );
}