import { useState, useEffect, useRef } from "react";
import { Link as RouterLink, useNavigate } from "react-router-dom";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import IconButton from "@mui/material/IconButton";
import CircularProgress from "@mui/material/CircularProgress";
import Menu from "@mui/material/Menu";
import MenuItem from "@mui/material/MenuItem";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import { useAlert } from "../context/AlertContext";
import { useAuth } from "../context/AuthContext";
import Forbidden from "../components/Forbidden";

import apiFetch from "../utils/api";
import {
  formatCurrency,
  formatDate,
  formatMultiCurrency,
  czechPlural,
} from "../utils/formatters";
import useTableSort from "../hooks/useTableSort";
import useDebounce from "../hooks/useDebounce";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { usePaginatedQuery } from "../hooks/usePaginatedQuery";
import {
  offerListOptions,
  offerStatsOptions,
  offerCustomersOptions,
} from "../lib/queries/offers";
import { useApiMutation } from "../lib/queries/mutations";
import {
  Button,
  Card,
  DataTable,
  Pagination,
  Modal,
  ConfirmDialog,
  Field,
  TextField,
  Select,
  StatusChip,
  FileUpload,
  EmptyState,
  FilterBar,
  Tabs,
  PageHeader,
  PageEnter,
  LoadingState,
  type DataColumn,
  type TabDef,
} from "../ui";
import {
  OFFER_STATUS,
  statusLabel,
  statusColor,
  statusOptions,
  documentNumberLabel,
} from "../lib/documentStatus";

const API_BASE = "/api/admin";

// Filter tabs derive from OFFER_STATUS so `draft` ("Koncept") flows in
// automatically; the leading "Všechny" tab is the all-statuses filter. The
// `expired` entry in OFFER_STATUS is a front-end-derived state (not a stored
// value), so it is excluded from the filter tabs.
const STATUS_FILTERS = statusOptions(OFFER_STATUS, {
  value: "",
  label: "Všechny",
}).filter((o) => o.value !== "expired");

interface Quotation {
  id: number;
  quotation_number: string;
  project_code: string;
  customer_name: string;
  created_at: string;
  valid_until: string;
  currency: string;
  total: number;
  status: string;
  order_id?: number;
  order_status?: string;
}

const TemplatesIcon = (
  <svg
    width="20"
    height="20"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
  >
    <rect x="3" y="3" width="18" height="18" rx="2" />
    <path d="M3 9h18M9 21V9" />
  </svg>
);
const PlusIcon = (
  <svg
    width="20"
    height="20"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
  >
    <line x1="12" y1="5" x2="12" y2="19" />
    <line x1="5" y1="12" x2="19" y2="12" />
  </svg>
);
const ViewIcon = (
  <svg
    width="18"
    height="18"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
  >
    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
    <circle cx="12" cy="12" r="3" />
  </svg>
);
const EditIcon = (
  <svg
    width="18"
    height="18"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
  >
    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
    <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
  </svg>
);
const DuplicateIcon = (
  <svg
    width="18"
    height="18"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
  >
    <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
  </svg>
);
const OrderViewIcon = (
  <svg
    width="18"
    height="18"
    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" />
    <text
      x="12"
      y="16.5"
      textAnchor="middle"
      fill="currentColor"
      stroke="none"
      fontSize="9"
      fontWeight="700"
    >
      O
    </text>
  </svg>
);
const OrderCreateIcon = (
  <svg
    width="18"
    height="18"
    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" />
    <line x1="12" y1="11" x2="12" y2="17" />
    <line x1="9" y1="14" x2="15" y2="14" />
  </svg>
);
const InvalidateIcon = (
  <svg
    width="18"
    height="18"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
  >
    <circle cx="12" cy="12" r="10" />
    <line x1="4.93" y1="4.93" x2="19.07" y2="19.07" />
  </svg>
);
const PdfIcon = (
  <svg
    width="18"
    height="18"
    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" />
    <line x1="16" y1="13" x2="8" y2="13" />
    <line x1="16" y1="17" x2="8" y2="17" />
  </svg>
);
const DeleteIcon = (
  <svg
    width="18"
    height="18"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
  >
    <polyline points="3 6 5 6 21 6" />
    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
  </svg>
);
const MoreIcon = (
  <svg
    width="18"
    height="18"
    viewBox="0 0 24 24"
    fill="currentColor"
    stroke="none"
  >
    <circle cx="12" cy="5" r="1.6" />
    <circle cx="12" cy="12" r="1.6" />
    <circle cx="12" cy="19" r="1.6" />
  </svg>
);

