import { useState, useEffect, useMemo, useCallback, useRef } from "react";
import {
  useNavigate,
  useSearchParams,
  useParams,
  Link,
} from "react-router-dom";
import DOMPurify from "dompurify";
import { useAlert } from "../context/AlertContext";
import { useAuth } from "../context/AuthContext";
import Forbidden from "../components/Forbidden";
import FormField from "../components/FormField";
import AdminDatePicker from "../components/AdminDatePicker";
import ConfirmModal from "../components/ConfirmModal";
import { motion } from "framer-motion";
import {
  DndContext,
  closestCenter,
  KeyboardSensor,
  PointerSensor,
  TouchSensor,
  useSensor,
  useSensors,
  type DragEndEvent,
} from "@dnd-kit/core";
import {
  SortableContext,
  verticalListSortingStrategy,
  useSortable,
  arrayMove,
} from "@dnd-kit/sortable";
import {
  restrictToVerticalAxis,
  restrictToParentElement,
} from "@dnd-kit/modifiers";
import { CSS } from "@dnd-kit/utilities";
import apiFetch from "../utils/api";
import { formatCurrency, formatDate } from "../utils/formatters";

const API_BASE = "/api/admin";

const STATUS_LABELS: Record<string, string> = {
  issued: "Vystavena",
  paid: "Zaplacena",
  overdue: "Po splatnosti",
};

const STATUS_CLASSES: Record<string, string> = {
  issued: "admin-badge-invoice-issued",
  paid: "admin-badge-invoice-paid",
  overdue: "admin-badge-invoice-overdue",
};

const TRANSITION_LABELS: Record<string, string> = { paid: "Zaplaceno" };
const TRANSITION_CLASSES: Record<string, string> = {
  paid: "admin-btn admin-btn-primary",
};

const VAT_OPTIONS = [
  { value: 21, label: "21%" },
  { value: 12, label: "12%" },
  { value: 0, label: "0%" },
];

interface InvoiceItem {
  id?: number;
  _key: string;
  description: string;
  quantity: number;
  unit: string;
  unit_price: number;
  vat_rate: number;
}

interface Customer {
  id: number;
  name: string;
  company_id?: string;
  city?: string;
}

interface BankAccount {
  id: number;
  account_name: string;
  account_number?: string;
  bank_name?: string;
  bic?: string;
  iban?: string;
  is_default?: boolean;
}

interface InvoiceForm {
  customer_id: number | null;
  customer_name: string;
  order_id: number | null;
  issue_date: string;
  due_date: string;
  tax_date: string;
  currency: string;
  apply_vat: number;
  vat_rate: number;
  payment_method: string;
  constant_symbol: string;
  issued_by: string;
  billing_text: string;
  notes: string;
  language: string;
  bank_account_id: number | string;
  bank_name: string;
  bank_swift: string;
  bank_iban: string;
  bank_account: string;
}

interface InvoiceCustomer {
  company_id?: string;
  vat_id?: string;
}

interface Invoice {
  id: number;
  invoice_number: string;
  customer_name: string | null;
  customer?: InvoiceCustomer;
  order_id?: number;
  order_number?: string;
  currency: string;
  status: string;
  issue_date: string;
  due_date: string;
  tax_date: string;
  payment_method: string;
  issued_by: string | null;
  paid_date?: string;
  notes: string;
  language: string;
  apply_vat: number | string;
  items: Omit<InvoiceItem, "_key">[];
  valid_transitions?: string[];
}

// Sortable row for create mode
function SortableInvoiceRow({
  item,
  index,
  currency,
  apply_vat,
  onUpdate,
  onRemove,
  canDelete,
}: {
  item: InvoiceItem;
  index: number;
  currency: string;
  apply_vat: boolean;
  onUpdate: (
    index: number,
    field: keyof InvoiceItem,
    value: string | number,
  ) => void;
  onRemove: (index: number) => void;
  canDelete: boolean;
}) {
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
    isDragging,
  } = useSortable({ id: item._key });
  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
    opacity: isDragging ? 0.5 : 1,
    background: isDragging ? "var(--bg-secondary)" : undefined,
    position: "relative" as const,
    zIndex: isDragging ? 10 : undefined,
  };
  const lineTotal =
    (Number(item.quantity) || 0) * (Number(item.unit_price) || 0);
  return (
    <tr ref={setNodeRef} style={style}>
      <td style={{ width: "2rem" }}>
        <button
          type="button"
          className="admin-drag-handle"
          {...attributes}
          {...listeners}
          title="Přetáhnout"
        >
          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
            <circle cx="9" cy="5" r="1.5" />
            <circle cx="15" cy="5" r="1.5" />
            <circle cx="9" cy="12" r="1.5" />
            <circle cx="15" cy="12" r="1.5" />
            <circle cx="9" cy="19" r="1.5" />
            <circle cx="15" cy="19" r="1.5" />
          </svg>
        </button>
      </td>
      <td className="text-tertiary text-center fw-500">{index + 1}</td>
      <td>
        <input
          type="text"
          value={item.description}
          onChange={(e) => onUpdate(index, "description", e.target.value)}
          className="admin-form-input fw-500"
          placeholder="Popis položky..."
        />
      </td>
      <td>
        <input
          type="number"
          value={item.quantity}
          onChange={(e) => onUpdate(index, "quantity", e.target.value)}
          className="admin-form-input"
          min="0"
          step="any"
          style={{
            textAlign: "center",
            height: "2.25rem",
            padding: "0.375rem 0.5rem",
          }}
        />
      </td>
      <td>
        <input
          type="text"
          value={item.unit}
          onChange={(e) => onUpdate(index, "unit", e.target.value)}
          className="admin-form-input"
          placeholder="ks"
          style={{
            textAlign: "center",
            height: "2.25rem",
            padding: "0.375rem 0.5rem",
          }}
        />
      </td>
      <td>
        <input
          type="number"
          value={item.unit_price}
          onChange={(e) => onUpdate(index, "unit_price", e.target.value)}
          className="admin-form-input"
          step="any"
          style={{
            textAlign: "right",
            height: "2.25rem",
            padding: "0.375rem 0.5rem",
          }}
        />
      </td>
      {apply_vat ? (
        <td>
          <select
            value={item.vat_rate}
            onChange={(e) =>
              onUpdate(index, "vat_rate", Number(e.target.value))
            }
            className="admin-form-select"
            style={{
              height: "2.25rem",
              padding: "0.375rem 0.5rem",
              minWidth: "4.5rem",
            }}
          >
            {VAT_OPTIONS.map((o) => (
              <option key={o.value} value={o.value}>
                {o.label}
              </option>
            ))}
          </select>
        </td>
      ) : null}
      <td style={{ textAlign: "right", fontWeight: 600, whiteSpace: "nowrap" }}>
        {formatCurrency(lineTotal, currency)}
      </td>
      <td>
        {canDelete && (
          <button
            type="button"
            onClick={() => onRemove(index)}
            className="admin-btn-icon danger"
            title="Odebrat"
            aria-label="Odebrat"
          >
            <svg
              width="12"
              height="12"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
            >
              <line x1="18" y1="6" x2="6" y2="18" />
              <line x1="6" y1="6" x2="18" y2="18" />
            </svg>
          </button>
        )}
      </td>
    </tr>
  );
}

