import { useState, useEffect, useCallback, useRef } from "react";
import { useAlert } from "../context/AlertContext";
import { useAuth } from "../context/AuthContext";
import { motion, AnimatePresence } from "framer-motion";
import ConfirmModal from "../components/ConfirmModal";
import FormField from "../components/FormField";
import apiFetch from "../utils/api";
import { formatCurrency, formatDate, czechPlural } from "../utils/formatters";
import SortIcon from "../components/SortIcon";
import useTableSort from "../hooks/useTableSort";
import useModalLock from "../hooks/useModalLock";
import AdminDatePicker from "../components/AdminDatePicker";

const API_BASE = "/api/admin";

const STATUS_LABELS: Record<string, string> = {
  unpaid: "Neuhrazena",
  paid: "Uhrazena",
};
const STATUS_CLASSES: Record<string, string> = {
  unpaid: "admin-badge-invoice-overdue",
  paid: "admin-badge-invoice-paid",
};
const DEFAULT_CURRENCIES = ["CZK", "EUR", "USD", "GBP"];
const DEFAULT_VAT_RATES = [0, 10, 12, 15, 21];

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

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

interface ReceivedInvoice {
  id: number;
  supplier_name: string;
  invoice_number: string;
  amount: number;
  currency: string;
  vat_rate: number;
  issue_date: string;
  due_date: string;
  notes: string;
  status: string;
  file_name?: string;
  created_at: string;
}

interface ReceivedStats {
  total_month: CurrencyAmount[];
  total_month_czk: number | null;
  vat_month: CurrencyAmount[];
  vat_month_czk: number | null;
  unpaid: CurrencyAmount[];
  unpaid_czk: number | null;
  unpaid_count: number;
  month_count: number;
}

interface UploadMeta {
  supplier_name: string;
  invoice_number: string;
  amount: string;
  currency: string;
  vat_rate: string;
  issue_date: string;
  due_date: string;
  notes: string;
}

interface EditInvoice extends Omit<ReceivedInvoice, "amount" | "vat_rate"> {
  amount: string;
  vat_rate: string;
  _originalStatus: string;
}

interface UploadErrors {
  [idx: number]: {
    [field: string]: string;
  };
}

interface ReceivedInvoicesProps {
  statsMonth: number;
  statsYear: number;
  uploadOpen: boolean;
  setUploadOpen: (open: boolean) => void;
}

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 && totalCzk !== undefined) {
    return {
      value: formatCurrency(totalCzk, "CZK"),
      detail: formatMultiCurrency(amounts),
    };
  }
  return { value: formatMultiCurrency(amounts), detail: null };
}

interface CompanySettings {
  default_currency: string;
  default_vat_rate: number;
  available_currencies: string[];
  available_vat_rates: number[];
}

function emptyMeta(settings: CompanySettings | null): UploadMeta {
  return {
    supplier_name: "",
    invoice_number: "",
    amount: "",
    currency: settings?.default_currency || "CZK",
    vat_rate: String(settings?.default_vat_rate ?? 21),
    issue_date: "",
    due_date: "",
    notes: "",
  };
}

