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

const API_BASE = '/api/admin'

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  // Customer selector (create mode)
  const [customers, setCustomers] = useState<Customer[]>([])
  const [customerSearch, setCustomerSearch] = useState('')
  const [showCustomerDropdown, setShowCustomerDropdown] = useState(false)

  // Draft
  const DRAFT_KEY = 'boha_invoice_draft'

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

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

  // Edit items (edit mode)
  const [editingItems, setEditingItems] = useState(false)
  const [editItems, setEditItems] = useState<InvoiceItem[]>([])
  const editKeyCounter = useRef(0)

  // ─── Data loading ───

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

        const results = await Promise.all(promises)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  // ─── Edit mode: PDF export ───
  const handleViewPdf = async (lang = 'cs') => {
    setLangModal(false)
    const newWindow = window.open('', '_blank')
    setPdfLoading(true)
    try {
      const response = await apiFetch(`${API_BASE}/invoices-pdf/${id}?lang=${encodeURIComponent(lang)}`)
      if (!response.ok) {
        newWindow?.close()
        alert.error('Nepodařilo se vygenerovat PDF')
        return
      }
      const html = await response.text()
      if (newWindow) {
        newWindow.document.open()
        newWindow.document.write(html)
        newWindow.document.close()
        newWindow.onload = () => newWindow.print()
      }
    } catch {
      newWindow?.close()
      alert.error('Chyba připojení')
    } finally {
      setPdfLoading(false)
    }
  }

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

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

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

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

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

  const saveEditItems = async () => {
    setSaving(true)
    try {
      const response = await apiFetch(`${API_BASE}/invoices/${id}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          items: editItems.filter(i => i.description.trim()).map((item, i) => ({ ...item, position: i }))
        })
      })
      const result = await response.json()
      if (result.success) {
        alert.success('Položky byly uloženy')
        setEditingItems(false)
        fetchDetail()
      } else {
        alert.error(result.error || 'Nepodařilo se uložit položky')
      }
    } catch {
      alert.error('Chyba připojení')
    } finally {
      setSaving(false)
    }
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  const isDraft = invoice.status === 'issued'
  const isPaid = invoice.status === 'paid'

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

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

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

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

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

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

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

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

      {/* Language selection for PDF */}
      <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(false)} />
            <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={() => handleViewPdf('cs')} className="admin-btn admin-btn-primary">Čeština</button>
                <button type="button" onClick={() => handleViewPdf('en')} className="admin-btn admin-btn-primary">English</button>
              </div>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  )
}