import {
  useState,
  useEffect,
  useCallback,
  useRef,
  lazy,
  Suspense,
} from "react";
import { useAlert } from "../context/AlertContext";
import { useAuth } from "../context/AuthContext";
import { Link, useSearchParams } from "react-router-dom";
import { motion, AnimatePresence } from "framer-motion";
import ConfirmModal from "../components/ConfirmModal";
import Forbidden from "../components/Forbidden";

import apiFetch from "../utils/api";
import { formatCurrency, formatDate, czechPlural } from "../utils/formatters";
import SortIcon from "../components/SortIcon";
import useTableSort from "../hooks/useTableSort";
import useListData from "../hooks/useListData";
import Pagination from "../components/Pagination";

const ReceivedInvoices = lazy(() => import("./ReceivedInvoices"));
const API_BASE = "/api/admin";
const DRAFT_KEY = "boha_invoice_draft";

const MONTH_NAMES = [
  "leden",
  "únor",
  "březen",
  "duben",
  "květen",
  "červen",
  "červenec",
  "srpen",
  "září",
  "říjen",
  "listopad",
  "prosinec",
];

interface CurrencyAmount {
  amount: number;
  currency: string;
}

function formatMultiCurrency(amounts: CurrencyAmount[]): string {
  if (!Array.isArray(amounts) || amounts.length === 0) return "0 Kč";
  return amounts.map((a) => formatCurrency(a.amount, a.currency)).join(" · ");
}

function formatCzkWithDetail(
  amounts: CurrencyAmount[],
  totalCzk: number | null | undefined,
): { value: string; detail: string | null } {
  if (!Array.isArray(amounts) || amounts.length === 0)
    return { value: "0 Kč", detail: null };
  const hasForeign = amounts.some((a) => a.currency !== "CZK");
  if (hasForeign && totalCzk != null) {
    return {
      value: formatCurrency(totalCzk, "CZK"),
      detail: formatMultiCurrency(amounts),
    };
  }
  return { value: formatMultiCurrency(amounts), detail: null };
}

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

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

const STATUS_FILTERS = [
  { value: "", label: "Vše" },
  { value: "issued", label: "Vystavené" },
  { value: "paid", label: "Zaplacené" },
  { value: "overdue", label: "Po splatnosti" },
];

interface Invoice {
  id: number;
  invoice_number: string;
  customer_name: string | null;
  status: string;
  issue_date: string;
  due_date: string;
  total: number;
  currency: string;
}

interface InvoiceStats {
  paid_month: CurrencyAmount[];
  paid_month_czk: number;
  paid_month_count: number;
  awaiting: CurrencyAmount[];
  awaiting_czk: number;
  awaiting_count: number;
  overdue: CurrencyAmount[];
  overdue_czk: number;
  overdue_count: number;
  vat_month: CurrencyAmount[];
  vat_month_czk: number;
}

interface DraftData {
  form: Record<string, unknown>;
  items: Record<string, unknown>[];
  savedAt?: string;
}

