import { useState, useEffect, useMemo, useCallback, useRef } from "react";
import {
  useNavigate,
  useSearchParams,
  useParams,
  Link as RouterLink,
} from "react-router-dom";
import { useQuery } from "@tanstack/react-query";
import DOMPurify from "dompurify";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import useMediaQuery from "@mui/material/useMediaQuery";
import { useTheme } from "@mui/material/styles";
import IconButton from "@mui/material/IconButton";
import CircularProgress from "@mui/material/CircularProgress";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import { useApiMutation } from "../lib/queries/mutations";
import { useAlert } from "../context/AlertContext";
import { useAuth } from "../context/AuthContext";
import Forbidden from "../components/Forbidden";
import RichEditor from "../components/RichEditor";
import SectionsEditor, {
  type DocumentSection,
} from "../components/document/SectionsEditor";
import {
  DndContext,
  closestCenter,
  KeyboardSensor,
  MouseSensor,
  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 { companySettingsOptions } from "../lib/queries/settings";
import { invoiceDetailOptions } from "../lib/queries/invoices";
import { offerCustomersOptions } from "../lib/queries/offers";
import { bankAccountsOptions } from "../lib/queries/common";
import { jsonQuery } from "../lib/apiAdapter";
import {
  formatCurrency,
  formatDate,
  numberOr,
  todayLocalStr,
} from "../utils/formatters";
import { normalizeDateStr } from "../utils/attendanceHelpers";
import {
  Button,
  Card,
  TextField,
  Select,
  DateField,
  Field,
  StatusChip,
  CheckboxField,
  ConfirmDialog,
  EmptyState,
  LoadingState,
  PageEnter,
  RichTextView,
  CustomerPicker,
  headerActionsSx,
} from "../ui";
import {
  INVOICE_STATUS,
  statusLabel,
  statusColor,
  documentNumberLabel,
} from "../lib/documentStatus";

const API_BASE = "/api/admin";

/**
 * Add `days` to a base date and return `YYYY-MM-DD` in LOCAL (Prague) time.
 * `base` is an optional `YYYY-MM-DD` string; when omitted, "today" (local) is
 * used. We build the Date from the local year/month/day parts (so it's a local
 * midnight, not the UTC midnight `new Date("YYYY-MM-DD")` would give) and read
 * it back with local getters — never via `toISOString()`, which would shift a
 * day during the evening Prague window. See utils/formatters.todayLocalStr.
 */
function addDaysLocalStr(days: number, base?: string): string {
  let y: number, m: number, d: number;
  const parts = base ? /^(\d{4})-(\d{2})-(\d{2})/.exec(base) : null;
  if (parts) {
    y = Number(parts[1]);
    m = Number(parts[2]) - 1;
    d = Number(parts[3]);
  } else {
    const now = new Date();
    y = now.getFullYear();
    m = now.getMonth();
    d = now.getDate();
  }
  const result = new Date(y, m, d + days);
  const mm = String(result.getMonth() + 1).padStart(2, "0");
  const dd = String(result.getDate()).padStart(2, "0");
  return `${result.getFullYear()}-${mm}-${dd}`;
}

const TRANSITION_LABELS: Record<string, string> = { paid: "Zaplaceno" };

// The live (finalized) status for an invoice — assigning it (on create or on
// finalizing a draft) makes the backend consume the official invoice number.
const LIVE_STATUS = "issued";

const BackIcon = (
  <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>
);

const FileIcon = (
  <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>
);

const DragIcon = (
  <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>
);

const RemoveIcon = (
  <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>
);

interface InvoiceItem {
  id?: number;
  _key: string;
  description: string;
  item_description: string;
  // Held as the raw typed string while editing so the field can be cleared
  // (empty renders fine in a type="number" input). Coerced via Number(x) || 0
  // only where used (live totals + save payload). vat_rate stays numeric: it
  // is edited via a Select, never a free-text number input.
  quantity: string | number;
  unit: string;
  unit_price: string | number;
  vat_rate: number;
}

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;
  internal_notes: string;
  language: string;
  bank_account_id: number | string;
  bank_name: string;
  bank_swift: string;
  bank_iban: string;
  bank_account: string;
}