// Sortable row for edit mode (existing invoice items)
function SortableInvoiceEditRow({
  item,
  index,
  apply_vat,
  onUpdate,
  onRemove,
  canDelete,
}: {
  item: InvoiceItem;
  index: number;
  apply_vat: boolean;
  onUpdate: (index: number, field: string, value: string | number) => void;
  onRemove: (index: number) => void;
  canDelete: boolean;
}) {
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
    isDragging,
  } = useSortable({ id: item._key });
  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
    opacity: isDragging ? 0.5 : 1,
    background: isDragging ? "var(--bg-secondary)" : undefined,
    position: "relative" as const,
    zIndex: isDragging ? 10 : undefined,
  };
  return (
    <tr ref={setNodeRef} style={style}>
      <td style={{ width: "2rem" }}>
        <button
          type="button"
          className="admin-drag-handle"
          {...attributes}
          {...listeners}
          title="Přetáhnout"
        >
          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
            <circle cx="9" cy="5" r="1.5" />
            <circle cx="15" cy="5" r="1.5" />
            <circle cx="9" cy="12" r="1.5" />
            <circle cx="15" cy="12" r="1.5" />
            <circle cx="9" cy="19" r="1.5" />
            <circle cx="15" cy="19" r="1.5" />
          </svg>
        </button>
      </td>
      <td
        className="text-tertiary"
        style={{ textAlign: "center", fontWeight: 500 }}
      >
        {index + 1}
      </td>
      <td>
        <input
          type="text"
          value={item.description}
          onChange={(e) => onUpdate(index, "description", e.target.value)}
          className="admin-form-input fw-500"
          placeholder="Popis položky..."
        />
      </td>
      <td>
        <input
          type="number"
          value={item.quantity}
          onChange={(e) => onUpdate(index, "quantity", e.target.value)}
          className="admin-form-input"
          min="0"
          step="any"
          style={{
            textAlign: "center",
            height: "2.25rem",
            padding: "0.375rem 0.5rem",
          }}
        />
      </td>
      <td>
        <input
          type="text"
          value={item.unit}
          onChange={(e) => onUpdate(index, "unit", e.target.value)}
          className="admin-form-input"
          style={{
            textAlign: "center",
            height: "2.25rem",
            padding: "0.375rem 0.5rem",
          }}
        />
      </td>
      <td>
        <input
          type="number"
          value={item.unit_price}
          onChange={(e) => onUpdate(index, "unit_price", e.target.value)}
          className="admin-form-input"
          step="any"
          style={{
            textAlign: "right",
            height: "2.25rem",
            padding: "0.375rem 0.5rem",
          }}
        />
      </td>
      <td>
        {apply_vat ? (
          <select
            value={item.vat_rate}
            onChange={(e) =>
              onUpdate(index, "vat_rate", Number(e.target.value))
            }
            className="admin-form-select"
            style={{
              height: "2.25rem",
              padding: "0.375rem 0.5rem",
              minWidth: "4.5rem",
            }}
          >
            {VAT_OPTIONS.map((o) => (
              <option key={o.value} value={o.value}>
                {o.label}
              </option>
            ))}
          </select>
        ) : (
          <span
            className="text-tertiary"
            style={{ display: "block", textAlign: "center" }}
          >
            0%
          </span>
        )}
      </td>
      <td>
        <div
          style={{ display: "flex", gap: "0.125rem", justifyContent: "center" }}
        >
          {canDelete && (
            <button
              type="button"
              onClick={() => onRemove(index)}
              className="admin-btn-icon danger"
              title="Odebrat"
              aria-label="Odebrat"
            >
              <svg
                width="12"
                height="12"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
              >
                <line x1="18" y1="6" x2="6" y2="18" />
                <line x1="6" y1="6" x2="18" y2="18" />
              </svg>
            </button>
          )}
        </div>
      </td>
    </tr>
  );
}

