import { useState, useEffect, useCallback } from "react";
import { useAlert } from "../context/AlertContext";
import { useAuth } from "../context/AuthContext";
import { motion } from "framer-motion";
import AdminDatePicker from "../components/AdminDatePicker";
import Forbidden from "../components/Forbidden";
import { formatDate } from "../utils/attendanceHelpers";
import { formatKm } from "../utils/formatters";
import FormField from "../components/FormField";
import apiFetch from "../utils/api";

const API_BASE = "/api/admin";

interface Vehicle {
  id: number | string;
  spz: string;
  name: string;
}

interface Trip {
  id: number;
  trip_date: string;
  spz: string;
  driver_name: string;
  route_from: string;
  route_to: string;
  start_km: number;
  end_km: number;
  distance: number;
  is_business: number | boolean;
  notes?: string;
}

export default function TripsHistory() {
  const alert = useAlert();
  const { user, hasPermission } = useAuth();
  const [loading, setLoading] = useState(true);
  const [month, setMonth] = useState(() => {
    const now = new Date();
    return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}`;
  });
  const [vehicleId, setVehicleId] = useState("");
  const [trips, setTrips] = useState<Trip[]>([]);
  const [vehicles, setVehicles] = useState<Vehicle[]>([]);

  const totals = trips.reduce(
    (acc, t) => ({
      total: acc.total + (t.distance || 0),
      business: acc.business + (t.is_business ? t.distance || 0 : 0),
      count: acc.count + 1,
    }),
    { total: 0, business: 0, count: 0 },
  );

  const fetchData = useCallback(async () => {
    setLoading(true);
    try {
      const params = new URLSearchParams({ month });
      if (user?.id) params.set("user_id", String(user.id));
      if (vehicleId) params.set("vehicle_id", vehicleId);

      const [tripsRes, vehiclesRes] = await Promise.all([
        apiFetch(`${API_BASE}/trips?${params}`),
        apiFetch(`${API_BASE}/vehicles`),
      ]);
      if (tripsRes.status === 401) return;
      const tripsResult = await tripsRes.json();
      const vehiclesResult = await vehiclesRes.json();
      if (tripsResult.success) {
        const raw = Array.isArray(tripsResult.data)
          ? tripsResult.data
          : tripsResult.data?.items || [];
        setTrips(
          raw.map((t: Record<string, unknown>) => ({
            ...t,
            spz: (t.vehicles as Record<string, string>)?.spz || "",
            driver_name: t.users
              ? `${(t.users as Record<string, string>).first_name || ""} ${(t.users as Record<string, string>).last_name || ""}`.trim()
              : "",
            distance:
              ((t.end_km as number) || 0) - ((t.start_km as number) || 0),
          })),
        );
      }
      if (vehiclesResult.success) {
        setVehicles(
          Array.isArray(vehiclesResult.data) ? vehiclesResult.data : [],
        );
      }
    } catch {
      alert.error("Nepodařilo se načíst data");
    } finally {
      setLoading(false);
    }
  }, [month, vehicleId, alert, user?.id]);

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

  if (!hasPermission("trips.history")) return <Forbidden />;

  const getMonthName = (monthStr: string): string => {
    const [yearStr, monthNum] = monthStr.split("-");
    const date = new Date(parseInt(yearStr), parseInt(monthNum) - 1);
    return date.toLocaleDateString("cs-CZ", { month: "long", year: "numeric" });
  };

  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">Historie jízd</h1>
          <p className="admin-page-subtitle">{getMonthName(month)}</p>
        </div>
      </motion.div>

      {/* Filters */}
      <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">
          <div className="admin-form-row">
            <FormField label="Měsíc">
              <AdminDatePicker
                mode="month"
                value={month}
                onChange={(val: string) => setMonth(val)}
              />
            </FormField>
            <FormField label="Vozidlo">
              <select
                value={vehicleId}
                onChange={(e) => setVehicleId(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>
          </div>
        </div>
      </motion.div>

      <motion.div
        className="admin-grid admin-grid-3 mt-6"
        initial={{ opacity: 0, y: 12 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.25, delay: 0.08 }}
      >
        <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 mt-6"
        initial={{ opacity: 0, y: 12 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.25, delay: 0.12 }}
      >
        <div className="admin-card-body">
          {loading && (
            <div className="admin-skeleton gap-5">
              {[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>Vozidlo</th>
                    <th>Řidič</th>
                    <th>Trasa</th>
                    <th>Stav km</th>
                    <th>Vzdálenost</th>
                    <th>Typ</th>
                    <th>Poznámka</th>
                  </tr>
                </thead>
                <tbody>
                  {trips.map((trip) => (
                    <tr key={trip.id}>
                      <td className="admin-mono">
                        {formatDate(trip.trip_date)}
                      </td>
                      <td>
                        <span className="admin-badge">{trip.spz}</span>
                      </td>
                      <td style={{ color: "var(--text-secondary)" }}>
                        {trip.driver_name}
                      </td>
                      <td>
                        <span style={{ whiteSpace: "nowrap" }}>
                          {trip.route_from} &rarr; {trip.route_to}
                        </span>
                      </td>
                      <td className="admin-mono">
                        <span
                          style={{
                            whiteSpace: "nowrap",
                            color: "var(--text-secondary)",
                          }}
                        >
                          {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
                        style={{
                          color: "var(--text-secondary)",
                          maxWidth: "200px",
                        }}
                      >
                        {trip.notes || "—"}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </div>
      </motion.div>
    </div>
  );
}