import { useState, useEffect, useCallback, useRef } from 'react'
import DOMPurify from 'dompurify'
import { useAlert } from '../context/AlertContext'
import { useAuth } from '../context/AuthContext'
import { Link } from 'react-router-dom'
import Forbidden from '../components/Forbidden'
import { motion, AnimatePresence } from 'framer-motion'
import ConfirmModal from '../components/ConfirmModal'

import AdminDatePicker from '../components/AdminDatePicker'
import FormField from '../components/FormField'
import useModalLock from '../hooks/useModalLock'
import { formatDate } from '../utils/attendanceHelpers'
import { formatKm } from '../utils/formatters'
import apiFetch from '../utils/api'
const API_BASE = '/api/admin'

export default function TripsAdmin() {
  const alert = useAlert()
  const { hasPermission } = useAuth()
  const [loading, setLoading] = useState(true)
  const [dateFrom, setDateFrom] = useState(() => {
    const now = new Date()
    return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-01`
  })
  const [dateTo, setDateTo] = useState(() => {
    const now = new Date()
    const lastDay = new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate()
    return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(lastDay).padStart(2, '0')}`
  })
  const [filterVehicleId, setFilterVehicleId] = useState('')
  const [filterUserId, setFilterUserId] = useState('')
  const [data, setData] = useState({
    trips: [],
    vehicles: [],
    users: [],
    totals: { total: 0, business: 0, count: 0 }
  })
  const [printData, setPrintData] = useState(null)
  const printRef = useRef(null)

  const [showEditModal, setShowEditModal] = useState(false)
  const [editingTrip, setEditingTrip] = useState(null)
  const [editForm, setEditForm] = useState({
    vehicle_id: '',
    trip_date: '',
    start_km: '',
    end_km: '',
    route_from: '',
    route_to: '',
    is_business: 1,
    notes: ''
  })

  const [deleteConfirm, setDeleteConfirm] = useState({ show: false, trip: null })

  const fetchData = useCallback(async (showLoading = true) => {
    if (showLoading) setLoading(true)
    try {
      let url = `${API_BASE}/trips.php?action=admin&date_from=${dateFrom}&date_to=${dateTo}`
      if (filterVehicleId) url += `&vehicle_id=${filterVehicleId}`
      if (filterUserId) url += `&user_id=${filterUserId}`

      const response = await apiFetch(url)
      const result = await response.json()
      if (result.success) {
        setData(result.data)
      }
    } catch {
      alert.error('Nepodařilo se načíst data')
    } finally {
      if (showLoading) setLoading(false)
    }
  }, [dateFrom, dateTo, filterVehicleId, filterUserId, alert])

  useEffect(() => {
    fetchData()
  }, [fetchData])

  useModalLock(showEditModal)

  if (!hasPermission('trips.admin')) return <Forbidden />

  const openEditModal = (trip) => {
    setEditingTrip(trip)
    setEditForm({
      vehicle_id: trip.vehicle_id,
      trip_date: trip.trip_date,
      start_km: trip.start_km,
      end_km: trip.end_km,
      route_from: trip.route_from,
      route_to: trip.route_to,
      is_business: trip.is_business,
      notes: trip.notes || ''
    })
    setShowEditModal(true)
  }

  const handleEditSubmit = async () => {
    if (parseInt(editForm.end_km) <= parseInt(editForm.start_km)) {
      alert.error('Konečný stav km musí být větší než počáteční')
      return
    }

    try {
      const response = await apiFetch(`${API_BASE}/trips.php?id=${editingTrip.id}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        
        body: JSON.stringify(editForm)
      })

      const result = await response.json()

      if (result.success) {
        setShowEditModal(false)
        await fetchData(false)
        await new Promise(resolve => setTimeout(resolve, 300))
        alert.success(result.message)
      } else {
        alert.error(result.error)
      }
    } catch {
      alert.error('Chyba připojení')
    }
  }

  const handleDelete = async () => {
    if (!deleteConfirm.trip) return

    try {
      const response = await apiFetch(`${API_BASE}/trips.php?id=${deleteConfirm.trip.id}`, {
        method: 'DELETE',
        
      })

      const result = await response.json()

      if (result.success) {
        setDeleteConfirm({ show: false, trip: null })
        await fetchData(false)
        alert.success(result.message)
      } else {
        alert.error(result.error)
      }
    } catch {
      alert.error('Chyba připojení')
    }
  }

  const handlePrint = async () => {
    try {
      let url = `${API_BASE}/trips.php?action=print&date_from=${dateFrom}&date_to=${dateTo}`
      if (filterVehicleId) url += `&vehicle_id=${filterVehicleId}`
      if (filterUserId) url += `&user_id=${filterUserId}`

      const response = await apiFetch(url)
      const result = await response.json()
      if (result.success) {
        setPrintData(result.data)
        setTimeout(() => {
          if (printRef.current) {
            const printWindow = window.open('', '_blank')
            printWindow.document.write(`
              <!DOCTYPE html>
              <html lang="cs">
              <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>Kniha jízd - ${result.data.period_name}</title>
                <style>
                  * { margin: 0; padding: 0; box-sizing: border-box; }
                  body {
                    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                    font-size: 10px;
                    line-height: 1.4;
                    color: #000;
                    background: #fff;
                    padding: 10mm;
                  }
                  .print-header {
                    display: flex;
                    justify-content: space-between;
                    align-items: flex-start;
                    margin-bottom: 15px;
                    padding-bottom: 10px;
                    border-bottom: 2px solid #333;
                  }
                  .print-header-left {
                    display: flex;
                    align-items: center;
                    gap: 12px;
                  }
                  .print-logo {
                    height: 40px;
                    width: auto;
                  }
                  .print-header-text { text-align: left; }
                  .print-header-right { text-align: right; }
                  .print-header h1 { font-size: 18px; font-weight: 700; margin-bottom: 3px; }
                  .print-header .company { font-size: 11px; color: #666; }
                  .print-header .period { font-size: 13px; font-weight: 600; color: #333; margin-bottom: 2px; }
                  .print-header .filters { font-size: 10px; color: #666; }
                  .print-header .generated { font-size: 9px; color: #888; margin-top: 5px; }
                  .summary {
                    display: flex;
                    justify-content: space-around;
                    margin-bottom: 15px;
                    padding: 10px;
                    background: #f5f5f5;
                    border: 1px solid #ddd;
                  }
                  .summary-item { text-align: center; }
                  .summary-value { font-size: 14px; font-weight: 700; }
                  .summary-label { font-size: 9px; color: #666; }
                  table { width: 100%; border-collapse: collapse; margin-bottom: 15px; }
                  th, td { border: 1px solid #333; padding: 4px 6px; text-align: left; }
                  th { background: #333; color: #fff; font-weight: 600; font-size: 9px; text-transform: uppercase; }
                  td { font-size: 9px; }
                  tr:nth-child(even) { background: #f9f9f9; }
                  .text-center { text-align: center; }
                  .text-right { text-align: right; }
                  tfoot td { background: #eee; font-weight: 600; }
                  .badge {
                    display: inline-block;
                    padding: 1px 4px;
                    border-radius: 2px;
                    font-size: 8px;
                    font-weight: 500;
                  }
                  .badge-success { background: #dcfce7; color: #16a34a; }
                  .badge-warning { background: #fef3c7; color: #d97706; }
                  @media print {
                    body { padding: 5mm; }
                    @page { size: A4 landscape; margin: 5mm; }
                    thead { display: table-header-group; }
                  }
                </style>
              </head>
              <body>
                ${DOMPurify.sanitize(printRef.current.innerHTML)}
              </body>
              </html>
            `)
            printWindow.document.close()
            printWindow.onload = () => {
              printWindow.print()
            }
          }
        }, 100)
      }
    } catch {
      alert.error('Nepodařilo se připravit tisk')
    }
  }

  const calculateDistance = () => {
    const start = parseInt(editForm.start_km) || 0
    const end = parseInt(editForm.end_km) || 0
    return end > start ? end - start : 0
  }

  const { trips, vehicles, users, totals } = data

  return (
    <div>
      <motion.div
        className="admin-page-header"
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.4 }}
      >
        <div>
          <h1 className="admin-page-title">Správa knihy jízd</h1>
        </div>
        <div className="admin-page-actions">
          {trips.length > 0 && (
            <button
              onClick={handlePrint}
              className="admin-btn admin-btn-secondary"
              title="Tisk knihy jízd"
            >
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{ marginRight: '0.5rem' }}>
                <polyline points="6 9 6 2 18 2 18 9" />
                <path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2" />
                <rect x="6" y="14" width="12" height="8" />
              </svg>
              Tisk
            </button>
          )}
          <Link to="/vehicles" className="admin-btn admin-btn-secondary">
            Vozidla
          </Link>
        </div>
      </motion.div>

      {/* Filters */}
      <motion.div
        className="admin-card"
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.4, delay: 0.1 }}
      >
        <div className="admin-card-body">
          <div className="admin-form-row admin-form-row-4">
            <FormField label="Od" style={{ marginBottom: 0 }}>
              <AdminDatePicker
                mode="date"
                value={dateFrom}
                onChange={(val) => setDateFrom(val)}
              />
            </FormField>
            <FormField label="Do" style={{ marginBottom: 0 }}>
              <AdminDatePicker
                mode="date"
                value={dateTo}
                onChange={(val) => setDateTo(val)}
              />
            </FormField>
            <FormField label="Vozidlo" style={{ marginBottom: 0 }}>
              <select
                value={filterVehicleId}
                onChange={(e) => setFilterVehicleId(e.target.value)}
                className="admin-form-select"
              >
                <option value="">Všechna vozidla</option>
                {vehicles.map((v) => (
                  <option key={v.id} value={v.id}>
                    {v.spz} - {v.name}
                  </option>
                ))}
              </select>
            </FormField>
            <FormField label="Řidič" style={{ marginBottom: 0 }}>
              <select
                value={filterUserId}
                onChange={(e) => setFilterUserId(e.target.value)}
                className="admin-form-select"
              >
                <option value="">Všichni řidiči</option>
                {users.map((u) => (
                  <option key={u.id} value={u.id}>
                    {u.name}
                  </option>
                ))}
              </select>
            </FormField>
          </div>
        </div>
      </motion.div>

      <motion.div
        className="admin-grid admin-grid-3"
        style={{ marginTop: '1.5rem' }}
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.4, delay: 0.15 }}
      >
        <div className="admin-stat-card info">
          <div className="admin-stat-icon info">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <line x1="12" y1="20" x2="12" y2="10" />
              <line x1="18" y1="20" x2="18" y2="4" />
              <line x1="6" y1="20" x2="6" y2="16" />
            </svg>
          </div>
          <div className="admin-stat-content">
            <span className="admin-stat-value">{totals.count}</span>
            <span className="admin-stat-label">Počet jízd</span>
          </div>
        </div>
        <div className="admin-stat-card">
          <div className="admin-stat-icon">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
            </svg>
          </div>
          <div className="admin-stat-content">
            <span className="admin-stat-value">{formatKm(totals.total)} km</span>
            <span className="admin-stat-label">Celkem naježděno</span>
          </div>
        </div>
        <div className="admin-stat-card success">
          <div className="admin-stat-icon success">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <rect x="1" y="3" width="15" height="13" rx="2" ry="2" />
              <path d="M16 8h2a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-1" />
              <circle cx="5.5" cy="18" r="2" />
              <circle cx="18.5" cy="18" r="2" />
              <path d="M8 18h8" />
            </svg>
          </div>
          <div className="admin-stat-content">
            <span className="admin-stat-value">{formatKm(totals.business)} km</span>
            <span className="admin-stat-label">Služební km</span>
          </div>
        </div>
      </motion.div>

      {/* Trips Table */}
      <motion.div
        className="admin-card"
        style={{ marginTop: '1.5rem' }}
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.4, delay: 0.2 }}
      >
        <div className="admin-card-body">
          {loading && (
            <div className="admin-skeleton" style={{ gap: '1.25rem' }}>
              {[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/3" />
                  <div className="admin-skeleton-line w-1/4" />
                </div>
              ))}
            </div>
          )}
          {!loading && trips.length === 0 && (
            <div className="admin-empty-state">
              <p>Žádné záznamy jízd pro vybrané období.</p>
            </div>
          )}
          {!loading && trips.length > 0 && (
            <div className="admin-table-responsive">
              <table className="admin-table">
                <thead>
                  <tr>
                    <th>Datum</th>
                    <th>Řidič</th>
                    <th>Vozidlo</th>
                    <th>Trasa</th>
                    <th>Stav km</th>
                    <th>Vzdálenost</th>
                    <th>Typ</th>
                    <th>Akce</th>
                  </tr>
                </thead>
                <tbody>
                  {trips.map((trip) => (
                    <tr key={trip.id}>
                      <td className="admin-mono">{formatDate(trip.trip_date)}</td>
                      <td>{trip.driver_name}</td>
                      <td>
                        <span className="admin-badge">{trip.spz}</span>
                      </td>
                      <td>
                        <span style={{ whiteSpace: 'nowrap' }}>
                          {trip.route_from} → {trip.route_to}
                        </span>
                      </td>
                      <td className="admin-mono">
                        <span style={{ whiteSpace: 'nowrap' }}>
                          {formatKm(trip.start_km)} - {formatKm(trip.end_km)}
                        </span>
                      </td>
                      <td className="admin-mono"><strong>{formatKm(trip.distance)} km</strong></td>
                      <td>
                        <span className={`admin-badge ${trip.is_business ? 'admin-badge-success' : 'admin-badge-warning'}`}>
                          {trip.is_business ? 'Služební' : 'Soukromá'}
                        </span>
                      </td>
                      <td>
                        <div className="admin-table-actions">
                          <button
                            onClick={() => openEditModal(trip)}
                            className="admin-btn-icon"
                            title="Upravit"
                            aria-label="Upravit"
                          >
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                              <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>
                          <button
                            onClick={() => setDeleteConfirm({ show: true, trip })}
                            className="admin-btn-icon danger"
                            title="Smazat"
                            aria-label="Smazat"
                          >
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                              <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>

      {/* Edit Modal */}
      <AnimatePresence>
        {showEditModal && editingTrip && (
          <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={() => setShowEditModal(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">Upravit jízdu</h2>
                <p style={{ color: 'var(--text-secondary)', marginTop: '0.25rem' }}>
                  {editingTrip.driver_name}
                </p>
              </div>

              <div className="admin-modal-body">
                <div className="admin-form">
                  <div className="admin-form-row">
                    <FormField label="Vozidlo">
                      <select
                        value={editForm.vehicle_id}
                        onChange={(e) => setEditForm({ ...editForm, vehicle_id: e.target.value })}
                        className="admin-form-select"
                      >
                        {vehicles.map((v) => (
                          <option key={v.id} value={v.id}>
                            {v.spz} - {v.name}
                          </option>
                        ))}
                      </select>
                    </FormField>

                    <FormField label="Datum jízdy">
                      <AdminDatePicker
                        mode="date"
                        value={editForm.trip_date}
                        onChange={(val) => setEditForm({ ...editForm, trip_date: val })}
                      />
                    </FormField>
                  </div>

                  <div className="admin-form-row">
                    <FormField label="Počáteční stav km">
                      <input
                        type="number"
                        inputMode="numeric"
                        value={editForm.start_km}
                        onChange={(e) => setEditForm({ ...editForm, start_km: e.target.value })}
                        className="admin-form-input"
                        min="0"
                      />
                    </FormField>

                    <FormField label="Konečný stav km">
                      <input
                        type="number"
                        inputMode="numeric"
                        value={editForm.end_km}
                        onChange={(e) => setEditForm({ ...editForm, end_km: e.target.value })}
                        className="admin-form-input"
                        min="0"
                      />
                    </FormField>

                    <FormField label="Vzdálenost">
                      <input
                        type="text"
                        value={`${formatKm(calculateDistance())} km`}
                        className="admin-form-input"
                        readOnly
                        disabled
                      />
                    </FormField>
                  </div>

                  <div className="admin-form-row">
                    <FormField label="Místo odjezdu">
                      <input
                        type="text"
                        value={editForm.route_from}
                        onChange={(e) => setEditForm({ ...editForm, route_from: e.target.value })}
                        className="admin-form-input"
                      />
                    </FormField>

                    <FormField label="Místo příjezdu">
                      <input
                        type="text"
                        value={editForm.route_to}
                        onChange={(e) => setEditForm({ ...editForm, route_to: e.target.value })}
                        className="admin-form-input"
                      />
                    </FormField>
                  </div>

                  <FormField label="Typ jízdy">
                    <select
                      value={editForm.is_business}
                      onChange={(e) => setEditForm({ ...editForm, is_business: parseInt(e.target.value) })}
                      className="admin-form-select"
                    >
                      <option value={1}>Služební</option>
                      <option value={0}>Soukromá</option>
                    </select>
                  </FormField>

                  <FormField label="Poznámky">
                    <textarea
                      value={editForm.notes}
                      onChange={(e) => setEditForm({ ...editForm, notes: e.target.value })}
                      className="admin-form-textarea"
                      rows={2}
                    />
                  </FormField>
                </div>
              </div>

              <div className="admin-modal-footer">
                <button
                  type="button"
                  onClick={() => setShowEditModal(false)}
                  className="admin-btn admin-btn-secondary"
                >
                  Zrušit
                </button>
                <button
                  type="button"
                  onClick={handleEditSubmit}
                  className="admin-btn admin-btn-primary"
                >
                  Uložit
                </button>
              </div>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>

      {/* Delete Confirmation */}
      <ConfirmModal
        isOpen={deleteConfirm.show}
        onClose={() => setDeleteConfirm({ show: false, trip: null })}
        onConfirm={handleDelete}
        title="Smazat záznam"
        message={deleteConfirm.trip ? `Opravdu chcete smazat záznam jízdy z ${formatDate(deleteConfirm.trip.trip_date)}?` : ''}
        confirmText="Smazat"
        confirmVariant="danger"
      />

      {/* Hidden Print Content */}
      {printData && (
        <div ref={printRef} style={{ display: 'none' }}>
          <div className="print-header">
            <div className="print-header-left">
              <img src="/images/logo-light.png" alt="BOHA" className="print-logo" />
              <div className="print-header-text">
                <h1>KNIHA JÍZD</h1>
                <div className="company">BOHA Automation s.r.o.</div>
              </div>
            </div>
            <div className="print-header-right">
              <div className="period">{printData.period_name}</div>
              {printData.selected_vehicle_name && <div className="filters">Vozidlo: {printData.selected_vehicle_name}</div>}
              {printData.selected_user_name && <div className="filters">Řidič: {printData.selected_user_name}</div>}
              <div className="generated">Vygenerováno: {new Date().toLocaleString('cs-CZ')}</div>
            </div>
          </div>

          <div className="summary">
            <div className="summary-item">
              <div className="summary-value">{printData.totals.count}</div>
              <div className="summary-label">Počet jízd</div>
            </div>
            <div className="summary-item">
              <div className="summary-value">{formatKm(printData.totals.total)} km</div>
              <div className="summary-label">Celkem</div>
            </div>
            <div className="summary-item">
              <div className="summary-value">{formatKm(printData.totals.business)} km</div>
              <div className="summary-label">Služební</div>
            </div>
            <div className="summary-item">
              <div className="summary-value">{formatKm(printData.totals.private)} km</div>
              <div className="summary-label">Soukromé</div>
            </div>
          </div>

          <table>
            <thead>
              <tr>
                <th style={{ width: '70px' }}>Datum</th>
                <th style={{ width: '80px' }}>Řidič</th>
                <th style={{ width: '70px' }}>Vozidlo</th>
                <th>Trasa</th>
                <th style={{ width: '70px' }} className="text-right">Stav km</th>
                <th style={{ width: '60px' }} className="text-right">Vzdálenost</th>
                <th style={{ width: '55px' }} className="text-center">Typ</th>
                <th>Poznámka</th>
              </tr>
            </thead>
            <tbody>
              {printData.trips.map((trip) => (
                <tr key={trip.id}>
                  <td>{formatDate(trip.trip_date)}</td>
                  <td>{trip.driver_name}</td>
                  <td>{trip.spz}</td>
                  <td>{trip.route_from} → {trip.route_to}</td>
                  <td className="text-right">{formatKm(trip.start_km)} - {formatKm(trip.end_km)}</td>
                  <td className="text-right"><strong>{formatKm(trip.distance)} km</strong></td>
                  <td className="text-center">
                    <span className={`badge ${trip.is_business ? 'badge-success' : 'badge-warning'}`}>
                      {trip.is_business ? 'Služební' : 'Soukromá'}
                    </span>
                  </td>
                  <td>{trip.notes || ''}</td>
                </tr>
              ))}
            </tbody>
            <tfoot>
              <tr>
                <td colSpan={5} className="text-right">Celkem:</td>
                <td className="text-right"><strong>{formatKm(printData.totals.total)} km</strong></td>
                <td colSpan={2}></td>
              </tr>
            </tfoot>
          </table>

          {printData.trips.length === 0 && (
            <p style={{ textAlign: 'center', padding: '20px' }}>Za vybrané období nejsou žádné záznamy.</p>
          )}
        </div>
      )}
    </div>
  )
}