import { useState, useEffect, useCallback } from 'react'
import { useAlert } from '../context/AlertContext'
import { useAuth } from '../context/AuthContext'
import Forbidden from '../components/Forbidden'
import { motion, AnimatePresence } from 'framer-motion'
import ConfirmModal from '../components/ConfirmModal'
import useModalLock from '../hooks/useModalLock'

import { formatKm } from '../utils/formatters'
import apiFetch from '../utils/api'
import FormField from '../components/FormField'
const API_BASE = '/api/admin'

interface Vehicle {
  id: number
  spz: string
  name: string
  brand?: string
  model?: string
  initial_km: number
  current_km: number
  trip_count: number
  is_active: boolean | number
}

interface VehicleForm {
  spz: string
  name: string
  brand: string
  model: string
  initial_km: number
  is_active: boolean
}

export default function Vehicles() {
  const alert = useAlert()
  const { hasPermission } = useAuth()
  const [loading, setLoading] = useState(true)
  const [vehicles, setVehicles] = useState<Vehicle[]>([])

  const [showModal, setShowModal] = useState(false)
  const [editingVehicle, setEditingVehicle] = useState<Vehicle | null>(null)
  const [form, setForm] = useState<VehicleForm>({
    spz: '',
    name: '',
    brand: '',
    model: '',
    initial_km: 0,
    is_active: true
  })

  const [errors, setErrors] = useState<Record<string, string>>({})
  const [deleteConfirm, setDeleteConfirm] = useState<{ show: boolean; vehicle: Vehicle | null }>({ show: false, vehicle: null })

  const fetchData = useCallback(async (showLoading = true) => {
    if (showLoading) setLoading(true)
    try {
      const response = await apiFetch(`${API_BASE}/vehicles`)
      const result = await response.json()
      if (result.success) {
        setVehicles(Array.isArray(result.data) ? result.data : [])
      }
    } catch {
      alert.error('Nepodařilo se načíst data')
    } finally {
      if (showLoading) setLoading(false)
    }
  }, [alert])

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

  useModalLock(showModal)

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

  const openCreateModal = () => {
    setEditingVehicle(null)
    setForm({
      spz: '',
      name: '',
      brand: '',
      model: '',
      initial_km: 0,
      is_active: true
    })
    setErrors({})
    setShowModal(true)
  }

  const openEditModal = (vehicle: Vehicle) => {
    setEditingVehicle(vehicle)
    setForm({
      spz: vehicle.spz,
      name: vehicle.name,
      brand: vehicle.brand || '',
      model: vehicle.model || '',
      initial_km: vehicle.initial_km,
      is_active: Boolean(vehicle.is_active)
    })
    setErrors({})
    setShowModal(true)
  }

  const handleSubmit = async () => {
    const newErrors: Record<string, string> = {}
    if (!form.spz) newErrors.spz = 'Zadejte SPZ'
    if (!form.name) newErrors.name = 'Zadejte název'
    setErrors(newErrors)
    if (Object.keys(newErrors).length > 0) return

    try {
      const url = editingVehicle
        ? `${API_BASE}/vehicles/${editingVehicle.id}`
        : `${API_BASE}/vehicles`
      const method = editingVehicle ? 'PUT' : 'POST'

      const response = await apiFetch(url, {
        method,
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form)
      })

      const result = await response.json()

      if (result.success) {
        setShowModal(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.vehicle) return

    try {
      const response = await apiFetch(`${API_BASE}/vehicles/${deleteConfirm.vehicle.id}`, {
        method: 'DELETE',
      })

      const result = await response.json()

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

  const toggleActive = async (vehicle: Vehicle) => {
    try {
      const response = await apiFetch(`${API_BASE}/vehicles/${vehicle.id}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          spz: vehicle.spz,
          name: vehicle.name,
          brand: vehicle.brand || '',
          model: vehicle.model || '',
          initial_km: vehicle.initial_km,
          is_active: !vehicle.is_active
        })
      })

      const result = await response.json()

      if (result.success) {
        fetchData(false)
        alert.success(vehicle.is_active ? 'Vozidlo bylo deaktivováno' : 'Vozidlo bylo aktivováno')
      } else {
        alert.error(result.error)
      }
    } catch {
      alert.error('Chyba připojení')
    }
  }

  if (loading) {
    return (
      <div className="admin-skeleton" style={{ padding: 0, gap: '1.5rem' }}>
        <div className="admin-skeleton-row" style={{ justifyContent: 'space-between' }}>
          <div>
            <div className="admin-skeleton-line h-8" style={{ width: '200px' }} />
          </div>
          <div className="admin-skeleton-line h-10" style={{ width: '150px', borderRadius: '8px' }} />
        </div>
        <div className="admin-card">
          <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 circle" />
                <div className="flex-1">
                  <div className="admin-skeleton-line w-1/3 mb-2" />
                  <div className="admin-skeleton-line w-1/4" style={{ height: '10px' }} />
                </div>
                <div className="admin-skeleton-line w-1/4" />
              </div>
            ))}
          </div>
        </div>
      </div>
    )
  }

  return (
    <div>
      <motion.div
        className="admin-page-header"
        initial={{ opacity: 0, y: 12 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.25 }}
      >
        <div>
          <h1 className="admin-page-title">Správa vozidel</h1>
        </div>
        <div className="admin-page-actions">
          <button onClick={openCreateModal} className="admin-btn admin-btn-primary">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <line x1="12" y1="5" x2="12" y2="19" />
              <line x1="5" y1="12" x2="19" y2="12" />
            </svg>
            Přidat vozidlo
          </button>
        </div>
      </motion.div>

      <motion.div
        className="admin-card"
        initial={{ opacity: 0, y: 12 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.25, delay: 0.06 }}
      >
        <div className="admin-card-body">
          {vehicles.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">
                  <rect x="1" y="3" width="15" height="13" />
                  <polygon points="16 8 20 8 23 11 23 16 16 16 16 8" />
                  <circle cx="5.5" cy="18.5" r="2.5" />
                  <circle cx="18.5" cy="18.5" r="2.5" />
                </svg>
              </div>
              <p>Zatím nejsou žádná vozidla.</p>
              <button onClick={openCreateModal} className="admin-btn admin-btn-primary">
                Přidat první vozidlo
              </button>
            </div>
          )}
          {vehicles.length > 0 && (
            <div className="admin-table-responsive">
              <table className="admin-table">
                <thead>
                  <tr>
                    <th>SPZ</th>
                    <th>Název</th>
                    <th>Značka / Model</th>
                    <th>Počáteční km</th>
                    <th>Aktuální km</th>
                    <th>Počet jízd</th>
                    <th>Stav</th>
                    <th>Akce</th>
                  </tr>
                </thead>
                <tbody>
                  {vehicles.map((vehicle) => (
                    <tr key={vehicle.id} className={!vehicle.is_active ? 'admin-table-row-inactive' : ''}>
                      <td className="admin-mono fw-500">{vehicle.spz}</td>
                      <td>{vehicle.name}</td>
                      <td>
                        {vehicle.brand || vehicle.model
                          ? `${vehicle.brand || ''} ${vehicle.model || ''}`.trim()
                          : '—'}
                      </td>
                      <td className="admin-mono">{formatKm(vehicle.initial_km)} km</td>
                      <td className="admin-mono fw-500">{formatKm(vehicle.current_km)} km</td>
                      <td className="admin-mono">{vehicle.trip_count}</td>
                      <td>
                        <button
                          onClick={() => toggleActive(vehicle)}
                          className={`admin-badge ${vehicle.is_active ? 'admin-badge-active' : 'admin-badge-inactive'}`}
                        >
                          {vehicle.is_active ? 'Aktivní' : 'Neaktivní'}
                        </button>
                      </td>
                      <td>
                        <div className="admin-table-actions">
                          <button
                            onClick={() => openEditModal(vehicle)}
                            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, vehicle })}
                            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>

      {/* Add/Edit Modal */}
      <AnimatePresence>
        {showModal && (
          <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={() => setShowModal(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 }}
            >
              <div className="admin-modal-header">
                <h2 className="admin-modal-title">
                  {editingVehicle ? 'Upravit vozidlo' : 'Přidat vozidlo'}
                </h2>
              </div>

              <div className="admin-modal-body">
                <div className="admin-form">
                  <div className="admin-form-row">
                    <FormField label="SPZ" error={errors.spz} required>
                      <input
                        type="text"
                        value={form.spz}
                        onChange={(e) => {
                          setForm({ ...form, spz: e.target.value.toUpperCase() })
                          setErrors(prev => ({ ...prev, spz: '' }))
                        }}
                        className="admin-form-input"
                        placeholder="1AB 2345"
                        aria-invalid={!!errors.spz}
                      />
                    </FormField>

                    <FormField label="Název" error={errors.name} required>
                      <input
                        type="text"
                        value={form.name}
                        onChange={(e) => {
                          setForm({ ...form, name: e.target.value })
                          setErrors(prev => ({ ...prev, name: '' }))
                        }}
                        className="admin-form-input"
                        placeholder="Služební #1"
                        aria-invalid={!!errors.name}
                      />
                    </FormField>
                  </div>

                  <div className="admin-form-row">
                    <FormField label="Značka">
                      <input
                        type="text"
                        value={form.brand}
                        onChange={(e) => setForm({ ...form, brand: e.target.value })}
                        className="admin-form-input"
                        placeholder="Škoda"
                      />
                    </FormField>

                    <FormField label="Model">
                      <input
                        type="text"
                        value={form.model}
                        onChange={(e) => setForm({ ...form, model: e.target.value })}
                        className="admin-form-input"
                        placeholder="Octavia Combi"
                      />
                    </FormField>
                  </div>

                  <div className="admin-form-group">
                    <label className="admin-form-label">Počáteční stav km</label>
                    <input
                      type="number"
                      inputMode="numeric"
                      value={form.initial_km}
                      onChange={(e) => setForm({ ...form, initial_km: parseInt(e.target.value) || 0 })}
                      className="admin-form-input"
                      min="0"
                    />
                    <small className="admin-form-hint">
                      Stav tachometru při přidání vozidla
                    </small>
                  </div>

                  <label className="admin-form-checkbox">
                    <input
                      type="checkbox"
                      checked={form.is_active}
                      onChange={(e) => setForm({ ...form, is_active: e.target.checked })}
                    />
                    <span>Vozidlo je aktivní</span>
                  </label>
                </div>
              </div>

              <div className="admin-modal-footer">
                <button
                  type="button"
                  onClick={() => setShowModal(false)}
                  className="admin-btn admin-btn-secondary"
                >
                  Zrušit
                </button>
                <button
                  type="button"
                  onClick={handleSubmit}
                  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, vehicle: null })}
        onConfirm={handleDelete}
        title="Smazat vozidlo"
        message={deleteConfirm.vehicle ? `Opravdu chcete smazat vozidlo ${deleteConfirm.vehicle.spz} - ${deleteConfirm.vehicle.name}?` : ''}
        confirmText="Smazat"
        confirmVariant="danger"
      />
    </div>
  )
}