export default function Invoices() {
  const alert = useAlert();
  const { hasPermission } = useAuth();

  const [searchParams, setSearchParams] = useSearchParams();
  const activeTab =
    searchParams.get("tab") === "received" ? "received" : "issued";
  const setActiveTab = (tab: string) =>
    setSearchParams({ tab }, { replace: true });
  const [receivedUploadOpen, setReceivedUploadOpen] = useState(false);
  const { sort, order, handleSort, activeSort } =
    useTableSort("invoice_number");
  const [search, setSearch] = useState("");
  const [page, setPage] = useState(1);
  const [statusFilter, setStatusFilter] = useState("");

  const now = new Date();
  const [statsMonth, setStatsMonth] = useState(now.getMonth() + 1);
  const [statsYear, setStatsYear] = useState(now.getFullYear());
  const [stats, setStats] = useState<InvoiceStats | null>(null);
  const [statsLoading, setStatsLoading] = useState(true);
  const hasLoadedOnce = useRef(false);
  const slideDirection = useRef(0);
  const [slideKey, setSlideKey] = useState(0);

  const isCurrentMonth =
    statsMonth === now.getMonth() + 1 && statsYear === now.getFullYear();
  const monthLabel = `${MONTH_NAMES[statsMonth - 1]} ${statsYear}`;

  const fetchStats = useCallback(async () => {
    setStatsLoading(true);
    try {
      const res = await apiFetch(
        `${API_BASE}/invoices/stats?month=${statsMonth}&year=${statsYear}`,
      );
      const data = await res.json();
      if (data.success) {
        setStats(data.data);
        hasLoadedOnce.current = true;
        setSlideKey((k) => k + 1);
      }
    } catch {
      /* ignore */
    } finally {
      setStatsLoading(false);
    }
  }, [statsMonth, statsYear]);

  useEffect(() => {
    fetchStats();
  }, [fetchStats]);

  const prevMonth = () => {
    slideDirection.current = -1;
    if (statsMonth === 1) {
      setStatsMonth(12);
      setStatsYear((y) => y - 1);
    } else {
      setStatsMonth((m) => m - 1);
    }
  };

  const nextMonth = () => {
    if (isCurrentMonth) return;
    slideDirection.current = 1;
    if (statsMonth === 12) {
      setStatsMonth(1);
      setStatsYear((y) => y + 1);
    } else {
      setStatsMonth((m) => m + 1);
    }
  };

  const [deleteConfirm, setDeleteConfirm] = useState<{
    show: boolean;
    invoice: Invoice | null;
  }>({ show: false, invoice: null });
  const [deleting, setDeleting] = useState(false);
  const [pdfLoading, setPdfLoading] = useState<number | null>(null);
  const [langModal, setLangModal] = useState<Invoice | null>(null);
  const [draft, setDraft] = useState<DraftData | null>(() => {
    try {
      const raw = localStorage.getItem(DRAFT_KEY);
      if (!raw) return null;
      const parsed = JSON.parse(raw) as DraftData;
      if (parsed && parsed.form && Array.isArray(parsed.items)) return parsed;
    } catch {
      /* ignore */
    }
    return null;
  });

  const discardDraft = () => {
    try {
      localStorage.removeItem(DRAFT_KEY);
    } catch {
      /* ignore */
    }
    setDraft(null);
  };

  const {
    items: invoices,
    loading,
    initialLoad,
    pagination,
    refetch: fetchData,
  } = useListData<Invoice>("invoices", {
    search,
    sort,
    order,
    page,
    extraParams: {
      month: String(statsMonth),
      year: String(statsYear),
      ...(statusFilter ? { status: statusFilter } : {}),
    },
    errorMsg: "Nepodařilo se načíst faktury",
  });

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

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

  const toggleStatus = async (inv: Invoice) => {
    if (inv.status === "paid") return;
    try {
      const res = await apiFetch(`${API_BASE}/invoices/${inv.id}`, {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ status: "paid" }),
      });
      const data = await res.json();
      if (data.success) {
        alert.success("Faktura označena jako zaplacená");
        fetchData();
        fetchStats();
      } else {
        alert.error(data.error || "Nepodařilo se změnit stav");
      }
    } catch {
      alert.error("Chyba připojení");
    }
  };

  const handlePdf = async (inv: Invoice, lang = "cs") => {
    if (pdfLoading) return;
    setLangModal(null);
    setPdfLoading(inv.id);
    try {
      const response = await apiFetch(
        `${API_BASE}/invoices-pdf/${inv.id}?lang=${encodeURIComponent(lang)}`,
      );
      if (response.status === 401) return;
      if (!response.ok) {
        alert.error("Nepodařilo se vygenerovat PDF");
        return;
      }
      const html = await response.text();
      const w = window.open("", "_blank");
      if (w) {
        w.document.open();
        w.document.write(html);
        w.document.close();
        w.onload = () => w.print();
      } else {
        alert.error("Prohlížeč zablokoval vyskakovací okno");
      }
    } catch {
      alert.error("Chyba při generování PDF");
    } finally {
      setPdfLoading(null);
    }
  };

  if (initialLoad) {
    return (
      <div>
        <div className="admin-skeleton" style={{ padding: 0, gap: "1.5rem" }}>
          <div
            className="admin-skeleton-row"
            style={{ justifyContent: "space-between" }}
          >
            <div>
              <div
                className="admin-skeleton-line h-8"
                style={{ width: "200px", marginBottom: "0.5rem" }}
              />
              <div className="admin-skeleton-line" style={{ width: "140px" }} />
            </div>
            <div
              className="admin-skeleton-line h-10"
              style={{ width: "140px", borderRadius: "8px" }}
            />
          </div>
          <div className="admin-kpi-grid admin-kpi-4">
            {[0, 1, 2, 3].map((i) => (
              <div key={i} className="admin-stat-card">
                <div
                  className="admin-skeleton-line"
                  style={{
                    width: "60%",
                    height: "11px",
                    marginBottom: "0.5rem",
                  }}
                />
                <div
                  className="admin-skeleton-line"
                  style={{
                    width: "40%",
                    height: "28px",
                    marginBottom: "0.5rem",
                  }}
                />
                <div
                  className="admin-skeleton-line"
                  style={{ width: "50%", height: "12px" }}
                />
              </div>
            ))}
          </div>
          <div className="admin-card">
            <div className="admin-skeleton" style={{ gap: "1rem" }}>
              {[0, 1, 2, 3, 4].map((i) => (
                <div key={i} className="admin-skeleton-row">
                  <div
                    className="admin-skeleton-line"
                    style={{ width: "80px" }}
                  />
                  <div className="admin-skeleton-line w-1/4" />
                  <div
                    className="admin-skeleton-line"
                    style={{ width: "70px" }}
                  />
                  <div
                    className="admin-skeleton-line"
                    style={{ width: "90px" }}
                  />
                  <div
                    className="admin-skeleton-line"
                    style={{ width: "90px" }}
                  />
                  <div
                    className="admin-skeleton-line"
                    style={{ width: "100px" }}
                  />
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div>
      <motion.div
        className="admin-page-header"
        initial={{ opacity: 0, y: 12 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.25 }}
      >
        <div>
          <h1 className="admin-page-title">Faktury</h1>
          <p className="admin-page-subtitle">
            {pagination?.total ?? invoices.length}{" "}
            {czechPlural(
              pagination?.total ?? invoices.length,
              "faktura",
              "faktury",
              "faktur",
            )}
          </p>
        </div>
        {hasPermission("invoices.create") && (
          <div className="admin-page-actions">
            {activeTab === "received" ? (
              <button
                className="admin-btn admin-btn-primary"
                onClick={() => setReceivedUploadOpen(true)}
              >
                <svg
                  width="18"
                  height="18"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                >
                  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
                  <polyline points="17 8 12 3 7 8" />
                  <line x1="12" y1="3" x2="12" y2="15" />
                </svg>
                Nahrát faktury
              </button>
            ) : (
              <Link to="/invoices/new" className="admin-btn admin-btn-primary">
                <svg
                  width="18"
                  height="18"
                  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>
                Nová faktura
              </Link>
            )}
          </div>
        )}
      </motion.div>

      <motion.div
        initial={{ opacity: 0, y: 12 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.25, delay: 0.06 }}
      >
        <div className="invoice-month-nav">
          <button
            className="invoice-month-btn"
            onClick={prevMonth}
            aria-label="Předchozí měsíc"
          >
            <svg
              width="14"
              height="14"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2.5"
            >
              <polyline points="15 18 9 12 15 6" />
            </svg>
          </button>
          <span>{monthLabel}</span>
          <button
            className="invoice-month-btn"
            onClick={nextMonth}
            disabled={isCurrentMonth}
            aria-label="Následující měsíc"
          >
            <svg
              width="14"
              height="14"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2.5"
            >
              <polyline points="9 18 15 12 9 6" />
            </svg>
          </button>
        </div>

        <div className="admin-tabs mb-4" style={{ justifyContent: "center" }}>
          <button
            className={`admin-tab ${activeTab === "issued" ? "active" : ""}`}
            onClick={() => setActiveTab("issued")}
          >
            Vydané
          </button>
          <button
            className={`admin-tab ${activeTab === "received" ? "active" : ""}`}
            onClick={() => setActiveTab("received")}
          >
            Přijaté
          </button>
        </div>
      </motion.div>

      {activeTab === "received" ? (
        <motion.div
          initial={{ opacity: 0, y: 12 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.25, delay: 0.1 }}
        >
          <Suspense
            fallback={
              <div
                className="admin-kpi-grid admin-kpi-4"
                style={{ marginBottom: "1.5rem" }}
              >
                {[0, 1, 2, 3].map((i) => (
                  <div key={i} className="admin-stat-card">
                    <div
                      className="admin-skeleton-line"
                      style={{
                        width: "60%",
                        height: "11px",
                        marginBottom: "0.5rem",
                      }}
                    />
                    <div
                      className="admin-skeleton-line"
                      style={{
                        width: "40%",
                        height: "28px",
                        marginBottom: "0.5rem",
                      }}
                    />
                    <div
                      className="admin-skeleton-line"
                      style={{ width: "50%", height: "12px" }}
                    />
                  </div>
                ))}
              </div>
            }
          >
            <ReceivedInvoices
              statsMonth={statsMonth}
              statsYear={statsYear}
              uploadOpen={receivedUploadOpen}
              setUploadOpen={setReceivedUploadOpen}
            />
          </Suspense>
        </motion.div>
      ) : (
        <>
          <motion.div
            initial={{ opacity: 0, y: 12 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.25, delay: 0.1 }}
          >
            {!hasLoadedOnce.current && statsLoading ? (
              <div
                className="admin-kpi-grid admin-kpi-4"
                style={{ marginBottom: "1.5rem" }}
              >
                {[0, 1, 2, 3].map((i) => (
                  <div key={i} className="admin-stat-card">
                    <div
                      className="admin-skeleton-line"
                      style={{
                        width: "60%",
                        height: "11px",
                        marginBottom: "0.5rem",
                      }}
                    />
                    <div
                      className="admin-skeleton-line"
                      style={{
                        width: "40%",
                        height: "28px",
                        marginBottom: "0.5rem",
                      }}
                    />
                    <div
                      className="admin-skeleton-line"
                      style={{ width: "50%", height: "12px" }}
                    />
                  </div>
                ))}
              </div>
            ) : (
              stats && (
                <div style={{ overflow: "hidden", marginBottom: "1.5rem" }}>
                  <AnimatePresence
                    mode="popLayout"
                    initial={false}
                    custom={slideDirection.current}
                  >
                    <motion.div
                      key={slideKey}
                      className="admin-kpi-grid admin-kpi-4"
                      custom={slideDirection.current}
                      variants={{
                        enter: (dir: number) => ({
                          x: `${(dir || 0) * 105}%`,
                          opacity: 0,
                        }),
                        center: { x: "0%", opacity: 1 },
                        exit: (dir: number) => ({
                          x: `${(dir || 0) * -105}%`,
                          opacity: 0,
                        }),
                      }}
                      initial="enter"
                      animate="center"
                      exit="exit"
                      transition={{
                        type: "spring",
                        stiffness: 300,
                        damping: 30,
                      }}
                    >
                      {(() => {
                        const paid = formatCzkWithDetail(
                          stats.paid_month,
                          stats.paid_month_czk,
                        );
                        const wait = formatCzkWithDetail(
                          stats.awaiting,
                          stats.awaiting_czk,
                        );
                        const over = formatCzkWithDetail(
                          stats.overdue,
                          stats.overdue_czk,
                        );
                        const vat = formatCzkWithDetail(
                          stats.vat_month,
                          stats.vat_month_czk,
                        );
                        const countFooter = (count: number, zero: string) =>
                          count > 0
                            ? `${count} ${czechPlural(count, "faktura", "faktury", "faktur")}`
                            : zero;
                        return (
                          <>
                            <div className="admin-stat-card success">
                              <div className="admin-stat-label">
                                Uhrazeno ({MONTH_NAMES[statsMonth - 1]})
                              </div>
                              <div className="admin-stat-value admin-mono">
                                {paid.value}
                              </div>
                              <div className="admin-stat-footer">
                                {[
                                  paid.detail,
                                  countFooter(
                                    stats.paid_month_count,
                                    "žádné úhrady",
                                  ),
                                ]
                                  .filter(Boolean)
                                  .join(" · ")}
                              </div>
                            </div>
                            <div className="admin-stat-card warning">
                              <div className="admin-stat-label">
                                Čeká úhrada{" "}
                                <span style={{ fontWeight: 400, opacity: 0.7 }}>
                                  · celkově
                                </span>
                              </div>
                              <div className="admin-stat-value admin-mono">
                                {wait.value}
                              </div>
                              <div className="admin-stat-footer">
                                {[
                                  wait.detail,
                                  countFooter(
                                    stats.awaiting_count,
                                    "vše uhrazeno",
                                  ),
                                ]
                                  .filter(Boolean)
                                  .join(" · ")}
                              </div>
                            </div>
                            <div className="admin-stat-card danger">
                              <div className="admin-stat-label">
                                Po splatnosti{" "}
                                <span style={{ fontWeight: 400, opacity: 0.7 }}>
                                  · celkově
                                </span>
                              </div>
                              <div className="admin-stat-value admin-mono">
                                {over.value}
                              </div>
                              <div className="admin-stat-footer">
                                {[
                                  over.detail,
                                  stats.overdue_count === 0
                                    ? "vše v pořádku"
                                    : countFooter(stats.overdue_count, ""),
                                ]
                                  .filter(Boolean)
                                  .join(" · ")}
                              </div>
                            </div>
                            <div className="admin-stat-card info">
                              <div className="admin-stat-label">
                                DPH ({MONTH_NAMES[statsMonth - 1]})
                              </div>
                              <div className="admin-stat-value admin-mono">
                                {vat.value}
                              </div>
                              <div className="admin-stat-footer">
                                {vat.detail || "z vydaných faktur"}
                              </div>
                            </div>
                          </>
                        );
                      })()}
                    </motion.div>
                  </AnimatePresence>
                </div>
              )
            )}
          </motion.div>

          <motion.div
            initial={{ opacity: 0, y: 12 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.25, delay: 0.12 }}
          >
            <div className="admin-tabs mb-6">
              {STATUS_FILTERS.map((f) => (
                <button
                  key={f.value}
                  className={`admin-tab ${statusFilter === f.value ? "active" : ""}`}
                  onClick={() => {
                    setStatusFilter(f.value);
                    setPage(1);
                  }}
                >
                  {f.label}
                </button>
              ))}
            </div>
          </motion.div>

          <motion.div
            className="admin-card"
            initial={{ opacity: 0, y: 12 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.25, delay: 0.15 }}
            style={{ opacity: loading ? 0.6 : 1, transition: "opacity 0.2s" }}
          >
            <div className="admin-card-body">
              <div className="admin-search-bar mb-4">
                <input
                  type="text"
                  value={search}
                  onChange={(e) => {
                    setSearch(e.target.value);
                    setPage(1);
                  }}
                  className="admin-form-input"
                  placeholder="Hledat podle čísla faktury, zákazníka nebo IČ..."
                />
              </div>

              {invoices.length === 0 && !(draft && !statusFilter) ? (
                <div className="admin-empty-state">
                  <div className="admin-empty-icon">
                    <svg
                      width="28"
                      height="28"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="1.5"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    >
                      <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" />
                      <polyline points="10 9 9 9 8 9" />
                    </svg>
                  </div>
                  <p>Zatím nejsou žádné faktury.</p>
                  {hasPermission("invoices.create") && (
                    <p
                      className="text-tertiary"
                      style={{ fontSize: "0.875rem" }}
                    >
                      Vytvořte první fakturu tlačítkem výše.
                    </p>
                  )}
                </div>
              ) : (
                <div className="admin-table-responsive">
                  <table className="admin-table">
                    <thead>
                      <tr>
                        <th
                          style={{ cursor: "pointer" }}
                          onClick={() => handleSort("invoice_number")}
                        >
                          Číslo{" "}
                          <SortIcon
                            column="invoice_number"
                            sort={activeSort}
                            order={order}
                          />
                        </th>
                        <th>Zákazník</th>
                        <th
                          style={{ cursor: "pointer" }}
                          onClick={() => handleSort("status")}
                        >
                          Stav{" "}
                          <SortIcon
                            column="status"
                            sort={activeSort}
                            order={order}
                          />
                        </th>
                        <th
                          style={{ cursor: "pointer" }}
                          onClick={() => handleSort("issue_date")}
                        >
                          Vystaveno{" "}
                          <SortIcon
                            column="issue_date"
                            sort={activeSort}
                            order={order}
                          />
                        </th>
                        <th
                          style={{ cursor: "pointer" }}
                          onClick={() => handleSort("due_date")}
                        >
                          Splatnost{" "}
                          <SortIcon
                            column="due_date"
                            sort={activeSort}
                            order={order}
                          />
                        </th>
                        <th className="text-right">Celkem</th>
                        <th>Akce</th>
                      </tr>
                    </thead>
                    <tbody>
                      {draft && !search && !statusFilter && (
                        <tr className="offers-draft-row">
                          <td>
                            <span className="offers-draft-row-label">
                              Koncept
                              {draft.savedAt && (
                                <span style={{ fontWeight: 400, opacity: 0.8 }}>
                                  {" · "}
                                  {new Date(draft.savedAt).toLocaleTimeString(
                                    "cs-CZ",
                                    { hour: "2-digit", minute: "2-digit" },
                                  )}
                                </span>
                              )}
                            </span>
                          </td>
                          <td>
                            {(draft.form.customer_name as string) || "\u2014"}
                          </td>
                          <td>{"\u2014"}</td>
                          <td className="admin-mono">
                            {draft.form.issue_date
                              ? formatDate(draft.form.issue_date as string)
                              : "\u2014"}
                          </td>
                          <td className="admin-mono">
                            {draft.form.due_date
                              ? formatDate(draft.form.due_date as string)
                              : "\u2014"}
                          </td>
                          <td />
                          <td>
                            <div className="admin-table-actions">
                              <Link
                                to="/invoices/new"
                                className="admin-btn-icon"
                                title="Pokračovat v konceptu"
                                aria-label="Pokračovat v konceptu"
                              >
                                <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>
                              </Link>
                              <button
                                onClick={discardDraft}
                                className="admin-btn-icon danger"
                                title="Zahodit koncept"
                              >
                                <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>
                              </button>
                            </div>
                          </td>
                        </tr>
                      )}
                      {invoices.map((inv) => {
                        const isOverdue =
                          inv.status === "overdue" ||
                          (inv.status === "issued" &&
                            inv.due_date &&
                            new Date(inv.due_date) <
                              new Date(new Date().toDateString()));
                        return (
                          <tr
                            key={inv.id}
                            className={isOverdue ? "offers-expired-row" : ""}
                          >
                            <td className="admin-mono">
                              <Link
                                to={`/invoices/${inv.id}`}
                                className="link-accent"
                              >
                                {inv.invoice_number}
                              </Link>
                            </td>
                            <td>{inv.customer_name || "\u2014"}</td>
                            <td>
                              {inv.status === "paid" ? (
                                <span
                                  className={`admin-badge ${STATUS_CLASSES[inv.status]}`}
                                >
                                  {STATUS_LABELS[inv.status]}
                                </span>
                              ) : (
                                <button
                                  onClick={() => toggleStatus(inv)}
                                  className={`admin-badge ${STATUS_CLASSES[inv.status] || ""}`}
                                  style={{ cursor: "pointer" }}
                                >
                                  {STATUS_LABELS[inv.status] || inv.status}
                                </button>
                              )}
                            </td>
                            <td className="admin-mono">
                              {formatDate(inv.issue_date)}
                            </td>
                            <td
                              className="admin-mono"
                              style={
                                inv.status === "overdue"
                                  ? { color: "var(--danger)", fontWeight: 600 }
                                  : undefined
                              }
                            >
                              {formatDate(inv.due_date)}
                            </td>
                            <td
                              className="admin-mono"
                              style={{ textAlign: "right", fontWeight: 500 }}
                            >
                              {formatCurrency(inv.total, inv.currency)}
                            </td>
                            <td>
                              <div className="admin-table-actions">
                                <Link
                                  to={`/invoices/${inv.id}`}
                                  className="admin-btn-icon"
                                  title="Detail"
                                  aria-label="Detail"
                                >
                                  <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>
                                </Link>
                                {hasPermission("invoices.export") && (
                                  <button
                                    onClick={() => setLangModal(inv)}
                                    className="admin-btn-icon"
                                    title="PDF"
                                    disabled={pdfLoading === inv.id}
                                  >
                                    {pdfLoading === inv.id ? (
                                      <div
                                        className="admin-spinner"
                                        style={{
                                          width: 18,
                                          height: 18,
                                          borderWidth: 2,
                                        }}
                                      />
                                    ) : (
                                      <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>
                                    )}
                                  </button>
                                )}
                                {hasPermission("invoices.delete") && (
                                  <button
                                    onClick={() =>
                                      setDeleteConfirm({
                                        show: true,
                                        invoice: inv,
                                      })
                                    }
                                    className="admin-btn-icon danger"
                                    title="Smazat"
                                  >
                                    <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>
                                  </button>
                                )}
                              </div>
                            </td>
                          </tr>
                        );
                      })}
                    </tbody>
                  </table>
                </div>
              )}
              <Pagination pagination={pagination} onPageChange={setPage} />
            </div>
          </motion.div>

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

          <AnimatePresence>
            {langModal && (
              <motion.div
                className="admin-modal-overlay"
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                exit={{ opacity: 0 }}
                transition={{ duration: 0.2 }}
              >
                <div
                  className="admin-modal-backdrop"
                  onClick={() => setLangModal(null)}
                />
                <motion.div
                  className="admin-modal admin-confirm-modal"
                  role="dialog"
                  aria-modal="true"
                  initial={{ opacity: 0, scale: 0.95, y: 20 }}
                  animate={{ opacity: 1, scale: 1, y: 0 }}
                  exit={{ opacity: 0, scale: 0.95, y: 20 }}
                  transition={{ duration: 0.2 }}
                >
                  <div className="admin-modal-body admin-confirm-content">
                    <div className="admin-confirm-icon admin-confirm-icon-info">
                      <svg
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                      >
                        <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z" />
                        <path d="M2 12h20" />
                        <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
                      </svg>
                    </div>
                    <h2 className="admin-confirm-title">Jazyk faktury</h2>
                    <p className="admin-confirm-message">
                      V jakém jazyce chcete vygenerovat fakturu?
                    </p>
                  </div>
                  <div className="admin-modal-footer">
                    <button
                      type="button"
                      onClick={() => handlePdf(langModal, "cs")}
                      className="admin-btn admin-btn-primary"
                    >
                      Čeština
                    </button>
                    <button
                      type="button"
                      onClick={() => handlePdf(langModal, "en")}
                      className="admin-btn admin-btn-primary"
                    >
                      English
                    </button>
                  </div>
                </motion.div>
              </motion.div>
            )}
          </AnimatePresence>
        </>
      )}
    </div>
  );
}