/**
 * Per-row overflow menu for the secondary offer actions (Duplicate +
 * Zneplatnit). Hook state (anchorEl) lives HERE, in a child component — never
 * in the page-level `.map`/render callback — so each row owns its own menu
 * (no shared-open bug) and Rules of Hooks stay satisfied. The page passes in
 * the same handlers + permission/disabled flags the inline icons used, so
 * behavior/permissions/confirms are preserved verbatim; the items are merely
 * relocated. The menu renders nothing (returns null) when no secondary action
 * is available for the row.
 */
function RowActionsMenu({
  canDuplicate,
  duplicating,
  onDuplicate,
  canInvalidate,
  onInvalidate,
}: {
  canDuplicate: boolean;
  duplicating: boolean;
  onDuplicate: () => void;
  canInvalidate: boolean;
  onInvalidate: () => void;
}) {
  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
  if (!canDuplicate && !canInvalidate) return null;
  const close = () => setAnchorEl(null);
  return (
    <>
      <IconButton
        size="small"
        onClick={(e) => setAnchorEl(e.currentTarget)}
        aria-label="Další akce"
        title="Další akce"
      >
        {MoreIcon}
      </IconButton>
      <Menu
        anchorEl={anchorEl}
        open={Boolean(anchorEl)}
        onClose={close}
        anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
        transformOrigin={{ vertical: "top", horizontal: "right" }}
      >
        {canDuplicate && (
          <MenuItem
            disabled={duplicating}
            onClick={() => {
              close();
              onDuplicate();
            }}
          >
            <ListItemIcon>
              {duplicating ? <CircularProgress size={16} /> : DuplicateIcon}
            </ListItemIcon>
            <ListItemText>Duplikovat</ListItemText>
          </MenuItem>
        )}
        {canInvalidate && (
          <MenuItem
            onClick={() => {
              close();
              onInvalidate();
            }}
          >
            <ListItemIcon>{InvalidateIcon}</ListItemIcon>
            <ListItemText>Zneplatnit</ListItemText>
          </MenuItem>
        )}
      </Menu>
    </>
  );
}

