import { useState } from "react";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { useAlert } from "../context/AlertContext";
import { useAuth } from "../context/AuthContext";
import Forbidden from "../components/Forbidden";
import { Skeleton } from "boneyard-js/react";
import VehiclesFixture from "../fixtures/VehiclesFixture";
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";
import { vehicleListOptions } from "../lib/queries/vehicles";

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 queryClient = useQueryClient();

  const { data: vehicles = [], isPending } = useQuery(vehicleListOptions());

  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 });

  useModalLock(showModal);

  if (!hasPermission("vehicles.manage")) 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);
        queryClient.invalidateQueries({ queryKey: ["vehicles"] });
        queryClient.invalidateQueries({ queryKey: ["trips"] });
        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 });
        queryClient.invalidateQueries({ queryKey: ["vehicles"] });
        queryClient.invalidateQueries({ queryKey: ["trips"] });
        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({ is_active: !vehicle.is_active }),
      });

      const result = await response.json();

      if (result.success) {
        queryClient.invalidateQueries({ queryKey: ["vehicles"] });
        queryClient.invalidateQueries({ queryKey: ["trips"] });
        alert.success(
          vehicle.is_active
            ? "Vozidlo bylo deaktivováno"
            : "Vozidlo bylo aktivováno",
        );
      } else {
        alert.error(result.error);
      }
    } catch {
      alert.error("Chyba připojení");
    }
  };

  return (
    <Skeleton name="vehicles" loading={isPending} fixture={<VehiclesFixture />}>
      <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>
    </Skeleton>
  );
}