export default function ReceivedInvoices({
  statsMonth,
  statsYear,
  uploadOpen,
  setUploadOpen,
}: ReceivedInvoicesProps) {
  const alert = useAlert();
  const { hasPermission } = useAuth();
  const { sort, order, handleSort, activeSort } = useTableSort("created_at");
  const [search, setSearch] = useState("");

  const [invoices, setInvoices] = useState<ReceivedInvoice[]>([]);
  const [loading, setLoading] = useState(true);
  const [stats, setStats] = useState<ReceivedStats | null>(null);
  const [statsLoading, setStatsLoading] = useState(true);
  const hasLoadedOnce = useRef(false);
  const slideDirection = useRef(0);
  const [slideKey, setSlideKey] = useState(0);
  const prevMonth = useRef(statsMonth);
  const prevYear = useRef(statsYear);

  const [editOpen, setEditOpen] = useState(false);
  const [editInvoice, setEditInvoice] = useState<EditInvoice | null>(null);
  const [deleteConfirm, setDeleteConfirm] = useState<{
    show: boolean;
    invoice: ReceivedInvoice | null;
  }>({ show: false, invoice: null });
  const [deleting, setDeleting] = useState(false);
  const [saving, setSaving] = useState(false);

  const [supplierNames, setSupplierNames] = useState<string[]>([]);
  const [companySettings, setCompanySettings] =
    useState<CompanySettings | null>(null);

  const [uploadFiles, setUploadFiles] = useState<File[]>([]);
  const [uploadMeta, setUploadMeta] = useState<UploadMeta[]>([]);
  const [uploadErrors, setUploadErrors] = useState<UploadErrors>({});
  const fileInputRef = useRef<HTMLInputElement>(null);

  useModalLock(uploadOpen || editOpen);

  useEffect(() => {
    const prev = prevYear.current * 12 + prevMonth.current;
    const curr = statsYear * 12 + statsMonth;
    if (curr > prev) {
      slideDirection.current = 1;
    }
    if (curr < prev) {
      slideDirection.current = -1;
    }
    prevMonth.current = statsMonth;
    prevYear.current = statsYear;
  }, [statsMonth, statsYear]);

  const fetchList = useCallback(async () => {
    if (!hasLoadedOnce.current) setLoading(true);
    try {
      const params = new URLSearchParams({
        month: String(statsMonth),
        year: String(statsYear),
      });
      if (search) {
        params.set("search", search);
      }
      if (sort) {
        params.set("sort", sort);
      }
      if (order) {
        params.set("order", order);
      }
      const res = await apiFetch(`${API_BASE}/received-invoices?${params}`);
      const data = await res.json();
      if (data.success) {
        setInvoices(Array.isArray(data.data) ? data.data : []);
      }
    } catch {
      /* ignore */
    } finally {
      setLoading(false);
      hasLoadedOnce.current = true;
    }
  }, [statsMonth, statsYear, search, sort, order]);

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

  useEffect(() => {
    apiFetch(`${API_BASE}/received-invoices/suppliers`)
      .then((r) => r.json())
      .then((d) => {
        if (d.success) setSupplierNames(d.data || []);
      })
      .catch(() => {});
  }, []);

  useEffect(() => {
    apiFetch(`${API_BASE}/company-settings`)
      .then((r) => r.json())
      .then((d) => {
        if (d.success) setCompanySettings(d.data);
      })
      .catch(() => {});
  }, []);

  const currencyOptions =
    companySettings?.available_currencies || DEFAULT_CURRENCIES;
  const vatRateOptions =
    companySettings?.available_vat_rates || DEFAULT_VAT_RATES;
  const defaultCurrency = companySettings?.default_currency || "CZK";
  const defaultVatRate = String(companySettings?.default_vat_rate ?? 21);

  // Fetch stats (silent refresh without animation)
  const refreshStats = useCallback(async () => {
    try {
      const res = await apiFetch(
        `${API_BASE}/received-invoices/stats?month=${statsMonth}&year=${statsYear}`,
      );
      const data = await res.json();
      if (data.success) {
        setStats(data.data);
        hasLoadedOnce.current = true;
      }
    } catch {
      /* ignore */
    }
  }, [statsMonth, statsYear]);

  // Fetch stats on month change (with slide animation)
  useEffect(() => {
    setStatsLoading(true);
    const load = async () => {
      try {
        const res = await apiFetch(
          `${API_BASE}/received-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);
      }
    };
    load();
  }, [statsMonth, statsYear]);

  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
    const selected = Array.from(e.target.files || []);
    if (selected.length === 0) {
      return;
    }
    if (uploadFiles.length + selected.length > 20) {
      alert.error("Maximálně 20 souborů najednou");
      return;
    }
    const valid = selected.filter((f) => {
      if (f.size > 10 * 1024 * 1024) {
        alert.error(`Soubor "${f.name}" je větší než 10 MB`);
        return false;
      }
      const allowed = ["application/pdf", "image/jpeg", "image/png"];
      if (!allowed.includes(f.type)) {
        alert.error(`Soubor "${f.name}": nepodporovaný formát`);
        return false;
      }
      return true;
    });
    setUploadFiles((prev) => [...prev, ...valid]);
    setUploadMeta((prev) => [
      ...prev,
      ...valid.map(() => emptyMeta(companySettings)),
    ]);
    e.target.value = "";
  };

  const removeUploadFile = (idx: number) => {
    setUploadFiles((prev) => prev.filter((_, i) => i !== idx));
    setUploadMeta((prev) => prev.filter((_, i) => i !== idx));
    const newErrors = { ...uploadErrors };
    delete newErrors[idx];
    setUploadErrors(newErrors);
  };

  const updateMeta = (idx: number, field: keyof UploadMeta, value: string) => {
    setUploadMeta((prev) =>
      prev.map((m, i) => (i === idx ? { ...m, [field]: value } : m)),
    );
    if (uploadErrors[idx]) {
      const newErrors = { ...uploadErrors };
      if (newErrors[idx]?.[field]) {
        delete newErrors[idx][field];
        if (Object.keys(newErrors[idx]).length === 0) {
          delete newErrors[idx];
        }
      }
      setUploadErrors(newErrors);
    }
  };

  const validateUpload = (): boolean => {
    const errors: UploadErrors = {};
    uploadMeta.forEach((m, i) => {
      const e: Record<string, string> = {};
      if (!m.supplier_name.trim()) {
        e.supplier_name = "Povinné pole";
      }
      if (!m.amount || parseFloat(m.amount) <= 0) {
        e.amount = "Částka musí být větší než 0";
      }
      if (Object.keys(e).length > 0) {
        errors[i] = e;
      }
    });
    setUploadErrors(errors);
    return Object.keys(errors).length === 0;
  };

  const handleUploadSave = async () => {
    if (uploadFiles.length === 0) {
      alert.error("Vyberte alespoň jeden soubor");
      return;
    }
    if (!validateUpload()) {
      return;
    }

    setSaving(true);
    try {
      const formData = new FormData();
      uploadFiles.forEach((f) => formData.append("files[]", f));
      formData.append("invoices", JSON.stringify(uploadMeta));

      const res = await apiFetch(`${API_BASE}/received-invoices`, {
        method: "POST",
        body: formData,
      });
      const data = await res.json();
      if (data.success) {
        alert.success(data.message || "Faktury byly nahrány");
        setUploadOpen(false);
        setUploadFiles([]);
        setUploadMeta([]);
        setUploadErrors({});
        fetchList();
        refreshStats();
      } else {
        alert.error(data.error || "Chyba při nahrávání");
      }
    } catch {
      alert.error("Chyba připojení");
    } finally {
      setSaving(false);
    }
  };

  const toDateInput = (d: string | null | undefined): string => {
    if (!d) return "";
    const date = new Date(d);
    if (isNaN(date.getTime())) return "";
    return date.toISOString().split("T")[0];
  };

  const openEdit = (inv: ReceivedInvoice) => {
    setEditInvoice({
      ...inv,
      amount: String(inv.amount),
      vat_rate: String(inv.vat_rate),
      issue_date: toDateInput(inv.issue_date),
      due_date: toDateInput(inv.due_date),
      _originalStatus: inv.status,
    });
    setEditOpen(true);
  };

  const handleEditSave = async () => {
    if (!editInvoice) {
      return;
    }
    if (!editInvoice.supplier_name?.trim()) {
      alert.error("Dodavatel je povinný");
      return;
    }
    if (!editInvoice.amount || parseFloat(editInvoice.amount) <= 0) {
      alert.error("Částka musí být větší než 0");
      return;
    }

    setSaving(true);
    try {
      const payload = {
        supplier_name: editInvoice.supplier_name,
        invoice_number: editInvoice.invoice_number || "",
        amount: parseFloat(editInvoice.amount),
        currency: editInvoice.currency,
        vat_rate: parseFloat(editInvoice.vat_rate),
        issue_date: editInvoice.issue_date || "",
        due_date: editInvoice.due_date || "",
        notes: editInvoice.notes || "",
        status: editInvoice.status,
      };
      const res = await apiFetch(
        `${API_BASE}/received-invoices/${editInvoice.id}`,
        {
          method: "PUT",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(payload),
        },
      );
      const data = await res.json();
      if (data.success) {
        alert.success(data.message || "Faktura byla aktualizována");
        setEditOpen(false);
        setEditInvoice(null);
        fetchList();
        refreshStats();
      } else {
        alert.error(data.error || "Chyba při ukládání");
      }
    } catch {
      alert.error("Chyba připojení");
    } finally {
      setSaving(false);
    }
  };

  const handleDelete = async () => {
    if (!deleteConfirm.invoice) {
      return;
    }
    setDeleting(true);
    try {
      const res = await apiFetch(
        `${API_BASE}/received-invoices/${deleteConfirm.invoice.id}`,
        {
          method: "DELETE",
        },
      );
      const data = await res.json();
      if (data.success) {
        alert.success(data.message || "Faktura byla smazána");
        setDeleteConfirm({ show: false, invoice: null });
        fetchList();
        refreshStats();
      } else {
        alert.error(data.error || "Chyba při mazání");
      }
    } catch {
      alert.error("Chyba připojení");
    } finally {
      setDeleting(false);
    }
  };

  const openFile = async (inv: ReceivedInvoice) => {
    const newWindow = window.open("", "_blank");
    try {
      const response = await apiFetch(
        `${API_BASE}/received-invoices/${inv.id}/file`,
      );
      if (!response.ok) {
        newWindow?.close();
        alert.error("Nepodařilo se načíst soubor");
        return;
      }
      const blob = await response.blob();
      const url = URL.createObjectURL(blob);
      if (newWindow) newWindow.location.href = url;
      setTimeout(() => URL.revokeObjectURL(url), 60000);
    } catch {
      newWindow?.close();
      alert.error("Chyba připojení");
    }
  };

  const toggleStatus = async (inv: ReceivedInvoice) => {
    if (inv.status === "paid") return;
    try {
      const res = await apiFetch(`${API_BASE}/received-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 uhrazená");
        fetchList();
        refreshStats();
      } else {
        alert.error(data.error || "Nepodařilo se změnit stav");
      }
    } catch {
      alert.error("Chyba připojení");
    }
  };

  const monthLabel = `${MONTH_NAMES[statsMonth - 1]}`;

  const renderKpi = () => {
    if (!hasLoadedOnce.current && statsLoading) {
      return (
        <div className="admin-kpi-grid admin-kpi-4 mb-6">
          {[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>
      );
    }
    if (!stats) {
      return null;
    }

    const total = formatCzkWithDetail(stats.total_month, stats.total_month_czk);
    const vat = formatCzkWithDetail(stats.vat_month, stats.vat_month_czk);
    const unpaid = formatCzkWithDetail(stats.unpaid, stats.unpaid_czk);

    return (
      <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 }}
          >
            <div className="admin-stat-card success">
              <div className="admin-stat-label">Celkem ({monthLabel})</div>
              <div className="admin-stat-value admin-mono">{total.value}</div>
              <div className="admin-stat-footer">
                {total.detail ||
                  `${stats.month_count} ${czechPlural(stats.month_count, "faktura", "faktury", "faktur")}`}
              </div>
            </div>
            <div className="admin-stat-card info">
              <div className="admin-stat-label">
                DPH k odpočtu ({monthLabel})
              </div>
              <div className="admin-stat-value admin-mono">{vat.value}</div>
              <div className="admin-stat-footer">
                {vat.detail || "z přijatých faktur"}
              </div>
            </div>
            <div className="admin-stat-card warning">
              <div className="admin-stat-label">
                Neuhrazeno{" "}
                <span style={{ fontWeight: 400, opacity: 0.7 }}>· celkově</span>
              </div>
              <div className="admin-stat-value admin-mono">{unpaid.value}</div>
              <div className="admin-stat-footer">
                {unpaid.detail ||
                  (stats.unpaid_count === 0
                    ? "vše uhrazeno"
                    : `${stats.unpaid_count} ${czechPlural(stats.unpaid_count, "faktura", "faktury", "faktur")}`)}
              </div>
            </div>
            <div className="admin-stat-card">
              <div className="admin-stat-label">Počet ({monthLabel})</div>
              <div className="admin-stat-value admin-mono">
                {stats.month_count}
              </div>
              <div className="admin-stat-footer">
                {stats.month_count === 0 ? "žádné faktury" : `přijatých faktur`}
              </div>
            </div>
          </motion.div>
        </AnimatePresence>
      </div>
    );
  };

  return (
    <>
      {renderKpi()}

      <motion.div
        initial={{ opacity: 0, y: 12 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.25, delay: 0.06 }}
      ></motion.div>

      <motion.div
        className="admin-card"
        initial={{ opacity: 0, y: 12 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.25, delay: 0.08 }}
      >
        <div className="admin-card-body">
          <div className="admin-search-bar mb-4">
            <input
              type="text"
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              className="admin-form-input"
              placeholder="Hledat podle dodavatele nebo čísla faktury..."
            />
          </div>

          {loading && (
            <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 w-1/4" />
                  <div className="admin-skeleton-line w-1/4" />
                  <div className="admin-skeleton-line w-1/4" />
                </div>
              ))}
            </div>
          )}
          {!loading && invoices.length === 0 && (
            <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" />
                </svg>
              </div>
              <p>Žádné přijaté faktury v tomto měsíci.</p>
              {hasPermission("invoices.create") && (
                <p
                  style={{
                    color: "var(--text-tertiary)",
                    fontSize: "0.875rem",
                  }}
                >
                  Nahrajte faktury tlačítkem výše.
                </p>
              )}
            </div>
          )}
          {!loading && invoices.length > 0 && (
            <div className="admin-table-responsive">
              <table className="admin-table">
                <thead>
                  <tr>
                    <th
                      style={{ cursor: "pointer" }}
                      onClick={() => handleSort("supplier_name")}
                    >
                      Dodavatel{" "}
                      <SortIcon
                        column="supplier_name"
                        sort={activeSort}
                        order={order}
                      />
                    </th>
                    <th
                      style={{ cursor: "pointer" }}
                      onClick={() => handleSort("invoice_number")}
                    >
                      Č. faktury{" "}
                      <SortIcon
                        column="invoice_number"
                        sort={activeSort}
                        order={order}
                      />
                    </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
                      style={{ textAlign: "right", cursor: "pointer" }}
                      onClick={() => handleSort("amount")}
                    >
                      Částka{" "}
                      <SortIcon
                        column="amount"
                        sort={activeSort}
                        order={order}
                      />
                    </th>
                    <th>Akce</th>
                  </tr>
                </thead>
                <tbody>
                  {invoices.map((inv) => (
                    <tr key={inv.id}>
                      <td>{inv.supplier_name}</td>
                      <td className="admin-mono">
                        {inv.invoice_number ? (
                          <span
                            className="link-accent"
                            style={{ cursor: "pointer" }}
                            onClick={() => openFile(inv)}
                          >
                            {inv.invoice_number}
                          </span>
                        ) : (
                          "—"
                        )}
                      </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">{formatDate(inv.due_date)}</td>
                      <td className="admin-mono text-right fw-500">
                        {formatCurrency(inv.amount, inv.currency)}
                      </td>
                      <td>
                        <div className="admin-table-actions">
                          {inv.file_name && (
                            <button
                              className="admin-btn-icon"
                              title="Zobrazit soubor"
                              onClick={() => openFile(inv)}
                            >
                              <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>
                            </button>
                          )}
                          {hasPermission("invoices.edit") && (
                            <button
                              className="admin-btn-icon"
                              title="Upravit"
                              onClick={() => openEdit(inv)}
                            >
                              <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>
                            </button>
                          )}
                          {hasPermission("invoices.delete") && (
                            <button
                              className="admin-btn-icon danger"
                              title="Smazat"
                              onClick={() =>
                                setDeleteConfirm({ show: true, invoice: inv })
                              }
                            >
                              <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>
          )}
        </div>
      </motion.div>

      {/* Upload Modal */}
      <AnimatePresence>
        {uploadOpen && (
          <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={() => !saving && setUploadOpen(false)}
            />
            <motion.div
              className="admin-modal admin-modal-lg"
              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-header">
                <h2 className="admin-modal-title">Nahrát přijaté faktury</h2>
              </div>
              <div className="admin-modal-body">
                <div className="mb-4">
                  <input
                    ref={fileInputRef}
                    type="file"
                    multiple
                    accept="application/pdf,image/jpeg,image/png"
                    style={{ display: "none" }}
                    onChange={handleFileSelect}
                  />
                  <button
                    className="admin-btn admin-btn-secondary admin-btn-sm"
                    onClick={() => fileInputRef.current?.click()}
                  >
                    <svg
                      width="16"
                      height="16"
                      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>
                    Vybrat soubory
                  </button>
                  <span
                    style={{
                      marginLeft: "0.75rem",
                      fontSize: "0.8125rem",
                      color: "var(--text-tertiary)",
                    }}
                  >
                    PDF, JPEG, PNG · max 10 MB · max 20 souborů
                  </span>
                </div>

                {uploadFiles.length === 0 && (
                  <div
                    className="admin-empty-state"
                    style={{ padding: "2rem 0" }}
                  >
                    <p style={{ color: "var(--text-tertiary)" }}>
                      Zatím nebyly vybrány žádné soubory.
                    </p>
                  </div>
                )}

                <div className="received-upload-list">
                  {uploadFiles.map((file, idx) => (
                    <div
                      key={`${file.name}-${idx}`}
                      className="received-upload-card"
                    >
                      <div className="received-upload-card-header">
                        <div className="received-upload-file-info">
                          <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>
                          <span className="received-upload-file-name">
                            {file.name}
                          </span>
                          <span className="received-upload-file-size">
                            {Math.round(file.size / 1024)} KB
                          </span>
                        </div>
                        <button
                          className="admin-btn-icon danger"
                          style={{ width: "24px", height: "24px" }}
                          onClick={() => removeUploadFile(idx)}
                        >
                          <svg
                            width="14"
                            height="14"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            strokeWidth="2"
                          >
                            <line x1="18" y1="6" x2="6" y2="18" />
                            <line x1="6" y1="6" x2="18" y2="18" />
                          </svg>
                        </button>
                      </div>
                      <div className="received-upload-card-fields">
                        <FormField
                          label="Dodavatel"
                          error={uploadErrors[idx]?.supplier_name}
                          required
                        >
                          <input
                            type="text"
                            list="supplier-suggestions"
                            className={`admin-form-input${uploadErrors[idx]?.supplier_name ? " has-error" : ""}`}
                            value={uploadMeta[idx]?.supplier_name || ""}
                            onChange={(e) =>
                              updateMeta(idx, "supplier_name", e.target.value)
                            }
                            autoComplete="off"
                          />
                        </FormField>
                        <FormField label="Č. faktury">
                          <input
                            type="text"
                            className="admin-form-input"
                            value={uploadMeta[idx]?.invoice_number || ""}
                            onChange={(e) =>
                              updateMeta(idx, "invoice_number", e.target.value)
                            }
                          />
                        </FormField>
                        <div className="received-upload-row">
                          <FormField
                            label="Částka"
                            error={uploadErrors[idx]?.amount}
                            required
                            style={{ flex: 1 }}
                          >
                            <input
                              type="number"
                              step="0.01"
                              min="0"
                              className={`admin-form-input${uploadErrors[idx]?.amount ? " has-error" : ""}`}
                              value={uploadMeta[idx]?.amount || ""}
                              onChange={(e) =>
                                updateMeta(idx, "amount", e.target.value)
                              }
                            />
                          </FormField>
                          <FormField label="Měna" style={{ width: "90px" }}>
                            <select
                              className="admin-form-select"
                              value={
                                uploadMeta[idx]?.currency || defaultCurrency
                              }
                              onChange={(e) =>
                                updateMeta(idx, "currency", e.target.value)
                              }
                            >
                              {currencyOptions.map((c) => (
                                <option key={c} value={c}>
                                  {c}
                                </option>
                              ))}
                            </select>
                          </FormField>
                          <FormField label="DPH %" style={{ width: "90px" }}>
                            <select
                              className="admin-form-select"
                              value={
                                uploadMeta[idx]?.vat_rate || defaultVatRate
                              }
                              onChange={(e) =>
                                updateMeta(idx, "vat_rate", e.target.value)
                              }
                            >
                              {vatRateOptions.map((r) => (
                                <option key={r} value={String(r)}>
                                  {r}%
                                </option>
                              ))}
                            </select>
                          </FormField>
                        </div>
                        {uploadMeta[idx]?.amount && (
                          <div
                            style={{
                              fontSize: "0.75rem",
                              color: "var(--text-tertiary)",
                              marginTop: "-0.25rem",
                              marginBottom: "0.5rem",
                            }}
                          >
                            DPH:{" "}
                            {formatCurrency(
                              (() => {
                                const a = parseFloat(
                                  uploadMeta[idx].amount || "0",
                                );
                                const r = parseFloat(
                                  uploadMeta[idx].vat_rate || defaultVatRate,
                                );
                                return r > 0
                                  ? Math.round((a - a / (1 + r / 100)) * 100) /
                                      100
                                  : 0;
                              })(),
                              uploadMeta[idx].currency || defaultCurrency,
                            )}
                          </div>
                        )}
                        <div className="received-upload-row">
                          <FormField
                            label="Datum vystavení"
                            style={{ flex: 1 }}
                          >
                            <AdminDatePicker
                              mode="date"
                              value={uploadMeta[idx]?.issue_date || ""}
                              onChange={(val: string) =>
                                updateMeta(idx, "issue_date", val)
                              }
                            />
                          </FormField>
                          <FormField
                            label="Datum splatnosti"
                            style={{ flex: 1 }}
                          >
                            <AdminDatePicker
                              mode="date"
                              value={uploadMeta[idx]?.due_date || ""}
                              onChange={(val: string) =>
                                updateMeta(idx, "due_date", val)
                              }
                            />
                          </FormField>
                        </div>
                        <FormField label="Poznámka">
                          <input
                            type="text"
                            className="admin-form-input"
                            value={uploadMeta[idx]?.notes || ""}
                            onChange={(e) =>
                              updateMeta(idx, "notes", e.target.value)
                            }
                          />
                        </FormField>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
              <div className="admin-modal-footer">
                <button
                  className="admin-btn admin-btn-secondary"
                  onClick={() => !saving && setUploadOpen(false)}
                  disabled={saving}
                >
                  Zrušit
                </button>
                <button
                  className="admin-btn admin-btn-primary"
                  onClick={handleUploadSave}
                  disabled={saving || uploadFiles.length === 0}
                >
                  {saving ? "Nahrávání..." : "Uložit vše"}
                </button>
              </div>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>

      {/* Edit Modal */}
      <AnimatePresence>
        {editOpen && editInvoice && (
          <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={() => !saving && setEditOpen(false)}
            />
            <motion.div
              className="admin-modal"
              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 }}
            >
              {(() => {
                const ro = editInvoice._originalStatus === "paid";
                return (
                  <>
                    <div className="admin-modal-header">
                      <h2 className="admin-modal-title">
                        {ro
                          ? "Detail přijaté faktury"
                          : "Upravit přijatou fakturu"}
                      </h2>
                    </div>
                    <div className="admin-modal-body">
                      <div className="admin-form">
                        <FormField label="Dodavatel" required>
                          <input
                            type="text"
                            list="supplier-suggestions"
                            className="admin-form-input"
                            value={editInvoice.supplier_name}
                            onChange={(e) =>
                              setEditInvoice((prev) =>
                                prev
                                  ? { ...prev, supplier_name: e.target.value }
                                  : null,
                              )
                            }
                            readOnly={ro}
                            autoComplete="off"
                          />
                        </FormField>
                        <FormField label="Č. faktury">
                          <input
                            type="text"
                            className="admin-form-input"
                            value={editInvoice.invoice_number || ""}
                            onChange={(e) =>
                              setEditInvoice((prev) =>
                                prev
                                  ? { ...prev, invoice_number: e.target.value }
                                  : null,
                              )
                            }
                            readOnly={ro}
                          />
                        </FormField>
                        <div className="admin-form-row admin-form-row-3">
                          <FormField label="Částka" required>
                            <input
                              type="number"
                              step="0.01"
                              min="0"
                              className="admin-form-input"
                              value={editInvoice.amount}
                              onChange={(e) =>
                                setEditInvoice((prev) =>
                                  prev
                                    ? { ...prev, amount: e.target.value }
                                    : null,
                                )
                              }
                              readOnly={ro}
                            />
                          </FormField>
                          <FormField label="Měna">
                            <select
                              className="admin-form-select"
                              value={editInvoice.currency}
                              onChange={(e) =>
                                setEditInvoice((prev) =>
                                  prev
                                    ? { ...prev, currency: e.target.value }
                                    : null,
                                )
                              }
                              disabled={ro}
                            >
                              {currencyOptions.map((c) => (
                                <option key={c} value={c}>
                                  {c}
                                </option>
                              ))}
                            </select>
                          </FormField>
                          <FormField label="DPH %">
                            <select
                              className="admin-form-select"
                              value={editInvoice.vat_rate}
                              onChange={(e) =>
                                setEditInvoice((prev) =>
                                  prev
                                    ? { ...prev, vat_rate: e.target.value }
                                    : null,
                                )
                              }
                              disabled={ro}
                            >
                              {vatRateOptions.map((r) => (
                                <option key={r} value={String(r)}>
                                  {r}%
                                </option>
                              ))}
                            </select>
                          </FormField>
                        </div>
                        {editInvoice.amount && (
                          <div
                            style={{
                              fontSize: "0.75rem",
                              color: "var(--text-tertiary)",
                              marginBottom: "0.75rem",
                            }}
                          >
                            DPH:{" "}
                            {formatCurrency(
                              (() => {
                                const a = parseFloat(editInvoice.amount || "0");
                                const r = parseFloat(
                                  editInvoice.vat_rate || defaultVatRate,
                                );
                                return r > 0
                                  ? Math.round((a - a / (1 + r / 100)) * 100) /
                                      100
                                  : 0;
                              })(),
                              editInvoice.currency || defaultCurrency,
                            )}
                          </div>
                        )}
                        <div className="admin-form-row">
                          <FormField label="Datum vystavení">
                            <AdminDatePicker
                              mode="date"
                              value={editInvoice.issue_date || ""}
                              onChange={(val: string) =>
                                setEditInvoice((prev) =>
                                  prev ? { ...prev, issue_date: val } : null,
                                )
                              }
                              disabled={ro}
                            />
                          </FormField>
                          <FormField label="Datum splatnosti">
                            <AdminDatePicker
                              mode="date"
                              value={editInvoice.due_date || ""}
                              onChange={(val: string) =>
                                setEditInvoice((prev) =>
                                  prev ? { ...prev, due_date: val } : null,
                                )
                              }
                              disabled={ro}
                            />
                          </FormField>
                        </div>
                        <FormField label="Stav">
                          <select
                            className="admin-form-select"
                            value={editInvoice.status}
                            onChange={(e) =>
                              setEditInvoice((prev) =>
                                prev
                                  ? { ...prev, status: e.target.value }
                                  : null,
                              )
                            }
                            disabled={ro}
                          >
                            <option value="unpaid">Neuhrazena</option>
                            <option value="paid">Uhrazena</option>
                          </select>
                        </FormField>
                        <FormField label="Poznámka">
                          <textarea
                            className="admin-form-input"
                            rows={3}
                            value={editInvoice.notes || ""}
                            onChange={(e) =>
                              setEditInvoice((prev) =>
                                prev
                                  ? { ...prev, notes: e.target.value }
                                  : null,
                              )
                            }
                            readOnly={ro}
                          />
                        </FormField>
                      </div>
                    </div>
                    <div className="admin-modal-footer">
                      {ro ? (
                        <button
                          className="admin-btn admin-btn-secondary"
                          onClick={() => setEditOpen(false)}
                        >
                          Zavřít
                        </button>
                      ) : (
                        <>
                          <button
                            className="admin-btn admin-btn-secondary"
                            onClick={() => !saving && setEditOpen(false)}
                            disabled={saving}
                          >
                            Zrušit
                          </button>
                          <button
                            className="admin-btn admin-btn-primary"
                            onClick={handleEditSave}
                            disabled={saving}
                          >
                            {saving ? "Ukládání..." : "Uložit"}
                          </button>
                        </>
                      )}
                    </div>
                  </>
                );
              })()}
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>

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

      <datalist id="supplier-suggestions">
        {supplierNames.map((name) => (
          <option key={name} value={name} />
        ))}
      </datalist>
    </>
  );
}