// Sortable row for create mode
function SortableInvoiceRow({
  item,
  index,
  currency,
  apply_vat,
  vatOptions,
  onUpdate,
  onRemove,
  canDelete,
}: {
  item: InvoiceItem;
  index: number;
  currency: string;
  apply_vat: boolean;
  vatOptions: { value: number; label: string }[];
  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 theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
    opacity: isDragging ? 0.5 : 1,
    background: isDragging ? "var(--mui-palette-action-hover)" : undefined,
    position: "relative" as const,
    zIndex: isDragging ? 10 : undefined,
  };
  const lineTotal =
    (Number(item.quantity) || 0) * (Number(item.unit_price) || 0);

  if (isMobile) {
    return (
      <Box
        ref={setNodeRef}
        sx={{
          border: 1,
          borderColor: "divider",
          borderRadius: 2,
          p: 1.5,
          display: "flex",
          flexDirection: "column",
          gap: 1.25,
          bgcolor: "background.paper",
          ...style,
        }}
      >
        <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
          <IconButton
            size="small"
            {...attributes}
            {...listeners}
            title="Přetáhnout"
            aria-label="Přetáhnout"
            sx={{
              cursor: "grab",
              color: "text.secondary",
              touchAction: "none",
            }}
          >
            {DragIcon}
          </IconButton>
          <Typography
            variant="caption"
            sx={{ color: "text.secondary", fontWeight: 700 }}
          >
            Položka {index + 1}
          </Typography>
          <Box sx={{ flex: 1 }} />
          {canDelete && (
            <IconButton
              color="error"
              size="small"
              onClick={() => onRemove(index)}
              title="Odebrat"
              aria-label="Odebrat"
            >
              {RemoveIcon}
            </IconButton>
          )}
        </Box>
        <TextField
          label="Popis"
          value={item.description}
          onChange={(e) => onUpdate(index, "description", e.target.value)}
          placeholder="Popis položky..."
        />
        <TextField
          label="Podrobný popis"
          value={item.item_description}
          onChange={(e) => onUpdate(index, "item_description", e.target.value)}
          placeholder="Volitelný"
          multiline
          rows={2}
          sx={{ "& textarea": { resize: "vertical" } }}
        />
        <Box
          sx={{
            display: "grid",
            gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
            gap: 1,
          }}
        >
          <TextField
            label="Množství"
            type="number"
            value={item.quantity ?? ""}
            onChange={(e) => onUpdate(index, "quantity", e.target.value)}
            slotProps={{ htmlInput: { min: "0", step: "any" } }}
          />
          <TextField
            label="Jednotka"
            value={item.unit}
            onChange={(e) => onUpdate(index, "unit", e.target.value)}
            placeholder="ks"
          />
          <TextField
            label="Jedn. cena"
            type="number"
            value={item.unit_price ?? ""}
            onChange={(e) => onUpdate(index, "unit_price", e.target.value)}
            slotProps={{ htmlInput: { step: "any" } }}
          />
          {apply_vat && (
            <Select
              label="DPH"
              value={String(item.vat_rate)}
              onChange={(val) => onUpdate(index, "vat_rate", Number(val))}
              options={vatOptions.map((o) => ({
                value: String(o.value),
                label: o.label,
              }))}
            />
          )}
        </Box>
        <Box
          sx={{
            display: "flex",
            justifyContent: "flex-end",
            alignItems: "baseline",
            gap: 1,
            pt: 0.5,
            borderTop: 1,
            borderColor: "divider",
          }}
        >
          <Typography variant="caption" sx={{ color: "text.secondary" }}>
            Celkem
          </Typography>
          <Typography
            sx={{ fontFamily: "'DM Mono', Menlo, monospace", fontWeight: 600 }}
          >
            {formatCurrency(lineTotal, currency)}
          </Typography>
        </Box>
      </Box>
    );
  }

  return (
    <TableRow ref={setNodeRef} sx={style}>
      <TableCell sx={{ width: "2rem", px: 0.5 }}>
        <IconButton
          size="small"
          {...attributes}
          {...listeners}
          title="Přetáhnout"
          aria-label="Přetáhnout"
          sx={{ cursor: "grab", color: "text.secondary", touchAction: "none" }}
        >
          {DragIcon}
        </IconButton>
      </TableCell>
      <TableCell
        align="center"
        sx={{ color: "text.secondary", fontWeight: 500 }}
      >
        {index + 1}
      </TableCell>
      <TableCell sx={{ verticalAlign: "top" }}>
        <Box sx={{ display: "flex", flexDirection: "column", gap: 0.5 }}>
          <TextField
            value={item.description}
            onChange={(e) => onUpdate(index, "description", e.target.value)}
            placeholder="Popis položky..."
            sx={{ "& input": { fontWeight: 500 } }}
          />
          <TextField
            value={item.item_description}
            onChange={(e) =>
              onUpdate(index, "item_description", e.target.value)
            }
            placeholder="Podrobný popis (volitelný)"
            multiline
            rows={2}
            sx={{
              "& textarea": {
                fontSize: "0.8rem",
                opacity: 0.8,
                resize: "vertical",
              },
            }}
          />
        </Box>
      </TableCell>
      <TableCell>
        <TextField
          type="number"
          value={item.quantity ?? ""}
          onChange={(e) => onUpdate(index, "quantity", e.target.value)}
          slotProps={{ htmlInput: { min: "0", step: "any" } }}
          sx={{ "& input": { textAlign: "center" } }}
        />
      </TableCell>
      <TableCell>
        <TextField
          value={item.unit}
          onChange={(e) => onUpdate(index, "unit", e.target.value)}
          placeholder="ks"
          sx={{ "& input": { textAlign: "center" } }}
        />
      </TableCell>
      <TableCell>
        <TextField
          type="number"
          value={item.unit_price ?? ""}
          onChange={(e) => onUpdate(index, "unit_price", e.target.value)}
          slotProps={{ htmlInput: { step: "any" } }}
          sx={{ "& input": { textAlign: "right" } }}
        />
      </TableCell>
      {apply_vat ? (
        <TableCell>
          <Select
            value={String(item.vat_rate)}
            onChange={(val) => onUpdate(index, "vat_rate", Number(val))}
            sx={{ minWidth: "4.5rem" }}
            options={vatOptions.map((o) => ({
              value: String(o.value),
              label: o.label,
            }))}
          />
        </TableCell>
      ) : null}
      <TableCell
        align="right"
        sx={{
          fontWeight: 600,
          whiteSpace: "nowrap",
          fontFamily: "'DM Mono', Menlo, monospace",
        }}
      >
        {formatCurrency(lineTotal, currency)}
      </TableCell>
      <TableCell>
        {canDelete && (
          <IconButton
            color="error"
            size="small"
            onClick={() => onRemove(index)}
            title="Odebrat"
            aria-label="Odebrat"
          >
            {RemoveIcon}
          </IconButton>
        )}
      </TableCell>
    </TableRow>
  );
}