export default function InvoiceDetail() {
  const { id } = useParams<{ id: string }>();
  const isEdit = Boolean(id);

  const keyCounterRef = useRef(0);
  const emptyItem = useCallback(
    (): InvoiceItem => ({
      _key: `inv-${++keyCounterRef.current}`,
      description: "",
      quantity: 1,
      unit: "ks",
      unit_price: 0,
      vat_rate: 21,
    }),
    [],
  );

  const dndSensors = useSensors(
    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
    useSensor(TouchSensor, {
      activationConstraint: { delay: 200, tolerance: 5 },
    }),
    useSensor(KeyboardSensor),
  );

  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  const alert = useAlert();
  const { hasPermission, user } = useAuth();

  // ─── Create mode state ───
  const rawOrderId = searchParams.get("fromOrder");
  const fromOrderId =
    !isEdit && rawOrderId && /^\d+$/.test(rawOrderId) ? rawOrderId : null;

  const [form, setForm] = useState<InvoiceForm>({
    customer_id: null,
    customer_name: "",
    order_id: fromOrderId ? Number(fromOrderId) : null,
    issue_date: new Date().toISOString().split("T")[0],
    due_date: new Date(Date.now() + 14 * 86400000).toISOString().split("T")[0],
    tax_date: new Date().toISOString().split("T")[0],
    currency: "CZK",
    apply_vat: 1,
    vat_rate: 21,
    payment_method: "Příkazem",
    constant_symbol: "0308",
    issued_by: user?.fullName || "",
    billing_text: "",
    notes: "",
    language: "cs",
    bank_account_id: "",
    bank_name: "",
    bank_swift: "",
    bank_iban: "",
    bank_account: "",
  });

  const [bankAccounts, setBankAccounts] = useState<BankAccount[]>([]);
  const [dueDays, setDueDays] = useState(14);
  const [items, setItems] = useState<InvoiceItem[]>([emptyItem()]);
  const [errors, setErrors] = useState<Record<string, string>>({});
  const [saving, setSaving] = useState(false);
  const [loading, setLoading] = useState(true);
  const [invoiceNumber, setInvoiceNumber] = useState("");

  const [customers, setCustomers] = useState<Customer[]>([]);
  const [customerSearch, setCustomerSearch] = useState("");
  const [showCustomerDropdown, setShowCustomerDropdown] = useState(false);

  const DRAFT_KEY = "boha_invoice_draft";

  const clearDraft = useCallback(() => {
    try {
      localStorage.removeItem(DRAFT_KEY);
    } catch {
      /* ignore */
    }
  }, []);

  // ─── Edit mode state ───
  const [invoice, setInvoice] = useState<Invoice | null>(null);
  const [notes, setNotes] = useState("");
  const [statusChanging, setStatusChanging] = useState<string | null>(null);
  const [statusConfirm, setStatusConfirm] = useState<{
    show: boolean;
    status: string | null;
  }>({ show: false, status: null });
  const [pdfLoading, setPdfLoading] = useState(false);
  const [deleteConfirm, setDeleteConfirm] = useState(false);
  const [deleting, setDeleting] = useState(false);

  const [editingItems, setEditingItems] = useState(false);
  const [editItems, setEditItems] = useState<InvoiceItem[]>([]);
  const editKeyCounter = useRef(0);

  // ─── Data loading ───

  useEffect(() => {
    if (isEdit) return;
    const load = async () => {
      try {
        const promises = [
          apiFetch(`${API_BASE}/invoices/next-number`),
          apiFetch(`${API_BASE}/customers`),
          apiFetch(`${API_BASE}/bank-accounts`),
        ];
        if (fromOrderId) {
          promises.push(
            apiFetch(`${API_BASE}/invoices/order-data/${fromOrderId}`),
          );
        }

        const results = await Promise.all(promises);

        const numRes = results[0];
        if (numRes.ok) {
          const numData = await numRes.json();
          if (numData.success)
            setInvoiceNumber(
              numData.data?.next_number || numData.data?.number || "",
            );
        }

        const custRes = results[1];
        if (custRes.ok) {
          const custData = await custRes.json();
          if (custData.success)
            setCustomers(
              Array.isArray(custData.data)
                ? custData.data
                : custData.data?.customers || [],
            );
        }

        const bankRes = results[2];
        if (bankRes.ok) {
          const bankData = await bankRes.json();
          if (bankData.success && Array.isArray(bankData.data)) {
            setBankAccounts(bankData.data);
            const defaultAcc = bankData.data.find(
              (a: BankAccount) => a.is_default,
            );
            if (defaultAcc) {
              setForm((prev) => ({
                ...prev,
                bank_account_id: defaultAcc.id,
                bank_name: defaultAcc.bank_name || "",
                bank_swift: defaultAcc.bic || "",
                bank_iban: defaultAcc.iban || "",
                bank_account: defaultAcc.account_number || "",
              }));
            }
          }
        }

        // Pre-fill from order
        if (fromOrderId && results[3]?.ok) {
          const orderData = await results[3].json();
          if (orderData.success) {
            const order = orderData.data;
            const vatRate = Number(order.vat_rate) || 21;
            setForm((prev) => ({
              ...prev,
              customer_id: order.customer_id,
              customer_name: order.customer_name || "",
              order_id: order.id,
              currency: order.currency || "CZK",
              apply_vat: Number(order.apply_vat) || 0,
              vat_rate: vatRate,
            }));
            if (order.items?.length > 0) {
              setItems(
                order.items.map((item: Record<string, unknown>) => ({
                  _key: `inv-${++keyCounterRef.current}`,
                  description: (item.description as string) || "",
                  quantity: Number(item.quantity) || 1,
                  unit: (item.unit as string) || "",
                  unit_price: Number(item.unit_price) || 0,
                  vat_rate: vatRate,
                })),
              );
            }
          }
        }
      } catch {
        alert.error("Chyba při načítání dat");
      } finally {
        setLoading(false);
      }
    };
    load();
  }, [isEdit, fromOrderId, alert]);

  // Edit mode: load existing invoice
  const fetchDetail = useCallback(async () => {
    if (!id) return;
    try {
      const response = await apiFetch(`${API_BASE}/invoices/${id}`);
      if (response.status === 401) return;
      const result = await response.json();
      if (result.success) {
        setInvoice(result.data);
        setNotes(result.data.notes || "");
      } else {
        alert.error(result.error || "Nepodařilo se načíst fakturu");
        navigate("/invoices");
      }
    } catch {
      alert.error("Chyba připojení");
      navigate("/invoices");
    } finally {
      setLoading(false);
    }
  }, [id, alert, navigate]);

  useEffect(() => {
    if (isEdit) fetchDetail();
  }, [isEdit, fetchDetail]);

  // ─── Create mode: due date calculation ───
  useEffect(() => {
    if (isEdit) return;
    if (!form.issue_date) return;
    const d = new Date(form.issue_date);
    d.setDate(d.getDate() + dueDays);
    setForm((prev) => ({ ...prev, due_date: d.toISOString().split("T")[0] }));
  }, [isEdit, form.issue_date, dueDays]);

  // ─── Create mode: customer filtering ───
  const filteredCustomers = useMemo(() => {
    if (!customerSearch) return customers;
    const q = customerSearch.toLowerCase();
    return customers.filter(
      (c) =>
        (c.name || "").toLowerCase().includes(q) ||
        (c.company_id || "").includes(customerSearch) ||
        (c.city || "").toLowerCase().includes(q),
    );
  }, [customers, customerSearch]);

  useEffect(() => {
    const handleClickOutside = () => setShowCustomerDropdown(false);
    if (showCustomerDropdown) {
      document.addEventListener("click", handleClickOutside);
      return () => document.removeEventListener("click", handleClickOutside);
    }
  }, [showCustomerDropdown]);

  const selectBankAccount = (accountId: string) => {
    const acc = bankAccounts.find((a) => a.id === Number(accountId));
    if (acc) {
      setForm((prev) => ({
        ...prev,
        bank_account_id: acc.id,
        bank_name: acc.bank_name || "",
        bank_swift: acc.bic || "",
        bank_iban: acc.iban || "",
        bank_account: acc.account_number || "",
      }));
    } else {
      setForm((prev) => ({
        ...prev,
        bank_account_id: "",
        bank_name: "",
        bank_swift: "",
        bank_iban: "",
        bank_account: "",
      }));
    }
  };

  const selectCustomer = (customer: Customer) => {
    setForm((prev) => ({
      ...prev,
      customer_id: customer.id,
      customer_name: customer.name,
    }));
    setErrors((prev) => ({ ...prev, customer_id: "" }));
    setCustomerSearch("");
    setShowCustomerDropdown(false);
  };

  // ─── Create mode: items management ───
  const updateItem = (
    index: number,
    field: keyof InvoiceItem,
    value: string | number,
  ) => {
    setItems((prev) =>
      prev.map((item, i) => (i === index ? { ...item, [field]: value } : item)),
    );
  };

  const addItem = () => setItems((prev) => [...prev, emptyItem()]);

  const removeItem = (index: number) => {
    if (items.length <= 1) return;
    setItems((prev) => prev.filter((_, i) => i !== index));
  };

  const handleCreateDragEnd = (event: DragEndEvent) => {
    const { active, over } = event;
    if (!over || active.id === over.id) return;
    setItems((prev) => {
      const oldIndex = prev.findIndex((i) => i._key === String(active.id));
      const newIndex = prev.findIndex((i) => i._key === String(over.id));
      if (oldIndex === -1 || newIndex === -1) return prev;
      return arrayMove(prev, oldIndex, newIndex);
    });
  };

  // ─── Create mode: totals ───
  const createTotals = useMemo(() => {
    let subtotal = 0;
    const vatByRate: Record<number, number> = {};

    items.forEach((item) => {
      const lineTotal =
        (Number(item.quantity) || 0) * (Number(item.unit_price) || 0);
      subtotal += lineTotal;

      if (form.apply_vat) {
        const rate = Number(item.vat_rate) || 0;
        if (!vatByRate[rate]) vatByRate[rate] = 0;
        vatByRate[rate] += (lineTotal * rate) / 100;
      }
    });

    const totalVat = Object.values(vatByRate).reduce((s, v) => s + v, 0);
    return { subtotal, vatByRate, totalVat, total: subtotal + totalVat };
  }, [items, form.apply_vat]);

  // ─── Create mode: submit ───
  const handleCreateSubmit = async (e?: React.FormEvent) => {
    e?.preventDefault();

    const newErrors: Record<string, string> = {};
    if (!form.customer_id) newErrors.customer_id = "Vyberte zákazníka";
    if (!form.issue_date) newErrors.issue_date = "Zadejte datum";
    if (!form.tax_date) newErrors.tax_date = "Zadejte datum";
    if (!form.bank_account_id)
      newErrors.bank_account_id = "Vyberte bankovní účet";
    if (items.length === 0 || items.every((i) => !i.description.trim())) {
      newErrors.items = "Přidejte alespoň jednu položku";
    }
    setErrors(newErrors);
    if (Object.keys(newErrors).length > 0) return;

    setSaving(true);
    try {
      const response = await apiFetch(`${API_BASE}/invoices`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          ...form,
          invoice_number: invoiceNumber,
          items: items
            .filter((i) => i.description.trim())
            .map((item, i) => ({
              ...item,
              position: i,
            })),
        }),
      });
      const result = await response.json();
      if (result.success) {
        clearDraft();
        await apiFetch(
          `${API_BASE}/invoices-pdf/${result.data.invoice_id}?lang=${form.language}&save=1`,
        ).catch(() => {});
        alert.success(result.message || "Faktura byla vytvořena");
        navigate(`/invoices/${result.data.invoice_id}`);
      } else {
        alert.error(result.error || "Nepodařilo se vytvořit fakturu");
      }
    } catch {
      alert.error("Chyba připojení");
    } finally {
      setSaving(false);
    }
  };

  // ─── Edit mode: totals ───
  const editTotals = useMemo(() => {
    if (!invoice?.items)
      return {
        subtotal: 0,
        vatByRate: {} as Record<number, number>,
        totalVat: 0,
        total: 0,
      };
    let subtotal = 0;
    const vatByRate: Record<number, number> = {};

    invoice.items.forEach((item) => {
      const lineTotal =
        (Number(item.quantity) || 0) * (Number(item.unit_price) || 0);
      subtotal += lineTotal;
      if (Number(invoice.apply_vat)) {
        const rate = Number(item.vat_rate) || 0;
        if (!vatByRate[rate]) vatByRate[rate] = 0;
        vatByRate[rate] += (lineTotal * rate) / 100;
      }
    });

    const totalVat = Object.values(vatByRate).reduce((s, v) => s + v, 0);
    return { subtotal, vatByRate, totalVat, total: subtotal + totalVat };
  }, [invoice]);

  // ─── Edit mode: status change ───
  const handleStatusChange = async () => {
    if (!statusConfirm.status) return;
    setStatusChanging(statusConfirm.status);
    setStatusConfirm({ show: false, status: null });
    try {
      const response = await apiFetch(`${API_BASE}/invoices/${id}`, {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ status: statusConfirm.status }),
      });
      const result = await response.json();
      if (result.success) {
        alert.success(result.message || "Stav byl změněn");
        fetchDetail();
      } else {
        alert.error(result.error || "Nepodařilo se změnit stav");
      }
    } catch {
      alert.error("Chyba připojení");
    } finally {
      setStatusChanging(null);
    }
  };

  // ─── Edit mode: save notes ───
  const handleSaveNotes = async () => {
    setSaving(true);
    try {
      const response = await apiFetch(`${API_BASE}/invoices/${id}`, {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ notes }),
      });
      const result = await response.json();
      if (result.success) {
        await apiFetch(
          `${API_BASE}/invoices-pdf/${id}?lang=${invoice?.language || "cs"}&save=1`,
        ).catch(() => {});
        alert.success("Poznámky byly uloženy");
      } else {
        alert.error(result.error || "Nepodařilo se uložit poznámky");
      }
    } catch {
      alert.error("Chyba připojení");
    } finally {
      setSaving(false);
    }
  };

  // ─── Edit mode: PDF export ───
  const handleViewPdf = async (_lang = "cs") => {
    setPdfLoading(true);
    try {
      const response = await apiFetch(`${API_BASE}/invoices/${id}/file`);
      if (!response.ok) {
        alert.error("PDF soubor nenalezen — uložte fakturu pro vygenerování");
        return;
      }
      const blob = await response.blob();
      const url = URL.createObjectURL(blob);
      window.open(url, "_blank");
      setTimeout(() => URL.revokeObjectURL(url), 60000);
    } catch {
      alert.error("Chyba připojení");
    } finally {
      setPdfLoading(false);
    }
  };

  // ─── Edit mode: edit items ───
  const startEditItems = () => {
    if (!invoice) return;
    setEditItems(
      invoice.items.map((item) => ({
        _key: `ei-${++editKeyCounter.current}`,
        description: item.description || "",
        quantity: Number(item.quantity) || 1,
        unit: item.unit || "",
        unit_price: Number(item.unit_price) || 0,
        vat_rate: Number(item.vat_rate) || 21,
      })),
    );
    setEditingItems(true);
  };

  const updateEditItem = (
    index: number,
    field: string,
    value: string | number,
  ) => {
    setEditItems((prev) =>
      prev.map((item, i) => (i === index ? { ...item, [field]: value } : item)),
    );
  };

  const addEditItem = () => {
    setEditItems((prev) => [
      ...prev,
      {
        _key: `ei-${++editKeyCounter.current}`,
        description: "",
        quantity: 1,
        unit: "ks",
        unit_price: 0,
        vat_rate: 21,
      },
    ]);
  };

  const removeEditItem = (index: number) => {
    if (editItems.length <= 1) return;
    setEditItems((prev) => prev.filter((_, i) => i !== index));
  };

  const handleEditDragEnd = (event: DragEndEvent) => {
    const { active, over } = event;
    if (!over || active.id === over.id) return;
    setEditItems((prev) => {
      const oldIndex = prev.findIndex((i) => i._key === String(active.id));
      const newIndex = prev.findIndex((i) => i._key === String(over.id));
      if (oldIndex === -1 || newIndex === -1) return prev;
      return arrayMove(prev, oldIndex, newIndex);
    });
  };

  const saveEditItems = async () => {
    setSaving(true);
    try {
      const response = await apiFetch(`${API_BASE}/invoices/${id}`, {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          items: editItems
            .filter((i) => i.description.trim())
            .map((item, i) => ({ ...item, position: i })),
        }),
      });
      const result = await response.json();
      if (result.success) {
        // Regenerate PDF on NAS (fire-and-forget)
        await apiFetch(
          `${API_BASE}/invoices-pdf/${id}?lang=${invoice?.language || "cs"}&save=1`,
        ).catch(() => {});
        alert.success("Položky byly uloženy");
        setEditingItems(false);
        fetchDetail();
      } else {
        alert.error(result.error || "Nepodařilo se uložit položky");
      }
    } catch {
      alert.error("Chyba připojení");
    } finally {
      setSaving(false);
    }
  };

  // ─── Edit mode: delete ───
  const handleDelete = async () => {
    setDeleting(true);
    try {
      const response = await apiFetch(`${API_BASE}/invoices/${id}`, {
        method: "DELETE",
      });
      const result = await response.json();
      if (result.success) {
        alert.success(result.message || "Faktura byla smazána");
        navigate("/invoices");
      } else {
        alert.error(result.error || "Nepodařilo se smazat fakturu");
      }
    } catch {
      alert.error("Chyba připojení");
    } finally {
      setDeleting(false);
      setDeleteConfirm(false);
    }
  };

  // ─── Permission checks ───
  if (!isEdit && !hasPermission("invoices.create")) return <Forbidden />;
  if (isEdit && !hasPermission("invoices.view")) return <Forbidden />;

  // ─── Loading skeleton ───
  if (loading) {
    return (
      <div className="admin-skeleton" style={{ padding: 0, gap: "1.5rem" }}>
        <div
          className="admin-skeleton-row"
          style={{ justifyContent: "space-between" }}
        >
          <div className="flex-row-gap">
            {isEdit && (
              <div
                className="admin-skeleton-line"
                style={{ width: "32px", height: "32px", borderRadius: "8px" }}
              />
            )}
            <div
              className="admin-skeleton-line h-8"
              style={{ width: "200px" }}
            />
          </div>
          {isEdit && (
            <div className="admin-skeleton-row gap-2">
              <div
                className="admin-skeleton-line h-10"
                style={{ width: "100px", borderRadius: "8px" }}
              />
              <div
                className="admin-skeleton-line h-10"
                style={{ width: "100px", borderRadius: "8px" }}
              />
            </div>
          )}
        </div>
        <div className="admin-card">
          <div className="admin-skeleton" style={{ gap: "1.25rem" }}>
            {[0, 1, 2, 3].map((i) => (
              <div key={i} className="admin-skeleton-row">
                <div className="admin-skeleton-line w-1/4" />
                <div className="admin-skeleton-line w-1/2" />
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }

  // ═══════════════════════════════════════════════════════════
  // CREATE MODE
  // ═══════════════════════════════════════════════════════════
  if (!isEdit) {
    return (
      <div>
        <motion.div
          className="admin-page-header"
          initial={{ opacity: 0, y: 12 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.25 }}
        >
          <div className="flex-row gap-4">
            <Link
              to="/invoices"
              className="admin-btn-icon"
              title="Zpět"
              aria-label="Zpět"
            >
              <svg
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
              >
                <path d="M19 12H5M12 19l-7-7 7-7" />
              </svg>
            </Link>
            <div>
              <h1 className="admin-page-title">
                Nová faktura{" "}
                {invoiceNumber && (
                  <span className="text-tertiary">({invoiceNumber})</span>
                )}
              </h1>
              {fromOrderId && (
                <p className="admin-page-subtitle">Z objednávky</p>
              )}
            </div>
          </div>
          <div className="admin-page-actions">
            <button
              onClick={handleCreateSubmit}
              className="admin-btn admin-btn-primary"
              disabled={saving}
            >
              {saving ? (
                <>
                  <div className="admin-spinner admin-spinner-sm" />
                  Ukládání...
                </>
              ) : (
                "Uložit"
              )}
            </button>
          </div>
        </motion.div>

        <form onSubmit={handleCreateSubmit}>
          {/* Basic info */}
          <motion.div
            className="offers-editor-section"
            initial={{ opacity: 0, y: 12 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.25, delay: 0.06 }}
          >
            <h3 className="admin-card-title">Základní údaje</h3>
            <div className="admin-form">
              <div className="offers-form-row-3">
                <FormField label="Číslo faktury">
                  <input
                    type="text"
                    value={invoiceNumber}
                    onChange={(e) => setInvoiceNumber(e.target.value)}
                    className="admin-form-input"
                  />
                </FormField>
                <FormField
                  label="Odběratel"
                  error={errors.customer_id}
                  required
                >
                  {form.customer_id ? (
                    <div className="offers-customer-selected">
                      <span>{form.customer_name}</span>
                      <button
                        type="button"
                        onClick={() =>
                          setForm((prev) => ({
                            ...prev,
                            customer_id: null,
                            customer_name: "",
                          }))
                        }
                        className="admin-btn-icon"
                        title="Odebrat zákazníka"
                      >
                        <svg
                          width="14"
                          height="14"
                          viewBox="0 0 24 24"
                          fill="none"
                          stroke="currentColor"
                          strokeWidth="2"
                        >
                          <line x1="18" y1="6" x2="6" y2="18" />
                          <line x1="6" y1="6" x2="18" y2="18" />
                        </svg>
                      </button>
                    </div>
                  ) : (
                    <div
                      className="offers-customer-select"
                      onClick={(e) => e.stopPropagation()}
                    >
                      <input
                        type="text"
                        value={customerSearch}
                        onChange={(e) => {
                          setCustomerSearch(e.target.value);
                          setShowCustomerDropdown(true);
                        }}
                        onFocus={() => setShowCustomerDropdown(true)}
                        className="admin-form-input"
                        placeholder="Hledat zákazníka (název, IČ, město)..."
                        autoComplete="off"
                      />
                      {showCustomerDropdown && (
                        <div className="offers-customer-dropdown">
                          {filteredCustomers.length === 0 ? (
                            <div className="offers-customer-dropdown-empty">
                              Žádní zákazníci
                            </div>
                          ) : (
                            filteredCustomers.slice(0, 10).map((c) => (
                              <div
                                key={c.id}
                                className="offers-customer-dropdown-item"
                                onMouseDown={() => selectCustomer(c)}
                              >
                                <div>{c.name}</div>
                                {(c.company_id || c.city) && (
                                  <div>
                                    {c.company_id && `IČ: ${c.company_id}`}
                                    {c.city && ` · ${c.city}`}
                                  </div>
                                )}
                              </div>
                            ))
                          )}
                        </div>
                      )}
                    </div>
                  )}
                </FormField>
                <FormField label="Vystavil">
                  <input
                    type="text"
                    value={form.issued_by}
                    className="admin-form-input"
                    readOnly
                    style={{
                      backgroundColor: "var(--bg-secondary)",
                      cursor: "default",
                    }}
                  />
                </FormField>
              </div>

              <FormField label="Text fakturace (na PDF)">
                <input
                  type="text"
                  value={form.billing_text}
                  onChange={(e) =>
                    setForm((prev) => ({
                      ...prev,
                      billing_text: e.target.value,
                    }))
                  }
                  className="admin-form-input"
                  placeholder="Fakturujeme Vám za: (ponechte prázdné pro výchozí)"
                />
              </FormField>

              <div className="admin-form-row">
                <FormField
                  label="Datum vystavení"
                  error={errors.issue_date}
                  required
                >
                  <AdminDatePicker
                    mode="date"
                    value={form.issue_date}
                    onChange={(val: string) => {
                      setForm((prev) => ({ ...prev, issue_date: val }));
                      setErrors((prev) => ({ ...prev, issue_date: "" }));
                    }}
                  />
                </FormField>
                <FormField label="Splatnost (dny)">
                  <select
                    value={dueDays}
                    onChange={(e) => setDueDays(Number(e.target.value))}
                    className="admin-form-select"
                  >
                    {Array.from({ length: 60 }, (_, i) => i + 1).map((n) => (
                      <option key={n} value={n}>
                        {n}
                      </option>
                    ))}
                  </select>
                  {form.due_date && (
                    <span
                      className="text-tertiary"
                      style={{ fontSize: "0.75rem", marginTop: "0.25rem" }}
                    >
                      Splatnost:{" "}
                      {new Date(form.due_date).toLocaleDateString("cs-CZ")}
                    </span>
                  )}
                </FormField>
                <FormField label="DÚZP" error={errors.tax_date} required>
                  <AdminDatePicker
                    mode="date"
                    value={form.tax_date}
                    onChange={(val: string) => {
                      setForm((prev) => ({ ...prev, tax_date: val }));
                      setErrors((prev) => ({ ...prev, tax_date: "" }));
                    }}
                  />
                </FormField>
              </div>

              <div className="offers-form-row-3">
                <FormField label="Forma úhrady">
                  <select
                    value={form.payment_method}
                    onChange={(e) =>
                      setForm((prev) => ({
                        ...prev,
                        payment_method: e.target.value,
                      }))
                    }
                    className="admin-form-select"
                  >
                    <option value="Příkazem">Příkazem</option>
                    <option value="Hotově">Hotově</option>
                    <option value="Dobírka">Dobírka</option>
                  </select>
                </FormField>
                <FormField label="Měna">
                  <select
                    value={form.currency}
                    onChange={(e) =>
                      setForm((prev) => ({ ...prev, currency: e.target.value }))
                    }
                    className="admin-form-select"
                  >
                    <option value="CZK">CZK (Kč)</option>
                    <option value="EUR">EUR</option>
                    <option value="USD">USD ($)</option>
                  </select>
                </FormField>
                <FormField label="Jazyk faktury">
                  <select
                    value={form.language}
                    onChange={(e) =>
                      setForm((prev) => ({
                        ...prev,
                        language: e.target.value,
                      }))
                    }
                    className="admin-form-select"
                  >
                    <option value="cs">Čeština</option>
                    <option value="en">English</option>
                  </select>
                </FormField>
                <FormField label="DPH">
                  <div className="flex-row-gap">
                    <label
                      className="admin-form-checkbox"
                      style={{ whiteSpace: "nowrap" }}
                    >
                      <input
                        type="checkbox"
                        checked={!!form.apply_vat}
                        onChange={(e) =>
                          setForm((prev) => ({
                            ...prev,
                            apply_vat: e.target.checked ? 1 : 0,
                          }))
                        }
                      />
                      <span>Uplatnit DPH</span>
                    </label>
                  </div>
                </FormField>
              </div>

              <FormField
                label="Bankovní účet"
                error={errors.bank_account_id}
                required
              >
                <select
                  value={form.bank_account_id}
                  onChange={(e) => {
                    selectBankAccount(e.target.value);
                    setErrors((prev) => ({ ...prev, bank_account_id: "" }));
                  }}
                  className="admin-form-select"
                >
                  <option value="">
                    {"\u2014"} Vyberte účet {"\u2014"}
                  </option>
                  {bankAccounts.map((acc) => (
                    <option key={acc.id} value={acc.id}>
                      {acc.account_name}
                      {acc.account_number ? ` (${acc.account_number})` : ""}
                      {acc.is_default ? " ★" : ""}
                    </option>
                  ))}
                </select>
              </FormField>
            </div>
          </motion.div>

          {/* Items */}
          <motion.div
            className="admin-card"
            initial={{ opacity: 0, y: 12 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.25, delay: 0.12 }}
          >
            <div className="admin-card-body">
              <div className="admin-card-header flex-between">
                <div>
                  <h3 className="admin-card-title">Položky</h3>
                  {errors.items && (
                    <span className="admin-form-error">{errors.items}</span>
                  )}
                </div>
                <button
                  type="button"
                  onClick={addItem}
                  className="admin-btn admin-btn-secondary admin-btn-sm"
                >
                  + Přidat položku
                </button>
              </div>

              <DndContext
                sensors={dndSensors}
                collisionDetection={closestCenter}
                modifiers={[restrictToVerticalAxis, restrictToParentElement]}
                onDragEnd={handleCreateDragEnd}
              >
                <SortableContext
                  items={items.map((i) => i._key)}
                  strategy={verticalListSortingStrategy}
                >
                  <div className="admin-table-responsive">
                    <table className="admin-table">
                      <thead>
                        <tr>
                          <th style={{ width: "2rem" }} />
                          <th style={{ width: "2rem", textAlign: "center" }}>
                            #
                          </th>
                          <th>Popis</th>
                          <th style={{ width: "5.5rem", textAlign: "center" }}>
                            Množství
                          </th>
                          <th style={{ width: "5.5rem", textAlign: "center" }}>
                            Jednotka
                          </th>
                          <th style={{ width: "5.5rem", textAlign: "center" }}>
                            Jedn. cena
                          </th>
                          {form.apply_vat ? (
                            <th style={{ width: "5rem", textAlign: "center" }}>
                              DPH
                            </th>
                          ) : null}
                          <th style={{ width: "8rem", textAlign: "right" }}>
                            Celkem
                          </th>
                          <th style={{ width: "2.5rem" }}></th>
                        </tr>
                      </thead>
                      <tbody>
                        {items.map((item, index) => (
                          <SortableInvoiceRow
                            key={item._key}
                            item={item}
                            index={index}
                            currency={form.currency}
                            apply_vat={!!form.apply_vat}
                            onUpdate={updateItem}
                            onRemove={removeItem}
                            canDelete={items.length > 1}
                          />
                        ))}
                      </tbody>
                    </table>
                  </div>
                </SortableContext>
              </DndContext>

              {/* Totals */}
              <div className="offers-totals-summary">
                <div className="offers-totals-row">
                  <span>Mezisoučet:</span>
                  <span>
                    {formatCurrency(createTotals.subtotal, form.currency)}
                  </span>
                </div>
                {form.apply_vat &&
                  Object.entries(createTotals.vatByRate).map(
                    ([rate, amount]) => (
                      <div key={rate} className="offers-totals-row">
                        <span>DPH {rate}%:</span>
                        <span>{formatCurrency(amount, form.currency)}</span>
                      </div>
                    ),
                  )}
                <div className="offers-totals-row offers-totals-total">
                  <span>Celkem k úhradě:</span>
                  <span>
                    {formatCurrency(createTotals.total, form.currency)}
                  </span>
                </div>
              </div>
            </div>
          </motion.div>

          {/* Notes */}
          <motion.div
            className="offers-editor-section"
            initial={{ opacity: 0, y: 12 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.25, delay: 0.15 }}
          >
            <h3 className="admin-card-title">Veřejné poznámky na faktuře</h3>
            <textarea
              className="admin-form-input"
              rows={4}
              value={form.notes}
              onChange={(e) =>
                setForm((prev) => ({ ...prev, notes: e.target.value }))
              }
              placeholder="Poznámky zobrazené na faktuře..."
            />
          </motion.div>
        </form>
      </div>
    );
  }

  // ═══════════════════════════════════════════════════════════
  // EDIT MODE
  // ═══════════════════════════════════════════════════════════
  if (!invoice) return null;

  const isDraft = invoice.status === "issued";
  const isPaid = invoice.status === "paid";

  return (
    <div>
      {/* Header */}
      <motion.div
        className="admin-page-header"
        initial={{ opacity: 0, y: 12 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.25 }}
      >
        <div className="flex-row gap-4">
          <Link
            to="/invoices"
            className="admin-btn-icon"
            title="Zpět"
            aria-label="Zpět"
          >
            <svg
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
            >
              <path d="M19 12H5M12 19l-7-7 7-7" />
            </svg>
          </Link>
          <div>
            <h1 className="admin-page-title flex-row-gap">
              Faktura {invoice.invoice_number}
              <span
                className={`admin-badge ${STATUS_CLASSES[invoice.status] || ""}`}
              >
                {STATUS_LABELS[invoice.status] || invoice.status}
              </span>
            </h1>
          </div>
        </div>
        <div className="admin-page-actions">
          {hasPermission("invoices.export") && invoice && (
            <button
              onClick={() => handleViewPdf(invoice.language || "cs")}
              className="admin-btn admin-btn-secondary"
              style={{
                display: "inline-flex",
                alignItems: "center",
                gap: "0.4rem",
              }}
              disabled={pdfLoading}
            >
              {pdfLoading ? (
                <div className="admin-spinner admin-spinner-sm" />
              ) : (
                <svg
                  width="16"
                  height="16"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                >
                  <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
                  <polyline points="14 2 14 8 20 8" />
                </svg>
              )}
              Zobrazit fakturu
            </button>
          )}
          {hasPermission("invoices.edit") &&
            invoice.valid_transitions?.map((status) => (
              <button
                key={status}
                onClick={() => setStatusConfirm({ show: true, status })}
                className={
                  TRANSITION_CLASSES[status] || "admin-btn admin-btn-secondary"
                }
                disabled={statusChanging === status}
              >
                {statusChanging === status ? (
                  <div
                    className="admin-spinner"
                    style={{ width: 14, height: 14, borderWidth: 2 }}
                  />
                ) : (
                  TRANSITION_LABELS[status] || status
                )}
              </button>
            ))}
          {hasPermission("invoices.delete") && (
            <button
              onClick={() => setDeleteConfirm(true)}
              className="admin-btn admin-btn-primary"
            >
              Smazat
            </button>
          )}
        </div>
      </motion.div>

      {/* Info */}
      <motion.div
        className="offers-editor-section"
        initial={{ opacity: 0, y: 12 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.25, delay: 0.06 }}
      >
        <h3 className="admin-card-title">Informace</h3>
        <div className="admin-form">
          <div className="offers-form-row-3 mb-2">
            <FormField label="Zákazník">
              <div className="fw-500">{invoice.customer_name || "\u2014"}</div>
              {invoice.customer && (
                <div
                  className="text-tertiary"
                  style={{ fontSize: "0.8rem", marginTop: "0.2rem" }}
                >
                  {invoice.customer.company_id &&
                    `IČ: ${invoice.customer.company_id}`}
                  {invoice.customer.vat_id &&
                    ` · DIČ: ${invoice.customer.vat_id}`}
                </div>
              )}
            </FormField>
            <FormField label="Objednávka">
              <div>
                {invoice.order_id ? (
                  <Link
                    to={`/orders/${invoice.order_id}`}
                    className="link-accent"
                  >
                    {invoice.order_number}
                  </Link>
                ) : (
                  "\u2014"
                )}
              </div>
            </FormField>
            <FormField label="Měna">
              <div>{invoice.currency}</div>
            </FormField>
          </div>
          <div className="offers-form-row-3 mb-2">
            <FormField label="Datum vystavení">
              <div>{formatDate(invoice.issue_date)}</div>
            </FormField>
            <FormField label="Datum splatnosti">
              <div
                className={
                  invoice.status === "overdue" ? "text-danger fw-600" : ""
                }
              >
                {formatDate(invoice.due_date)}
              </div>
            </FormField>
            <FormField label="DÚZP">
              <div>{formatDate(invoice.tax_date)}</div>
            </FormField>
          </div>
          <div className="offers-form-row-3">
            <FormField label="Forma úhrady">
              <div>{invoice.payment_method}</div>
            </FormField>
            <FormField label="Variabilní symbol">
              <div>{invoice.invoice_number}</div>
            </FormField>
            <FormField label="Vystavil">
              <div>{invoice.issued_by || "\u2014"}</div>
            </FormField>
          </div>
          {invoice.paid_date && (
            <div className="admin-form-row mt-2">
              <FormField label="Datum úhrady">
                <div style={{ color: "var(--success)", fontWeight: 500 }}>
                  {formatDate(invoice.paid_date)}
                </div>
              </FormField>
            </div>
          )}
        </div>
      </motion.div>

      {/* Items */}
      <motion.div
        className="admin-card"
        initial={{ opacity: 0, y: 12 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.25, delay: 0.12 }}
      >
        <div className="admin-card-body">
          <div className="admin-card-header flex-between">
            <h3 className="admin-card-title">Položky</h3>
            {isDraft &&
              hasPermission("invoices.edit") &&
              (editingItems ? (
                <div className="flex-row gap-2">
                  <button
                    type="button"
                    onClick={addEditItem}
                    className="admin-btn admin-btn-secondary admin-btn-sm"
                  >
                    + Přidat položku
                  </button>
                  <button
                    onClick={saveEditItems}
                    className="admin-btn admin-btn-primary admin-btn-sm"
                    disabled={saving}
                  >
                    {saving ? "Ukládání..." : "Uložit položky"}
                  </button>
                  <button
                    onClick={() => setEditingItems(false)}
                    className="admin-btn admin-btn-secondary admin-btn-sm"
                  >
                    Zrušit
                  </button>
                </div>
              ) : (
                <button
                  onClick={startEditItems}
                  className="admin-btn admin-btn-secondary admin-btn-sm"
                >
                  Upravit položky
                </button>
              ))}
          </div>

          {editingItems ? (
            <DndContext
              sensors={dndSensors}
              collisionDetection={closestCenter}
              modifiers={[restrictToVerticalAxis, restrictToParentElement]}
              onDragEnd={handleEditDragEnd}
            >
              <SortableContext
                items={editItems.map((i) => i._key)}
                strategy={verticalListSortingStrategy}
              >
                <div className="admin-table-responsive">
                  <table className="admin-table">
                    <thead>
                      <tr>
                        <th style={{ width: "2rem" }} />
                        <th style={{ width: "2.5rem", textAlign: "center" }}>
                          #
                        </th>
                        <th>Popis</th>
                        <th style={{ width: "5.5rem", textAlign: "center" }}>
                          Množství
                        </th>
                        <th style={{ width: "5.5rem", textAlign: "center" }}>
                          Jednotka
                        </th>
                        <th style={{ width: "5.5rem", textAlign: "center" }}>
                          Jedn. cena
                        </th>
                        <th style={{ width: "5rem", textAlign: "center" }}>
                          %DPH
                        </th>
                        <th style={{ width: "5.5rem" }}></th>
                      </tr>
                    </thead>
                    <tbody>
                      {editItems.map((item, index) => (
                        <SortableInvoiceEditRow
                          key={item._key}
                          item={item}
                          index={index}
                          apply_vat={!!Number(invoice.apply_vat)}
                          onUpdate={updateEditItem}
                          onRemove={removeEditItem}
                          canDelete={editItems.length > 1}
                        />
                      ))}
                    </tbody>
                  </table>
                </div>
              </SortableContext>
            </DndContext>
          ) : (
            <>
              {invoice.items?.length > 0 ? (
                <div className="admin-table-responsive">
                  <table className="admin-table">
                    <thead>
                      <tr>
                        <th style={{ width: "2.5rem", textAlign: "center" }}>
                          #
                        </th>
                        <th>Popis</th>
                        <th style={{ width: "5.5rem", textAlign: "center" }}>
                          Množství
                        </th>
                        <th style={{ width: "5rem", textAlign: "center" }}>
                          Jednotka
                        </th>
                        <th style={{ width: "8rem", textAlign: "right" }}>
                          Jedn. cena
                        </th>
                        <th style={{ width: "4rem", textAlign: "center" }}>
                          %DPH
                        </th>
                        <th style={{ width: "9rem", textAlign: "right" }}>
                          Celkem
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      {invoice.items.map((item, index) => {
                        const lineSubtotal =
                          (Number(item.quantity) || 0) *
                          (Number(item.unit_price) || 0);
                        const lineVat = Number(invoice.apply_vat)
                          ? (lineSubtotal * (Number(item.vat_rate) || 0)) / 100
                          : 0;
                        return (
                          <tr key={item.id || index}>
                            <td
                              className="text-tertiary"
                              style={{ textAlign: "center", fontWeight: 500 }}
                            >
                              {index + 1}
                            </td>
                            <td className="fw-500">
                              {item.description || "\u2014"}
                            </td>
                            <td style={{ textAlign: "center" }}>
                              {item.quantity}{" "}
                              {item.unit && (
                                <span className="text-tertiary">
                                  {item.unit}
                                </span>
                              )}
                            </td>
                            <td style={{ textAlign: "center" }}>
                              {item.unit || "\u2014"}
                            </td>
                            <td className="admin-mono text-right">
                              {formatCurrency(
                                item.unit_price,
                                invoice.currency,
                              )}
                            </td>
                            <td style={{ textAlign: "center" }}>
                              {Number(invoice.apply_vat)
                                ? Number(item.vat_rate)
                                : 0}
                              %
                            </td>
                            <td
                              className="admin-mono"
                              style={{ textAlign: "right", fontWeight: 600 }}
                            >
                              {formatCurrency(
                                lineSubtotal + lineVat,
                                invoice.currency,
                              )}
                            </td>
                          </tr>
                        );
                      })}
                    </tbody>
                  </table>
                </div>
              ) : (
                <p className="text-tertiary">Žádné položky.</p>
              )}
            </>
          )}

          <div className="offers-totals-summary">
            <div className="offers-totals-row">
              <span>Mezisoučet:</span>
              <span>
                {formatCurrency(editTotals.subtotal, invoice.currency)}
              </span>
            </div>
            {Number(invoice.apply_vat) > 0 &&
              Object.entries(editTotals.vatByRate).map(([rate, amount]) => (
                <div key={rate} className="offers-totals-row">
                  <span>DPH {rate}%:</span>
                  <span>{formatCurrency(amount, invoice.currency)}</span>
                </div>
              ))}
            <div className="offers-totals-row offers-totals-total">
              <span>Celkem k úhradě:</span>
              <span>{formatCurrency(editTotals.total, invoice.currency)}</span>
            </div>
          </div>
        </div>
      </motion.div>

      {/* Notes */}
      <motion.div
        className="offers-editor-section"
        initial={{ opacity: 0, y: 12 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.25, delay: 0.15 }}
      >
        <h3 className="admin-card-title">Veřejné poznámky na faktuře</h3>
        {isPaid ? (
          notes && notes.trim() && notes !== "<p><br></p>" ? (
            <div
              dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(notes) }}
            />
          ) : (
            <p className="text-tertiary">Žádné poznámky.</p>
          )
        ) : (
          <>
            <textarea
              className="admin-form-input"
              rows={4}
              value={notes}
              onChange={(e) => setNotes(e.target.value)}
              placeholder="Poznámky zobrazené na faktuře..."
            />
            {hasPermission("invoices.edit") && (
              <div className="mt-2">
                <button
                  onClick={handleSaveNotes}
                  className="admin-btn admin-btn-secondary admin-btn-sm"
                  disabled={saving}
                >
                  {saving ? "Ukládání..." : "Uložit poznámky"}
                </button>
              </div>
            )}
          </>
        )}
      </motion.div>

      {/* Status change confirm */}
      <ConfirmModal
        isOpen={statusConfirm.show}
        onClose={() => setStatusConfirm({ show: false, status: null })}
        onConfirm={handleStatusChange}
        title="Změnit stav faktury"
        message={`Opravdu chcete změnit stav faktury "${invoice.invoice_number}" na "${STATUS_LABELS[statusConfirm.status || ""]}"?`}
        confirmText={
          TRANSITION_LABELS[statusConfirm.status || ""] || "Potvrdit"
        }
        cancelText="Zrušit"
        type="default"
      />

      {/* Delete confirm */}
      <ConfirmModal
        isOpen={deleteConfirm}
        onClose={() => setDeleteConfirm(false)}
        onConfirm={handleDelete}
        title="Smazat fakturu"
        message={`Opravdu chcete smazat fakturu "${invoice.invoice_number}"? Tato akce je nevratná.`}
        confirmText="Smazat"
        cancelText="Zrušit"
        type="danger"
        loading={deleting}
      />
    </div>
  );
}