export default function Offers() {
  const alert = useAlert();
  const { hasPermission } = useAuth();
  const navigate = useNavigate();

  const { sort, order, handleSort } = useTableSort("quotation_number");
  const [search, setSearch] = useState("");
  const debouncedSearch = useDebounce(search, 300);
  const [page, setPage] = useState(1);
  const [statusFilter, setStatusFilter] = useState("");
  const [customerFilter, setCustomerFilter] = useState<number | "">("");
  // Track first successful load so later refetches (filter/customer/tab/page
  // change) keep the table visible instead of flashing the full skeleton.
  const hasLoadedOnce = useRef(false);

  const { data: customers } = useQuery(offerCustomersOptions());

  const [deleteConfirm, setDeleteConfirm] = useState<{
    show: boolean;
    quotation: Quotation | null;
  }>({ show: false, quotation: null });
  const [deleting, setDeleting] = useState(false);
  const [invalidateConfirm, setInvalidateConfirm] = useState<{
    show: boolean;
    quotation: Quotation | null;
  }>({ show: false, quotation: null });
  const [invalidating, setInvalidating] = useState(false);
  const blobUrlRef = useRef<string | null>(null);

  useEffect(() => {
    return () => {
      if (blobUrlRef.current) {
        URL.revokeObjectURL(blobUrlRef.current);
        blobUrlRef.current = null;
      }
    };
  }, []);
  const [duplicating, setDuplicating] = useState<number | null>(null);
  const [pdfLoading, setPdfLoading] = useState<number | null>(null);
  const [creatingOrder, setCreatingOrder] = useState<number | null>(null);
  const [orderModal, setOrderModal] = useState<{
    show: boolean;
    quotation: Quotation | null;
  }>({ show: false, quotation: null });
  const [customerOrderNumber, setCustomerOrderNumber] = useState("");
  const [orderAttachment, setOrderAttachment] = useState<File | null>(null);

  const queryClient = useQueryClient();
  const {
    items: quotations,
    pagination,
    isPending,
    isFetching,
  } = usePaginatedQuery<Quotation>(
    offerListOptions({
      search: debouncedSearch,
      sort,
      order,
      page,
      status: statusFilter || undefined,
      customer_id: customerFilter || undefined,
    }),
  );

  // Per-currency total over the WHOLE filtered set (not one page). Uses the
  // SAME filters as the list query so the summary matches what's shown.
  const statsQuery = useQuery(
    offerStatsOptions({
      search: debouncedSearch,
      status: statusFilter || undefined,
      customer_id: customerFilter || undefined,
    }),
  );

  // Mark first load done in an effect (not during render) to avoid a
  // render-phase ref mutation.
  useEffect(() => {
    if (!isPending) hasLoadedOnce.current = true;
  }, [isPending]);

  const duplicateMutation = useApiMutation<
    number,
    { message?: string; error?: string }
  >({
    url: (id) => `${API_BASE}/offers/${id}/duplicate`,
    method: () => "POST",
    invalidate: ["offers", "orders", "projects", "invoices"],
    onSuccess: (data) => {
      alert.success(data?.message || "Nabídka byla duplikována");
    },
  });

  const deleteOfferMutation = useApiMutation<
    number,
    { message?: string; error?: string }
  >({
    url: (id) => `${API_BASE}/offers/${id}`,
    method: () => "DELETE",
    invalidate: ["offers", "orders", "projects", "invoices"],
    onSuccess: (data) => {
      setDeleteConfirm({ show: false, quotation: null });
      alert.success(data?.message || "Nabídka byla smazána");
    },
  });

  const invalidateMutation = useApiMutation<
    number,
    { message?: string; error?: string }
  >({
    url: (id) => `${API_BASE}/offers/${id}/invalidate`,
    method: () => "POST",
    invalidate: ["offers", "orders", "projects", "invoices"],
    onSuccess: (data) => {
      setInvalidateConfirm({ show: false, quotation: null });
      alert.success(data?.message || "Nabídka byla zneplatněna");
    },
  });

  if (!hasPermission("offers.view")) return <Forbidden />;

  const handleDuplicate = async (quotation: Quotation) => {
    setDuplicating(quotation.id);
    try {
      await duplicateMutation.mutateAsync(quotation.id);
    } catch (e) {
      alert.error(e instanceof Error ? e.message : "Chyba připojení");
    } finally {
      setDuplicating(null);
    }
  };

  const handleCreateOrder = async () => {
    if (!customerOrderNumber.trim() || !orderModal.quotation) return;
    setCreatingOrder(orderModal.quotation.id);
    try {
      let fetchOptions: RequestInit;
      if (orderAttachment) {
        // With attachment: send as multipart/form-data
        const formData = new FormData();
        formData.append("quotationId", String(orderModal.quotation.id));
        formData.append("customerOrderNumber", customerOrderNumber.trim());
        formData.append("attachment", orderAttachment);
        fetchOptions = { method: "POST", body: formData };
      } else {
        fetchOptions = {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            quotationId: orderModal.quotation.id,
            customerOrderNumber: customerOrderNumber.trim(),
          }),
        };
      }
      const response = await apiFetch(`${API_BASE}/orders`, fetchOptions);
      const result = await response.json();
      if (result.success) {
        setOrderModal({ show: false, quotation: null });
        alert.success(result.message || "Objednávka byla vytvořena");
        queryClient.invalidateQueries({ queryKey: ["offers"] });
        queryClient.invalidateQueries({ queryKey: ["orders"] });
        queryClient.invalidateQueries({ queryKey: ["projects"] });
        queryClient.invalidateQueries({ queryKey: ["invoices"] });
        navigate(`/orders/${result.data.order_id}`);
      } else {
        alert.error(result.error || "Nepodařilo se vytvořit objednávku");
      }
    } catch {
      alert.error("Chyba připojení");
    } finally {
      setCreatingOrder(null);
    }
  };

  const handleDelete = async () => {
    if (!deleteConfirm.quotation) return;
    setDeleting(true);
    try {
      await deleteOfferMutation.mutateAsync(deleteConfirm.quotation.id);
    } catch (e) {
      alert.error(e instanceof Error ? e.message : "Chyba připojení");
    } finally {
      setDeleting(false);
    }
  };

  const handleInvalidate = async () => {
    if (!invalidateConfirm.quotation) return;
    setInvalidating(true);
    try {
      await invalidateMutation.mutateAsync(invalidateConfirm.quotation.id);
    } catch (e) {
      alert.error(e instanceof Error ? e.message : "Chyba připojení");
    } finally {
      setInvalidating(false);
    }
  };

  const handlePdf = async (quotation: Quotation) => {
    if (pdfLoading) return;
    const newWindow = window.open("", "_blank");
    setPdfLoading(quotation.id);
    try {
      const response = await apiFetch(
        `${API_BASE}/offers/${quotation.id}/file`,
      );
      if (response.status === 401) {
        newWindow?.close();
        return;
      }
      if (!response.ok) {
        newWindow?.close();
        alert.error("PDF soubor nenalezen — otevřete nabídku a uložte ji");
        return;
      }
      const blob = await response.blob();
      if (blobUrlRef.current) {
        URL.revokeObjectURL(blobUrlRef.current);
      }
      blobUrlRef.current = URL.createObjectURL(blob);
      if (newWindow) newWindow.location.href = blobUrlRef.current;
    } catch {
      newWindow?.close();
      alert.error("Chyba připojení");
    } finally {
      setPdfLoading(null);
    }
  };

  // Only show the full-page skeleton on the very first load; on subsequent
  // refetches (filter/customer/tab/page change) keep the table visible (the
  // Card dims via isFetching) so it doesn't flash.
  if (isPending && !hasLoadedOnce.current) {
    return <LoadingState />;
  }

  const total = pagination?.total ?? quotations.length;
  const subtitle = `${total} ${czechPlural(
    total,
    "nabídka",
    "nabídky",
    "nabídek",
  )}`;

  const tabs: TabDef[] = STATUS_FILTERS.map((f) => ({
    value: f.value,
    label: f.label,
  }));

  // Search/status filter is active → an empty list means "nothing matches"
  // (no create CTA); a genuinely empty list keeps the create-CTA empty state.
  const isFiltered = !!debouncedSearch || !!statusFilter;

  const columns: DataColumn<Quotation>[] = [
    {
      key: "quotation_number",
      header: "Číslo",
      width: "13%",
      sortKey: "quotation_number",
      render: (q) => (
        <Box
          component={RouterLink}
          to={`/offers/${q.id}`}
          sx={{
            color: "primary.main",
            textDecoration: "none",
            "&:hover": { textDecoration: "underline" },
          }}
        >
          {documentNumberLabel(q.quotation_number)}
        </Box>
      ),
    },
    {
      key: "project_code",
      header: "Projekt",
      width: "13%",
      sortKey: "project_code",
      render: (q) => q.project_code || "—",
    },
    {
      key: "customer_name",
      header: "Zákazník",
      width: "13%",
      render: (q) => q.customer_name || "—",
    },
    {
      key: "created_at",
      header: "Datum",
      width: "11%",
      sortKey: "created_at",
      mono: true,
      render: (q) => formatDate(q.created_at),
    },
    {
      key: "valid_until",
      header: "Platnost",
      width: "10%",
      sortKey: "valid_until",
      mono: true,
      render: (q) => formatDate(q.valid_until),
    },
    {
      key: "status",
      header: "Stav",
      width: "10%",
      sortKey: "status",
      render: (q) => {
        // The offer's own status is `active`/`ordered`/`invalidated`. When its
        // linked order is completed, surface that as "Dokončená" (success) —
        // matching the OfferDetail header chip and the completed row tint.
        const completed =
          q.status !== "invalidated" && q.order_status === "dokoncena";
        return completed ? (
          <StatusChip label="Dokončená" color="success" />
        ) : (
          <StatusChip
            label={statusLabel(OFFER_STATUS, q.status)}
            color={statusColor(OFFER_STATUS, q.status)}
          />
        );
      },
    },
    {
      key: "currency",
      header: "Měna",
      width: "7%",
      sortKey: "currency",
      render: (q) => <StatusChip label={q.currency} color="default" />,
    },
    {
      key: "total",
      header: "Celkem",
      width: "11%",
      align: "right",
      mono: true,
      bold: true,
      render: (q) => formatCurrency(q.total, q.currency),
    },
    {
      key: "actions",
      header: "Akce",
      width: "15%",
      align: "right",
      render: (q) => {
        const isInvalidated = q.status === "invalidated";
        const isCompleted = !isInvalidated && q.order_status === "dokoncena";
        const readOnly = isInvalidated || isCompleted;
        // Secondary actions (relocated into the overflow menu). Same gates as
        // before: Duplicate needs offers.create and an editable (not
        // read-only) row; Zneplatnit needs offers.edit and a row that is not
        // invalidated/completed/ordered.
        const canDuplicate = !readOnly && hasPermission("offers.create");
        const canInvalidate =
          !isInvalidated &&
          !isCompleted &&
          !q.order_id &&
          hasPermission("offers.edit");
        return (
          <Box sx={{ display: "flex", gap: 0.5, justifyContent: "flex-end" }}>
            <IconButton
              size="small"
              onClick={() => navigate(`/offers/${q.id}`)}
              aria-label={readOnly ? "Zobrazit" : "Upravit"}
              title={readOnly ? "Zobrazit" : "Upravit"}
            >
              {readOnly ? ViewIcon : EditIcon}
            </IconButton>
            {!readOnly && q.order_id ? (
              <IconButton
                size="small"
                color="primary"
                onClick={() => navigate(`/orders/${q.order_id}`)}
                aria-label="Zobrazit objednávku"
                title="Zobrazit objednávku"
              >
                {OrderViewIcon}
              </IconButton>
            ) : (
              !readOnly &&
              hasPermission("orders.create") && (
                <IconButton
                  size="small"
                  onClick={() => {
                    setCustomerOrderNumber("");
                    setOrderAttachment(null);
                    setOrderModal({ show: true, quotation: q });
                  }}
                  aria-label="Vytvořit objednávku"
                  title="Vytvořit objednávku"
                  disabled={creatingOrder === q.id}
                >
                  {creatingOrder === q.id ? (
                    <CircularProgress size={16} />
                  ) : (
                    OrderCreateIcon
                  )}
                </IconButton>
              )
            )}
            {hasPermission("offers.view") && (
              <IconButton
                size="small"
                onClick={() => handlePdf(q)}
                aria-label="Zobrazit nabídku"
                title="Zobrazit nabídku"
                disabled={pdfLoading === q.id}
              >
                {pdfLoading === q.id ? <CircularProgress size={16} /> : PdfIcon}
              </IconButton>
            )}
            {hasPermission("offers.delete") && (
              <IconButton
                size="small"
                color="error"
                onClick={() => setDeleteConfirm({ show: true, quotation: q })}
                aria-label="Smazat"
                title="Smazat"
              >
                {DeleteIcon}
              </IconButton>
            )}
            <RowActionsMenu
              canDuplicate={canDuplicate}
              duplicating={duplicating === q.id}
              onDuplicate={() => handleDuplicate(q)}
              canInvalidate={canInvalidate}
              onInvalidate={() =>
                setInvalidateConfirm({ show: true, quotation: q })
              }
            />
          </Box>
        );
      },
    },
  ];

  // Per-status row tints (replaces offers-invalidated-row / offers-completed-row
  // / offers-expired-row). These are LOW-ALPHA washes via the palette channel
  // vars (not solid `.light` fills — those turn the white dark-mode row text
  // invisible and read garish in light mode). Invalidated = faded/muted, matching
  // the original "voided" look. Readable in BOTH schemes because the underlying
  // row text keeps its normal theme color.
  const rowSx = (q: Quotation) => {
    const isInvalidated = q.status === "invalidated";
    const isCompleted = !isInvalidated && q.order_status === "dokoncena";
    const isExpired =
      !isInvalidated &&
      !isCompleted &&
      !q.order_id &&
      q.valid_until &&
      new Date(q.valid_until) < new Date(new Date().toDateString());
    if (isInvalidated) {
      return {
        opacity: 0.6,
        "& td": { color: "var(--mui-palette-text-secondary)" },
      };
    }
    if (isCompleted) {
      return {
        backgroundColor: "rgba(var(--mui-palette-success-mainChannel) / 0.12)",
        "&:hover": {
          backgroundColor:
            "rgba(var(--mui-palette-success-mainChannel) / 0.18)",
        },
      };
    }
    if (isExpired) {
      return {
        backgroundColor: "rgba(var(--mui-palette-warning-mainChannel) / 0.12)",
        "&:hover": {
          backgroundColor:
            "rgba(var(--mui-palette-warning-mainChannel) / 0.18)",
        },
      };
    }
    return {};
  };

  return (
    <PageEnter>
      <PageHeader
        title="Nabídky"
        subtitle={subtitle}
        actions={
          <>
            {hasPermission("settings.templates") && (
              <Button
                component={RouterLink}
                to="/offers/templates"
                variant="outlined"
                color="inherit"
                startIcon={TemplatesIcon}
              >
                Šablony
              </Button>
            )}
            {hasPermission("offers.create") && (
              <Button
                component={RouterLink}
                to="/offers/new"
                startIcon={PlusIcon}
              >
                Nová nabídka
              </Button>
            )}
          </>
        }
      />

      <Box sx={{ display: "flex", justifyContent: "center", mb: 2.5 }}>
        <Tabs
          value={statusFilter}
          onChange={(v) => {
            setStatusFilter(v);
            setPage(1);
          }}
          tabs={tabs}
        />
      </Box>

      <FilterBar>
        <Box sx={{ flex: "1 1 320px" }}>
          <TextField
            value={search}
            onChange={(e) => {
              setSearch(e.target.value);
              setPage(1);
            }}
            placeholder="Hledat podle čísla, projektu nebo zákazníka..."
            fullWidth
          />
        </Box>
        <Box sx={{ flex: "0 0 220px" }}>
          <Select
            value={customerFilter === "" ? "" : String(customerFilter)}
            onChange={(value) => {
              setCustomerFilter(value ? Number(value) : "");
              setPage(1);
            }}
            options={[
              { value: "", label: "Všichni zákazníci" },
              ...(customers ?? []).map((c) => ({
                value: String(c.id),
                label: c.name,
              })),
            ]}
          />
        </Box>
      </FilterBar>

      <Card sx={{ opacity: isFetching ? 0.6 : 1, transition: "opacity .2s" }}>
        <DataTable<Quotation>
          columns={columns}
          rows={quotations}
          rowKey={(q) => q.id}
          rowSx={rowSx}
          sortBy={sort}
          sortDir={order}
          onSort={handleSort}
          empty={
            isFiltered ? (
              <EmptyState
                title="Žádné nabídky neodpovídají filtru"
                description="Zkuste změnit filtr nebo hledaný výraz."
              />
            ) : (
              <EmptyState
                title="Zatím nejsou žádné nabídky."
                action={
                  hasPermission("offers.create") ? (
                    <Button component={RouterLink} to="/offers/new">
                      Vytvořit první nabídku
                    </Button>
                  ) : undefined
                }
              />
            )
          }
        />
        {(statsQuery.data?.length ?? 0) > 0 && (
          <Box
            sx={{
              display: "flex",
              justifyContent: "flex-end",
              mt: 1.5,
              px: 1,
              gap: 1,
              color: "text.secondary",
              fontSize: "0.9rem",
            }}
          >
            <span>Celkem:</span>
            <Box
              component="span"
              sx={{ fontWeight: 700, color: "text.primary" }}
            >
              {formatMultiCurrency(statsQuery.data ?? [])}
            </Box>
          </Box>
        )}
        <Pagination
          page={page}
          pageCount={pagination?.total_pages ?? 1}
          onChange={setPage}
        />
      </Card>

      <ConfirmDialog
        isOpen={deleteConfirm.show}
        onClose={() => setDeleteConfirm({ show: false, quotation: null })}
        onConfirm={handleDelete}
        title="Smazat nabídku"
        message={`Opravdu chcete smazat nabídku "${deleteConfirm.quotation?.quotation_number}"? Budou smazány i všechny položky a sekce. Tato akce je nevratná.`}
        confirmText="Smazat"
        confirmVariant="danger"
        loading={deleting}
      />

      <ConfirmDialog
        isOpen={invalidateConfirm.show}
        onClose={() => setInvalidateConfirm({ show: false, quotation: null })}
        onConfirm={handleInvalidate}
        title="Zneplatnit nabídku"
        message={`Opravdu chcete zneplatnit nabídku "${invalidateConfirm.quotation?.quotation_number}"? Nabídka bude pouze pro čtení a nepůjde upravovat.`}
        confirmText="Zneplatnit"
        confirmVariant="danger"
        loading={invalidating}
      />

      <Modal
        isOpen={orderModal.show}
        onClose={() => setOrderModal({ show: false, quotation: null })}
        onSubmit={handleCreateOrder}
        title="Vytvořit objednávku"
        subtitle={`Nabídka: ${orderModal.quotation?.quotation_number ?? ""}`}
        submitText="Vytvořit"
        loading={!!creatingOrder}
      >
        <Field label="Číslo objednávky zákazníka" required>
          <TextField
            value={customerOrderNumber}
            onChange={(e) => setCustomerOrderNumber(e.target.value)}
            onKeyDown={(e) =>
              e.key === "Enter" && !creatingOrder && handleCreateOrder()
            }
            placeholder="Např. PO-2026-001"
            autoFocus
          />
        </Field>
        <Field label="Příloha (PDF)">
          <FileUpload
            files={orderAttachment ? [orderAttachment] : []}
            onFilesChange={(files) => setOrderAttachment(files[0] ?? null)}
            accept="application/pdf"
            multiple={false}
          />
          <Typography
            variant="caption"
            color="text.secondary"
            sx={{ display: "block", mt: 0.5 }}
          >
            Max 10 MB
          </Typography>
        </Field>
      </Modal>
    </PageEnter>
  );
}