export default function InvoiceDetail() {
  const { id } = useParams<{ id: string }>();
  const isEdit = Boolean(id);
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));

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

  // MouseSensor (NOT PointerSensor): PointerSensor also receives touch-derived
  // pointer events and its 5px distance constraint fires before the
  // TouchSensor's long-press delay — the browser then claims the gesture for
  // scrolling (pointercancel) and the drag dies. Mouse handles desktop,
  // TouchSensor handles touch via long-press; the drag handles additionally
  // carry touch-action: none so the browser never starts a scroll from them.
  const dndSensors = useSensors(
    useSensor(MouseSensor, { activationConstraint: { distance: 5 } }),
    useSensor(TouchSensor, {
      activationConstraint: { delay: 300, tolerance: 8 },
    }),
    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: todayLocalStr(),
    due_date: addDaysLocalStr(14),
    tax_date: todayLocalStr(),
    currency: "CZK",
    apply_vat: 1,
    vat_rate: 21,
    payment_method: "Příkazem",
    constant_symbol: "0308",
    issued_by: user?.fullName || "",
    billing_text: "",
    internal_notes: "",
    language: "cs",
    bank_account_id: "",
    bank_name: "",
    bank_swift: "",
    bank_iban: "",
    bank_account: "",
  }));

  const [dueDays, setDueDays] = useState(14);
  // Rich-text CZ/EN "Obsah" sections (printed after the items on the PDF —
  // shared editor with offers/issued orders).
  const [sections, setSections] = useState<DocumentSection[]>([]);
  const [items, setItems] = useState<InvoiceItem[]>(() => [
    {
      _key: "inv-1",
      description: "",
      item_description: "",
      quantity: 1,
      unit: "ks",
      unit_price: 0,
      vat_rate: 21,
    },
  ]);
  const [errors, setErrors] = useState<Record<string, string>>({});
  const [saving, setSaving] = useState(false);
  // Which save action is in flight ("draft" | LIVE_STATUS | "save"), so only the
  // clicked button shows its spinner — `saving` still disables all of them to
  // prevent a concurrent double-submit.
  const [savingAction, setSavingAction] = useState<string | null>(null);
  const [dataReady, setDataReady] = useState(false);
  const [invoiceNumber, setInvoiceNumber] = useState("");
  const initialSnapshotRef = useRef<string | null>(null);

  const companySettings = useQuery(companySettingsOptions()).data;

  useEffect(() => {
    if (companySettings && !isEdit) {
      setForm((prev) => ({
        ...prev,
        currency:
          prev.currency === "CZK"
            ? companySettings.default_currency || "CZK"
            : prev.currency,
        vat_rate:
          prev.vat_rate === 21
            ? (companySettings.default_vat_rate ?? 21)
            : prev.vat_rate,
      }));
    }
  }, [companySettings, isEdit]);

  const vatOptions = (
    companySettings?.available_vat_rates || [0, 10, 12, 15, 21]
  ).map((v) => ({
    value: v,
    label: `${v}%`,
  }));

  // ─── TanStack Query ───

  const customersQuery = useQuery(offerCustomersOptions());
  const customers = customersQuery.data ?? [];

  const bankAccountsQuery = useQuery(bankAccountsOptions());
  const bankAccounts = bankAccountsQuery.data ?? [];

  const invoiceQuery = useQuery(invoiceDetailOptions(id));
  const invoice = invoiceQuery.data ?? null;

  const nextNumberQuery = useQuery({
    queryKey: ["invoices", "next-number"],
    queryFn: () =>
      jsonQuery<{ next_number?: string; number?: string }>(
        `${API_BASE}/invoices/next-number`,
      ).then((d) => d?.next_number || d?.number || ""),
    enabled: !isEdit,
  });

  const orderDataQuery = useQuery({
    queryKey: ["invoices", "order-data", fromOrderId],
    queryFn: () =>
      jsonQuery<Record<string, unknown>>(
        `${API_BASE}/invoices/order-data/${fromOrderId}`,
      ),
    enabled: !!fromOrderId,
  });

  // ─── Edit mode state ───
  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 blobTimeoutsRef = useRef<ReturnType<typeof setTimeout>[]>([]);
  const [deleting, setDeleting] = useState(false);

  useEffect(() => {
    return () => {
      blobTimeoutsRef.current.forEach(clearTimeout);
    };
  }, []);

  // After an in-place draft→issued finalize, the one-shot hydration effect below
  // (gated by dataReady) won't re-run, so the freshly-assigned number from the
  // refetched query is mirrored into the local field here (matches the
  // issued-order page's po_number resync).
  useEffect(() => {
    if (
      isEdit &&
      invoice?.invoice_number &&
      invoice.invoice_number !== invoiceNumber
    ) {
      setInvoiceNumber(invoice.invoice_number);
    }
  }, [isEdit, invoice?.invoice_number, invoiceNumber]);

  // ─── Sync query data to form state ───

  // Edit mode: populate form from invoice data
  useEffect(() => {
    if (!isEdit || dataReady) return;
    if (
      invoiceQuery.isLoading ||
      bankAccountsQuery.isLoading ||
      customersQuery.isLoading
    )
      return;
    if (!invoiceQuery.data) return;

    const inv = invoiceQuery.data;

    // Match bank account from invoice's bank details
    let matchedBankId: number | string = "";
    const bankData = bankAccountsQuery.data ?? [];
    const match = bankData.find(
      (b) =>
        (inv.bank_iban && b.iban === inv.bank_iban) ||
        (inv.bank_account && b.account_number === inv.bank_account),
    );
    if (match) matchedBankId = match.id;

    const formData: InvoiceForm = {
      customer_id: inv.customer_id || null,
      customer_name: inv.customer_name || "",
      order_id: inv.order_id || null,
      issue_date: normalizeDateStr(inv.issue_date),
      due_date: normalizeDateStr(inv.due_date),
      tax_date: normalizeDateStr(inv.tax_date),
      currency: inv.currency || "CZK",
      apply_vat: Number(inv.apply_vat) ? 1 : 0,
      vat_rate: numberOr(inv.vat_rate, 21),
      payment_method: inv.payment_method || "Příkazem",
      constant_symbol: inv.constant_symbol || "0308",
      issued_by: inv.issued_by || "",
      billing_text: inv.billing_text || "",
      internal_notes: inv.internal_notes || "",
      language: inv.language || "cs",
      bank_account_id: matchedBankId,
      bank_name: inv.bank_name || "",
      bank_swift: inv.bank_swift || "",
      bank_iban: inv.bank_iban || "",
      bank_account: inv.bank_account || "",
    };
    setForm(formData);
    setInvoiceNumber(inv.invoice_number || "");

    // Calculate dueDays from existing dates
    if (inv.issue_date && inv.due_date) {
      const issue = new Date(inv.issue_date);
      const due = new Date(inv.due_date);
      const diffDays = Math.round(
        (due.getTime() - issue.getTime()) / (1000 * 60 * 60 * 24),
      );
      if (diffDays > 0 && diffDays <= 60) setDueDays(diffDays);
    }

    // Populate items from existing invoice
    const invItems = inv.items;
    const mappedItems =
      invItems && invItems.length > 0
        ? invItems.map((item) => ({
            _key: `inv-${++keyCounterRef.current}`,
            id: item.id,
            description: item.description || "",
            item_description: item.item_description || "",
            quantity: Number(item.quantity) || 1,
            unit: item.unit || "",
            unit_price: Number(item.unit_price) || 0,
            // Per-line VAT: hydrate from the ITEM's own stored rate (a real DB
            // column returned by the detail endpoint) — falling back to the
            // invoice-level rate only when the line carries none. Hydrating
            // from the invoice rate corrupted mixed-rate invoices on re-save.
            vat_rate: numberOr(item.vat_rate, numberOr(inv.vat_rate, 21)),
          }))
        : [];
    if (mappedItems.length > 0) {
      setItems(mappedItems);
    }

    // Populate sections from existing invoice
    const mappedSections =
      Array.isArray(inv.sections) && inv.sections.length > 0
        ? inv.sections.map((s) => ({
            title: s.title || "",
            title_cz: s.title_cz || "",
            content: s.content || "",
          }))
        : [];
    setSections(mappedSections);

    // Capture initial snapshot for dirty-checking
    initialSnapshotRef.current = JSON.stringify({
      form: formData,
      items: mappedItems,
      sections: mappedSections,
    });

    setDataReady(true);
  }, [
    isEdit,
    dataReady,
    invoiceQuery.isLoading,
    invoiceQuery.data,
    bankAccountsQuery.isLoading,
    bankAccountsQuery.data,
    customersQuery.isLoading,
  ]);

  // Create mode: populate form from query data
  useEffect(() => {
    if (isEdit || dataReady) return;
    if (
      nextNumberQuery.isLoading ||
      bankAccountsQuery.isLoading ||
      customersQuery.isLoading
    )
      return;
    if (fromOrderId && orderDataQuery.isLoading) return;

    // Set invoice number from the server's next-number.
    if (nextNumberQuery.data) {
      setInvoiceNumber(nextNumberQuery.data);
    }

    // Set default bank account
    const defaultAcc = bankAccounts.find((a) => 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. Orders no longer carry VAT (not tax documents) —
    // the invoice decides its own VAT: default rate from company settings,
    // apply_vat on.
    if (fromOrderId && orderDataQuery.data) {
      const order = orderDataQuery.data;
      const vatRate = numberOr(companySettings?.default_vat_rate, 21);
      setForm((prev) => ({
        ...prev,
        customer_id: order.customer_id as number,
        customer_name: (order.customer_name as string) || "",
        order_id: order.id as number,
        currency:
          (order.currency as string) ||
          companySettings?.default_currency ||
          "CZK",
        apply_vat: 1,
        vat_rate: vatRate,
      }));
      const orderItems = order.items as Record<string, unknown>[] | undefined;
      if (orderItems && orderItems.length > 0) {
        setItems(
          orderItems.map((item) => ({
            _key: `inv-${++keyCounterRef.current}`,
            description: (item.description as string) || "",
            item_description: (item.item_description as string) || "",
            quantity: Number(item.quantity) || 1,
            unit: (item.unit as string) || "",
            unit_price: Number(item.unit_price) || 0,
            vat_rate: vatRate,
          })),
        );
      }
    }

    setDataReady(true);
  }, [
    isEdit,
    dataReady,
    nextNumberQuery.isLoading,
    nextNumberQuery.data,
    bankAccountsQuery.isLoading,
    bankAccountsQuery.data,
    customersQuery.isLoading,
    fromOrderId,
    orderDataQuery.isLoading,
    orderDataQuery.data,
    companySettings,
    bankAccounts,
  ]);

  // Capture initial snapshot for dirty-checking once data sync completes.
  // Edit mode: captured inside the sync effect from raw query data.
  // Create mode: captured on the first render after sync effects populate the form.
  if (dataReady && !initialSnapshotRef.current) {
    initialSnapshotRef.current = JSON.stringify({ form, items, sections });
  }

  const isDirty = useMemo(() => {
    if (!initialSnapshotRef.current) return false;
    return (
      JSON.stringify({ form, items, sections }) !== initialSnapshotRef.current
    );
  }, [form, items, sections]);

  useEffect(() => {
    if (!isDirty) return;
    const handler = (e: BeforeUnloadEvent) => {
      e.preventDefault();
      e.returnValue = "";
    };
    window.addEventListener("beforeunload", handler);
    return () => window.removeEventListener("beforeunload", handler);
  }, [isDirty]);

  const computedDueDate = useMemo(() => {
    if (!form.issue_date) return "";
    return addDaysLocalStr(dueDays, form.issue_date);
  }, [form.issue_date, dueDays]);

  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 = (id: number | null) => {
    const customer = id != null ? customers.find((c) => c.id === id) : null;
    setForm((prev) => ({
      ...prev,
      customer_id: id,
      customer_name: customer?.name ?? "",
    }));
    setErrors((prev) => ({ ...prev, customer_id: "" }));
  };

  // ─── 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/Edit mode: submit ───
  const saveMutation = useApiMutation<
    Record<string, unknown>,
    { invoice_id: number }
  >({
    url: () => (isEdit ? `${API_BASE}/invoices/${id}` : `${API_BASE}/invoices`),
    method: () => (isEdit ? "PUT" : "POST"),
    invalidate: ["invoices", "orders"],
    onSuccess: (data) => {
      const invoiceId = isEdit ? Number(id) : data.invoice_id;
      // PDF binary generation — KEEP as raw apiFetch
      void apiFetch(
        `${API_BASE}/invoices-pdf/${invoiceId}?lang=${form.language}&save=1`,
      ).catch(() => {});
    },
  });

  const statusMutation = useApiMutation<{ status: string }, unknown>({
    url: () => `${API_BASE}/invoices/${id}`,
    method: () => "PUT",
    invalidate: ["invoices", "orders"],
  });

  const invoiceDeleteMutation = useApiMutation<void, unknown>({
    url: () => `${API_BASE}/invoices/${id}`,
    method: () => "DELETE",
    invalidate: ["invoices", "orders"],
  });

  const handleCreateSubmit = async (targetStatus?: string) => {
    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);
    setSavingAction(targetStatus ?? "save");
    try {
      const payload: Record<string, unknown> = {
        ...form,
        due_date: computedDueDate || form.due_date,
        items: items
          .filter((i) => i.description.trim())
          .map((item, i) => ({
            ...item,
            // Coerce the raw typed strings back to numbers so an empty/partial
            // field never reaches the server as NaN (mirrors createTotals).
            quantity: Number(item.quantity) || 0,
            unit_price: Number(item.unit_price) || 0,
            position: i,
          })),
        sections: sections.map((s, i) => ({
          title: s.title,
          title_cz: s.title_cz,
          content: s.content,
          position: i,
        })),
      };
      // Only set status when a target is given (create-as-draft / create-as-live
      // / finalize). Editing a live invoice sends no status — the backend keeps
      // its current status.
      if (targetStatus) payload.status = targetStatus;
      // The invoice number is NOT user-editable for drafts (it is NULL until
      // finalized). Send it back only when editing an already-numbered invoice.
      if (isEdit && invoice?.status !== "draft")
        payload.invoice_number = invoiceNumber;

      const data = await saveMutation.mutateAsync(payload);
      alert.success(isEdit ? "Faktura byla uložena" : "Faktura byla vytvořena");
      initialSnapshotRef.current = JSON.stringify({ form, items, sections });
      if (!isEdit) {
        navigate(`/invoices/${data.invoice_id}`);
      }
    } catch (e) {
      alert.error(
        e instanceof Error
          ? e.message
          : isEdit
            ? "Nepodařilo se uložit fakturu"
            : "Nepodařilo se vytvořit fakturu",
      );
    } finally {
      setSaving(false);
      setSavingAction(null);
    }
  };

  // Native form submit (e.g. Enter): route to the right save path. Create →
  // finalize live; editing a draft → save draft (the visible primary button);
  // editing a live invoice → plain save (no status change).
  const handleFormSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!isEdit) void handleCreateSubmit(LIVE_STATUS);
    else if (invoice?.status === "draft") void handleCreateSubmit("draft");
    else void handleCreateSubmit();
  };

  // ─── Edit mode: status change ───
  const handleStatusChange = async () => {
    if (!statusConfirm.status) return;
    const newStatus = statusConfirm.status;
    setStatusChanging(newStatus);
    setStatusConfirm({ show: false, status: null });
    try {
      await statusMutation.mutateAsync({ status: newStatus });
      alert.success("Stav byl změněn");
    } catch (e) {
      alert.error(e instanceof Error ? e.message : "Chyba připojení");
    } finally {
      setStatusChanging(null);
    }
  };

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

  // ─── Edit mode: delete ───
  const handleDelete = async () => {
    setDeleting(true);
    try {
      await invoiceDeleteMutation.mutateAsync(undefined);
      alert.success("Faktura byla smazána");
      navigate("/invoices");
    } catch (e) {
      alert.error(e instanceof Error ? e.message : "Chyba připojení");
    } finally {
      setDeleting(false);
      setDeleteConfirm(false);
    }
  };

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

  // ═══════════════════════════════════════════════════════════
  // PAID INVOICE — read-only view
  // ═══════════════════════════════════════════════════════════
  const isPaid = isEdit && invoice?.status === "paid";

  if (isEdit && !invoice) return null;

  if (isPaid && invoice) {
    if (!dataReady) {
      return <LoadingState />;
    }
    return (
      <PageEnter>
        {/* Header */}
        <Box>
          <Box
            sx={{
              display: "flex",
              alignItems: "flex-start",
              justifyContent: "space-between",
              flexWrap: "wrap",
              gap: 2,
              mb: 3,
            }}
          >
            {/* flexWrap: long document titles must drop below the Zpět button
                on phones instead of overflowing the viewport. */}
            <Box
              sx={{
                display: "flex",
                alignItems: "center",
                gap: 2,
                flexWrap: "wrap",
              }}
            >
              <Button
                component={RouterLink}
                to="/invoices?tab=issued"
                variant="outlined"
                color="inherit"
                startIcon={BackIcon}
              >
                Zpět
              </Button>
              <Box
                sx={{
                  display: "flex",
                  alignItems: "center",
                  gap: 1.5,
                  flexWrap: "wrap",
                }}
              >
                <Typography variant="h4">
                  Faktura
                  <Box
                    component="span"
                    sx={{ color: "text.secondary", ml: 1, fontWeight: 400 }}
                  >
                    {documentNumberLabel(invoice.invoice_number)}
                  </Box>
                </Typography>
                <StatusChip
                  label={statusLabel(INVOICE_STATUS, invoice.status)}
                  color={statusColor(INVOICE_STATUS, invoice.status)}
                />
              </Box>
            </Box>
            <Box sx={headerActionsSx}>
              {hasPermission("invoices.view") && (
                <Button
                  onClick={() => handleViewPdf(invoice.language || "cs")}
                  variant="outlined"
                  color="inherit"
                  disabled={pdfLoading}
                  startIcon={
                    pdfLoading ? (
                      <CircularProgress size={16} color="inherit" />
                    ) : (
                      FileIcon
                    )
                  }
                >
                  Zobrazit fakturu
                </Button>
              )}
              {/* A paid invoice is a settled financial record — never deletable
                  from the UI. (Backend rejection of deleting a paid invoice is a
                  separate hardening, out of scope here.) */}
              {hasPermission("invoices.delete") &&
                invoice.status !== "paid" && (
                  <Button
                    onClick={() => setDeleteConfirm(true)}
                    variant="outlined"
                    color="error"
                  >
                    Smazat
                  </Button>
                )}
            </Box>
          </Box>
        </Box>

        {/* Info */}
        <Card sx={{ mb: 3 }}>
          <Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
            Informace
          </Typography>
          <Box
            sx={{
              display: "grid",
              gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr 1fr" },
              gap: 2,
              mb: 2,
            }}
          >
            <Field label="Zákazník">
              <Typography variant="body2" sx={{ fontWeight: 500 }}>
                {invoice.customer_name || "—"}
              </Typography>
              {invoice.customer && (
                <Typography
                  variant="caption"
                  color="text.secondary"
                  sx={{ display: "block", mt: 0.25 }}
                >
                  {invoice.customer.company_id &&
                    `IČ: ${invoice.customer.company_id}`}
                  {invoice.customer.vat_id &&
                    ` · DIČ: ${invoice.customer.vat_id}`}
                </Typography>
              )}
            </Field>
            <Field label="Objednávka">
              <Typography variant="body2">
                {invoice.order_id ? (
                  <Box
                    component={RouterLink}
                    to={`/orders/${invoice.order_id}`}
                    sx={{
                      color: "primary.main",
                      textDecoration: "none",
                      "&:hover": { textDecoration: "underline" },
                    }}
                  >
                    {invoice.order_number}
                  </Box>
                ) : (
                  "—"
                )}
              </Typography>
            </Field>
            <Field label="Měna">
              <Typography variant="body2">{invoice.currency}</Typography>
            </Field>
          </Box>
          <Box
            sx={{
              display: "grid",
              gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr 1fr" },
              gap: 2,
              mb: 2,
            }}
          >
            <Field label="Datum vystavení">
              <Typography variant="body2">
                {formatDate(invoice.issue_date)}
              </Typography>
            </Field>
            <Field label="Datum splatnosti">
              <Typography variant="body2">
                {formatDate(invoice.due_date)}
              </Typography>
            </Field>
            <Field label="DÚZP">
              <Typography variant="body2">
                {formatDate(invoice.tax_date)}
              </Typography>
            </Field>
          </Box>
          <Box
            sx={{
              display: "grid",
              gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr 1fr" },
              gap: 2,
            }}
          >
            <Field label="Forma úhrady">
              <Typography variant="body2">{invoice.payment_method}</Typography>
            </Field>
            <Field label="Variabilní symbol">
              <Typography variant="body2">{invoice.invoice_number}</Typography>
            </Field>
          </Box>
          {invoice.paid_date && (
            <Box sx={{ mt: 2 }}>
              <Field label="Datum úhrady">
                <Typography
                  variant="body2"
                  sx={{ fontWeight: 500, color: "success.main" }}
                >
                  {formatDate(invoice.paid_date)}
                </Typography>
              </Field>
            </Box>
          )}
        </Card>

        {/* Items (read-only) */}
        <Card sx={{ mb: 3 }}>
          <Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
            Položky
          </Typography>
          {invoice.items && invoice.items.length > 0 ? (
            isMobile ? (
              <Box sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}>
                {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 (
                    <Box
                      key={item.id || index}
                      sx={{
                        border: 1,
                        borderColor: "divider",
                        borderRadius: 2,
                        p: 1.5,
                        display: "flex",
                        flexDirection: "column",
                        gap: 0.75,
                      }}
                    >
                      <Box sx={{ fontWeight: 600 }}>
                        {item.description || "—"}
                        {item.item_description && (
                          <Typography
                            variant="caption"
                            sx={{
                              display: "block",
                              opacity: 0.8,
                              fontWeight: 400,
                            }}
                          >
                            {item.item_description}
                          </Typography>
                        )}
                      </Box>
                      <Box
                        sx={{
                          display: "flex",
                          justifyContent: "space-between",
                          fontSize: ".85rem",
                        }}
                      >
                        <Typography variant="caption" color="text.secondary">
                          Množství
                        </Typography>
                        <span>
                          {item.quantity} {item.unit}
                        </span>
                      </Box>
                      <Box
                        sx={{
                          display: "flex",
                          justifyContent: "space-between",
                          fontSize: ".85rem",
                        }}
                      >
                        <Typography variant="caption" color="text.secondary">
                          Jedn. cena
                        </Typography>
                        <Box
                          component="span"
                          sx={{ fontFamily: "'DM Mono', Menlo, monospace" }}
                        >
                          {formatCurrency(item.unit_price, invoice.currency)}
                        </Box>
                      </Box>
                      {Number(invoice.apply_vat) ? (
                        <Box
                          sx={{
                            display: "flex",
                            justifyContent: "space-between",
                            fontSize: ".85rem",
                          }}
                        >
                          <Typography variant="caption" color="text.secondary">
                            %DPH
                          </Typography>
                          <span>{Number(item.vat_rate)}%</span>
                        </Box>
                      ) : null}
                      <Box
                        sx={{
                          display: "flex",
                          justifyContent: "space-between",
                          alignItems: "baseline",
                          pt: 0.5,
                          borderTop: 1,
                          borderColor: "divider",
                        }}
                      >
                        <Typography
                          variant="caption"
                          sx={{ color: "text.secondary", fontWeight: 700 }}
                        >
                          Celkem
                        </Typography>
                        <Box
                          component="span"
                          sx={{
                            fontFamily: "'DM Mono', Menlo, monospace",
                            fontWeight: 600,
                          }}
                        >
                          {formatCurrency(
                            lineSubtotal + lineVat,
                            invoice.currency,
                          )}
                        </Box>
                      </Box>
                    </Box>
                  );
                })}
              </Box>
            ) : (
              <TableContainer sx={{ overflowX: "auto" }}>
                <Table
                  size="small"
                  sx={{ "& td, & th": { borderColor: "divider" } }}
                >
                  <TableHead>
                    <TableRow>
                      <TableCell sx={{ width: "2.5rem" }} align="center">
                        #
                      </TableCell>
                      <TableCell>Popis</TableCell>
                      <TableCell sx={{ width: "5.5rem" }} align="center">
                        Množství
                      </TableCell>
                      <TableCell sx={{ width: "5rem" }} align="center">
                        Jednotka
                      </TableCell>
                      <TableCell sx={{ width: "8rem" }} align="center">
                        Jedn. cena
                      </TableCell>
                      <TableCell sx={{ width: "4rem" }} align="center">
                        DPH
                      </TableCell>
                      <TableCell sx={{ width: "9rem" }} align="right">
                        Celkem
                      </TableCell>
                    </TableRow>
                  </TableHead>
                  <TableBody>
                    {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 (
                        <TableRow key={item.id || index}>
                          <TableCell
                            align="center"
                            sx={{ color: "text.secondary", fontWeight: 500 }}
                          >
                            {index + 1}
                          </TableCell>
                          <TableCell sx={{ fontWeight: 500 }}>
                            {item.description || "—"}
                            {item.item_description && (
                              <Typography
                                variant="caption"
                                sx={{
                                  display: "block",
                                  opacity: 0.8,
                                  mt: "2px",
                                }}
                              >
                                {item.item_description}
                              </Typography>
                            )}
                          </TableCell>
                          <TableCell align="center">
                            {item.quantity}{" "}
                            {item.unit && (
                              <Box
                                component="span"
                                sx={{ color: "text.secondary" }}
                              >
                                {item.unit}
                              </Box>
                            )}
                          </TableCell>
                          <TableCell align="center">
                            {item.unit || "—"}
                          </TableCell>
                          <TableCell
                            align="right"
                            sx={{
                              fontFamily: "'DM Mono', Menlo, monospace",
                            }}
                          >
                            {formatCurrency(item.unit_price, invoice.currency)}
                          </TableCell>
                          <TableCell align="center">
                            {Number(invoice.apply_vat)
                              ? Number(item.vat_rate)
                              : 0}
                            %
                          </TableCell>
                          <TableCell
                            align="right"
                            sx={{
                              fontFamily: "'DM Mono', Menlo, monospace",
                              fontWeight: 600,
                            }}
                          >
                            {formatCurrency(
                              lineSubtotal + lineVat,
                              invoice.currency,
                            )}
                          </TableCell>
                        </TableRow>
                      );
                    })}
                  </TableBody>
                </Table>
              </TableContainer>
            )
          ) : (
            <EmptyState title="Žádné položky." />
          )}

          <Box
            sx={{
              mt: 2,
              ml: "auto",
              maxWidth: 360,
              display: "flex",
              flexDirection: "column",
              gap: 0.5,
            }}
          >
            <Box sx={{ display: "flex", justifyContent: "space-between" }}>
              <Typography variant="body2" color="text.secondary">
                Mezisoučet:
              </Typography>
              <Typography
                variant="body2"
                sx={{ fontFamily: "'DM Mono', Menlo, monospace" }}
              >
                {formatCurrency(createTotals.subtotal, invoice.currency)}
              </Typography>
            </Box>
            {Number(invoice.apply_vat) > 0 &&
              Object.entries(createTotals.vatByRate).map(([rate, amount]) => (
                <Box
                  key={rate}
                  sx={{ display: "flex", justifyContent: "space-between" }}
                >
                  <Typography variant="body2" color="text.secondary">
                    DPH {rate}%:
                  </Typography>
                  <Typography
                    variant="body2"
                    sx={{ fontFamily: "'DM Mono', Menlo, monospace" }}
                  >
                    {formatCurrency(amount, invoice.currency)}
                  </Typography>
                </Box>
              ))}
            <Box
              sx={{
                display: "flex",
                justifyContent: "space-between",
                pt: 0.5,
                mt: 0.5,
                borderTop: 1,
                borderColor: "divider",
              }}
            >
              <Typography variant="body2" sx={{ fontWeight: 700 }}>
                Celkem k úhradě:
              </Typography>
              <Typography
                variant="body2"
                sx={{
                  fontFamily: "'DM Mono', Menlo, monospace",
                  fontWeight: 700,
                }}
              >
                {formatCurrency(createTotals.total, invoice.currency)}
              </Typography>
            </Box>
          </Box>
        </Card>

        {/* Obsah sections (read-only) — shown only when any section has content */}
        {(invoice.sections ?? []).some(
          (s) =>
            (s.title || "").trim() ||
            (s.title_cz || "").trim() ||
            (s.content || "").replace(/<[^>]*>/g, "").trim(),
        ) && (
          <Card sx={{ mb: 3 }}>
            <Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
              Obsah
            </Typography>
            <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
              {(invoice.sections ?? []).map((s, idx) => (
                <Box key={s.id ?? idx}>
                  {((invoice.language === "cs"
                    ? s.title_cz || s.title
                    : s.title) ||
                    "") && (
                    <Typography variant="body2" sx={{ fontWeight: 600 }}>
                      {invoice.language === "cs"
                        ? s.title_cz || s.title
                        : s.title}
                    </Typography>
                  )}
                  {(s.content || "").replace(/<[^>]*>/g, "").trim() && (
                    <RichTextView
                      dangerouslySetInnerHTML={{
                        __html: DOMPurify.sanitize(s.content || ""),
                      }}
                    />
                  )}
                </Box>
              ))}
            </Box>
          </Card>
        )}

        {/* Internal notes (read-only, never printed) */}
        <Card sx={{ mb: 3 }}>
          <Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
            Interní poznámky
          </Typography>
          {invoice.internal_notes &&
          invoice.internal_notes.trim() &&
          invoice.internal_notes !== "<p><br></p>" ? (
            <RichTextView
              dangerouslySetInnerHTML={{
                __html: DOMPurify.sanitize(invoice.internal_notes),
              }}
            />
          ) : (
            <Typography variant="body2" color="text.secondary">
              Žádné poznámky.
            </Typography>
          )}
        </Card>

        {/* Delete confirm */}
        <ConfirmDialog
          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"
          confirmVariant="danger"
          loading={deleting}
        />
      </PageEnter>
    );
  }

  // ═══════════════════════════════════════════════════════════
  // CREATE MODE + EDIT (not paid) — shared form
  // ═══════════════════════════════════════════════════════════
  if (!dataReady) {
    return <LoadingState />;
  }
  return (
    <PageEnter>
      <Box>
        <Box
          sx={{
            display: "flex",
            alignItems: "flex-start",
            justifyContent: "space-between",
            flexWrap: "wrap",
            gap: 2,
            mb: 3,
          }}
        >
          {/* flexWrap: long document titles must drop below the Zpět button
              on phones instead of overflowing the viewport. */}
          <Box
            sx={{
              display: "flex",
              alignItems: "center",
              gap: 2,
              flexWrap: "wrap",
            }}
          >
            <Button
              component={RouterLink}
              to="/invoices?tab=issued"
              variant="outlined"
              color="inherit"
              startIcon={BackIcon}
            >
              Zpět
            </Button>
            <Box>
              <Box
                sx={{
                  display: "flex",
                  alignItems: "center",
                  gap: 1.5,
                  flexWrap: "wrap",
                }}
              >
                <Typography variant="h4">
                  {isEdit ? "Faktura" : "Nová faktura"}
                  {/* Edit mode: a draft has no number yet → show "Koncept".
                      Create mode: show the previewed next-number when available. */}
                  {(isEdit || invoiceNumber) && (
                    <Box
                      component="span"
                      sx={{ color: "text.secondary", ml: 1, fontWeight: 400 }}
                    >
                      {isEdit
                        ? documentNumberLabel(invoice?.invoice_number)
                        : invoiceNumber}
                    </Box>
                  )}
                </Typography>
                {isEdit && invoice && (
                  <StatusChip
                    label={statusLabel(INVOICE_STATUS, invoice.status)}
                    color={statusColor(INVOICE_STATUS, invoice.status)}
                  />
                )}
              </Box>
              {!isEdit && fromOrderId && (
                <Typography
                  variant="body2"
                  color="text.secondary"
                  sx={{ mt: 0.5 }}
                >
                  Z objednávky
                </Typography>
              )}
            </Box>
          </Box>
          <Box sx={headerActionsSx}>
            {isEdit && invoice && hasPermission("invoices.view") && (
              <Button
                onClick={() => handleViewPdf(invoice.language || "cs")}
                variant="outlined"
                color="inherit"
                disabled={pdfLoading}
                startIcon={
                  pdfLoading ? (
                    <CircularProgress size={16} color="inherit" />
                  ) : (
                    FileIcon
                  )
                }
              >
                Zobrazit fakturu
              </Button>
            )}
            {/* ── Create mode: two-button save ── */}
            {!isEdit && (
              <>
                <Button
                  variant="outlined"
                  color="inherit"
                  onClick={() => handleCreateSubmit("draft")}
                  disabled={saving}
                >
                  {savingAction === "draft" ? (
                    <CircularProgress size={16} color="inherit" />
                  ) : (
                    "Uložit koncept"
                  )}
                </Button>
                <Button
                  onClick={() => handleCreateSubmit(LIVE_STATUS)}
                  disabled={saving}
                >
                  {savingAction === LIVE_STATUS ? (
                    <>
                      <CircularProgress
                        size={16}
                        color="inherit"
                        sx={{ mr: 1 }}
                      />
                      Ukládání...
                    </>
                  ) : (
                    "Vytvořit"
                  )}
                </Button>
              </>
            )}

            {/* ── Edit mode: draft → save-draft + finalize ── */}
            {isEdit && invoice && invoice.status === "draft" && (
              <>
                <Button
                  variant="outlined"
                  color="inherit"
                  onClick={() => handleCreateSubmit("draft")}
                  disabled={saving}
                >
                  {savingAction === "draft" ? (
                    <CircularProgress size={16} color="inherit" />
                  ) : (
                    "Uložit koncept"
                  )}
                </Button>
                {hasPermission("invoices.edit") && (
                  <Button
                    onClick={() => handleCreateSubmit(LIVE_STATUS)}
                    disabled={saving}
                  >
                    {savingAction === LIVE_STATUS ? (
                      <>
                        <CircularProgress
                          size={16}
                          color="inherit"
                          sx={{ mr: 1 }}
                        />
                        Ukládání...
                      </>
                    ) : (
                      "Vystavit"
                    )}
                  </Button>
                )}
                {/* A draft is deleted rather than cancelled. */}
                {hasPermission("invoices.delete") && (
                  <Button
                    onClick={() => setDeleteConfirm(true)}
                    variant="outlined"
                    color="error"
                  >
                    Smazat
                  </Button>
                )}
              </>
            )}

            {/* ── Edit mode: live (non-draft) doc — unchanged ── */}
            {isEdit && invoice && invoice.status !== "draft" && (
              <>
                <Button onClick={() => handleCreateSubmit()} disabled={saving}>
                  {savingAction === "save" ? (
                    <>
                      <CircularProgress
                        size={16}
                        color="inherit"
                        sx={{ mr: 1 }}
                      />
                      Ukládání...
                    </>
                  ) : (
                    "Uložit"
                  )}
                </Button>
                {hasPermission("invoices.edit") &&
                  invoice.valid_transitions?.map((status) => (
                    <Button
                      key={status}
                      onClick={() => setStatusConfirm({ show: true, status })}
                      variant={
                        status === "cancelled" || status === "stornovana"
                          ? "outlined"
                          : "contained"
                      }
                      color={
                        status === "cancelled" || status === "stornovana"
                          ? "error"
                          : "primary"
                      }
                      disabled={statusChanging === status}
                    >
                      {statusChanging === status ? (
                        <CircularProgress size={14} color="inherit" />
                      ) : (
                        TRANSITION_LABELS[status] || status
                      )}
                    </Button>
                  ))}
                {/* A paid invoice is a settled financial record — never
                    deletable from the UI. A paid invoice never actually reaches
                    this branch (it renders the read-only view above), but the
                    guard documents the invariant explicitly. */}
                {hasPermission("invoices.delete") &&
                  invoice.status !== "paid" && (
                    <Button
                      onClick={() => setDeleteConfirm(true)}
                      variant="outlined"
                      color="error"
                    >
                      Smazat
                    </Button>
                  )}
              </>
            )}
          </Box>
        </Box>
      </Box>

      <form onSubmit={handleFormSubmit}>
        {/* Basic info */}
        <Card sx={{ mb: 3 }}>
          <Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
            Základní údaje
          </Typography>
          {/* Číslo faktury and Vystavil are not form fields anymore: the
              number lives in the page header (deferred numbering — "Koncept"
              until finalize) and issued_by is auto-filled from the logged-in
              user and still submitted with the payload (the PDF prints it). */}
          <Field label="Odběratel" error={errors.customer_id} required>
            <CustomerPicker
              customers={customers}
              value={form.customer_id}
              onChange={selectCustomer}
              error={errors.customer_id}
              placeholder="Hledat zákazníka (název, IČ)..."
            />
          </Field>

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

          <Box
            sx={{
              display: "grid",
              gridTemplateColumns: { xs: "1fr", md: "1fr 1fr 1fr" },
              gap: 2,
            }}
          >
            <Field label="Datum vystavení" error={errors.issue_date} required>
              <DateField
                value={form.issue_date}
                onChange={(val) => {
                  setForm((prev) => ({ ...prev, issue_date: val }));
                  setErrors((prev) => ({ ...prev, issue_date: "" }));
                }}
              />
            </Field>
            <Field label="Splatnost (dny)">
              <Select
                value={String(dueDays)}
                onChange={(val) => setDueDays(Number(val))}
                options={Array.from({ length: 60 }, (_, i) => i + 1).map(
                  (n) => ({ value: String(n), label: String(n) }),
                )}
              />
              {computedDueDate && (
                <Typography
                  variant="caption"
                  color="text.secondary"
                  sx={{ display: "block", mt: 0.5 }}
                >
                  Splatnost:{" "}
                  {new Date(computedDueDate).toLocaleDateString("cs-CZ")}
                </Typography>
              )}
            </Field>
            <Field label="DÚZP" error={errors.tax_date} required>
              <DateField
                value={form.tax_date}
                onChange={(val) => {
                  setForm((prev) => ({ ...prev, tax_date: val }));
                  setErrors((prev) => ({ ...prev, tax_date: "" }));
                }}
              />
            </Field>
          </Box>

          <Box
            sx={{
              display: "grid",
              gridTemplateColumns: { xs: "1fr", md: "repeat(5, 1fr)" },
              gap: 2,
            }}
          >
            <Field label="Forma úhrady">
              <Select
                value={form.payment_method}
                onChange={(val) =>
                  setForm((prev) => ({ ...prev, payment_method: val }))
                }
                options={[
                  { value: "Příkazem", label: "Příkazem" },
                  { value: "Hotově", label: "Hotově" },
                  { value: "Dobírka", label: "Dobírka" },
                ]}
              />
            </Field>
            <Field label="Měna">
              <Select
                value={form.currency}
                onChange={(val) =>
                  setForm((prev) => ({ ...prev, currency: val }))
                }
                options={(
                  companySettings?.available_currencies || [
                    "CZK",
                    "EUR",
                    "USD",
                    "GBP",
                  ]
                ).map((c) => ({ value: c, label: c }))}
              />
            </Field>
            <Field label="Jazyk faktury">
              <Select
                value={form.language}
                onChange={(val) =>
                  setForm((prev) => ({ ...prev, language: val }))
                }
                options={[
                  { value: "cs", label: "Čeština" },
                  { value: "en", label: "English" },
                ]}
              />
            </Field>
            {/* Document-default VAT rate. Presentational only — it writes the
                already-existing `form.vat_rate` (used to seed new line rows /
                as the per-line fallback). Totals are computed per-line from
                `item.vat_rate`, so changing this does NOT alter computed VAT. */}
            <Field label="Sazba DPH">
              <Select
                value={String(form.vat_rate)}
                disabled={!form.apply_vat}
                onChange={(val) =>
                  setForm((prev) => ({ ...prev, vat_rate: Number(val) }))
                }
                options={vatOptions.map((o) => ({
                  value: String(o.value),
                  label: o.label,
                }))}
              />
            </Field>
            <Field label="DPH">
              <Box sx={{ display: "flex", alignItems: "center", height: 40 }}>
                <CheckboxField
                  label="Uplatnit DPH"
                  checked={!!form.apply_vat}
                  onChange={(v) =>
                    setForm((prev) => ({
                      ...prev,
                      apply_vat: v ? 1 : 0,
                    }))
                  }
                />
              </Box>
            </Field>
          </Box>

          <Field label="Bankovní účet" error={errors.bank_account_id} required>
            <Select
              value={String(form.bank_account_id)}
              onChange={(val) => {
                selectBankAccount(val);
                setErrors((prev) => ({ ...prev, bank_account_id: "" }));
              }}
              options={[
                {
                  value: "",
                  label: `— Vyberte účet —`,
                },
                ...bankAccounts.map((acc) => ({
                  value: String(acc.id),
                  label: `${acc.account_name}${
                    acc.account_number ? ` (${acc.account_number})` : ""
                  }${acc.is_default ? " ★" : ""}`,
                })),
              ]}
            />
          </Field>
        </Card>

        {/* Items */}
        <Card sx={{ mb: 3 }}>
          <Box
            sx={{
              display: "flex",
              justifyContent: "space-between",
              alignItems: "flex-start",
              mb: 2,
            }}
          >
            <Box>
              <Typography variant="subtitle2" sx={{ fontWeight: 600 }}>
                Položky
              </Typography>
              {errors.items && (
                <Typography variant="caption" color="error">
                  {errors.items}
                </Typography>
              )}
            </Box>
            <Button
              type="button"
              onClick={addItem}
              variant="outlined"
              color="inherit"
              size="small"
            >
              + Přidat položku
            </Button>
          </Box>

          <DndContext
            sensors={dndSensors}
            collisionDetection={closestCenter}
            modifiers={[restrictToVerticalAxis, restrictToParentElement]}
            onDragEnd={handleCreateDragEnd}
          >
            <SortableContext
              items={items.map((i) => i._key)}
              strategy={verticalListSortingStrategy}
            >
              {isMobile ? (
                <Box
                  sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}
                >
                  {items.map((item, index) => (
                    <SortableInvoiceRow
                      key={item._key}
                      item={item}
                      index={index}
                      currency={form.currency}
                      apply_vat={!!form.apply_vat}
                      vatOptions={vatOptions}
                      onUpdate={updateItem}
                      onRemove={removeItem}
                      canDelete={items.length > 1}
                    />
                  ))}
                </Box>
              ) : (
                <TableContainer sx={{ overflowX: "auto" }}>
                  <Table
                    size="small"
                    sx={{
                      minWidth: 720,
                      "& td, & th": { borderColor: "divider" },
                    }}
                  >
                    <TableHead>
                      <TableRow>
                        <TableCell sx={{ width: "2rem" }} />
                        <TableCell sx={{ width: "2rem" }} align="center">
                          #
                        </TableCell>
                        <TableCell>Popis</TableCell>
                        <TableCell sx={{ width: "7rem" }} align="center">
                          Množství
                        </TableCell>
                        <TableCell sx={{ width: "5.5rem" }} align="center">
                          Jednotka
                        </TableCell>
                        <TableCell sx={{ width: "8rem" }} align="center">
                          Jedn. cena
                        </TableCell>
                        {form.apply_vat ? (
                          <TableCell sx={{ width: "5rem" }} align="center">
                            DPH
                          </TableCell>
                        ) : null}
                        <TableCell sx={{ width: "8rem" }} align="right">
                          Celkem
                        </TableCell>
                        <TableCell sx={{ width: "2.5rem" }} />
                      </TableRow>
                    </TableHead>
                    <TableBody>
                      {items.map((item, index) => (
                        <SortableInvoiceRow
                          key={item._key}
                          item={item}
                          index={index}
                          currency={form.currency}
                          apply_vat={!!form.apply_vat}
                          vatOptions={vatOptions}
                          onUpdate={updateItem}
                          onRemove={removeItem}
                          canDelete={items.length > 1}
                        />
                      ))}
                    </TableBody>
                  </Table>
                </TableContainer>
              )}
            </SortableContext>
          </DndContext>

          {/* Totals */}
          <Box
            sx={{
              mt: 2,
              ml: "auto",
              maxWidth: 360,
              display: "flex",
              flexDirection: "column",
              gap: 0.5,
            }}
          >
            <Box sx={{ display: "flex", justifyContent: "space-between" }}>
              <Typography variant="body2" color="text.secondary">
                Mezisoučet:
              </Typography>
              <Typography
                variant="body2"
                sx={{ fontFamily: "'DM Mono', Menlo, monospace" }}
              >
                {formatCurrency(createTotals.subtotal, form.currency)}
              </Typography>
            </Box>
            {form.apply_vat &&
              Object.entries(createTotals.vatByRate).map(([rate, amount]) => (
                <Box
                  key={rate}
                  sx={{ display: "flex", justifyContent: "space-between" }}
                >
                  <Typography variant="body2" color="text.secondary">
                    DPH {rate}%:
                  </Typography>
                  <Typography
                    variant="body2"
                    sx={{ fontFamily: "'DM Mono', Menlo, monospace" }}
                  >
                    {formatCurrency(amount, form.currency)}
                  </Typography>
                </Box>
              ))}
            <Box
              sx={{
                display: "flex",
                justifyContent: "space-between",
                pt: 0.5,
                mt: 0.5,
                borderTop: 1,
                borderColor: "divider",
              }}
            >
              <Typography variant="body2" sx={{ fontWeight: 700 }}>
                Celkem k úhradě:
              </Typography>
              <Typography
                variant="body2"
                sx={{
                  fontFamily: "'DM Mono', Menlo, monospace",
                  fontWeight: 700,
                }}
              >
                {formatCurrency(createTotals.total, form.currency)}
              </Typography>
            </Box>
          </Box>
        </Card>

        {/* Rich-text PDF sections — printed after the items (like orders) */}
        <SectionsEditor
          sections={sections}
          onChange={setSections}
          readOnly={false}
          title="Obsah"
          language={form.language}
        />

        {/* Internal notes */}
        <Card sx={{ mb: 3 }}>
          <Field label="Interní poznámky" hint="Nezobrazí se na PDF.">
            <RichEditor
              value={form.internal_notes}
              onChange={(val) =>
                setForm((prev) => ({ ...prev, internal_notes: val }))
              }
              placeholder="Interní poznámky..."
            />
          </Field>
        </Card>
      </form>

      {/* Status change confirm (edit mode only) */}
      {isEdit && invoice && (
        <>
          <ConfirmDialog
            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 "${statusLabel(INVOICE_STATUS, statusConfirm.status)}"?`}
            confirmText={
              TRANSITION_LABELS[statusConfirm.status || ""] || "Potvrdit"
            }
            cancelText="Zrušit"
          />

          <ConfirmDialog
            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"
            confirmVariant="danger"
            loading={deleting}
          />
        </>
      )}
    </PageEnter>
  );
}