"use client";
import { useEffect, useState, type ReactNode } from "react";
import DashboardLayout from "@/components/DashboardLayout";
import ScooterCard, { type Scooter } from "@/components/scooters/ScooterCard";
import VehicleDetailsModal from "@/components/scooters/VehicleDetailsModal";
import { apiFetch, formatApiMsg } from "@/lib/api";

/** Summary counts from provider/vehicles. */
export interface VehiclesSummary {
  total: number;
  active: number;
  maintenance: number;
  in_ride: number;
  inactive: number;
  // NOTE: out_of_service is a valid filter slug but has NO count in summary —
  // we handle it gracefully by defaulting to 0 / omitting the count chip.
}

/** `data` payload of the provider/vehicles endpoint. */
export interface VehiclesData {
  summary: VehiclesSummary;
  vehicles: Scooter[];
  // NOTE: the API sample has no pagination object. We handle it defensively:
  // if present, pagination controls are shown; without it, all rows render.
  pagination?: {
    current_page: number;
    last_page: number;
    per_page: number;
    total: number;
  };
}

/** Maps each filter chip label to the API `status` query param value.
 *  "all" uses an empty string → param is omitted from the URL. */
const FILTER_CHIPS: { label: string; slug: string }[] = [
  { label: "الكل", slug: "" },
  { label: "متاح", slug: "active" },
  { label: "في رحلة", slug: "in_ride" },
  { label: "صيانة", slug: "maintenance" },
  { label: "متوقف", slug: "inactive" },
  { label: "خارج الخدمة", slug: "out_of_service" },
];

const VEHICLE_SKELETON_KEYS = [
  "vehicle-skeleton-1",
  "vehicle-skeleton-2",
  "vehicle-skeleton-3",
  "vehicle-skeleton-4",
  "vehicle-skeleton-5",
  "vehicle-skeleton-6",
] as const;

/** Skeleton grid shown while vehicles are loading. */
function VehiclesSkeleton() {
  return (
    <div className="grid grid-cols-3 gap-5">
      {VEHICLE_SKELETON_KEYS.map((skeletonKey) => (
        <div
          key={skeletonKey}
          className="bg-[#1E2128] rounded-2xl p-4 mx-5 animate-pulse"
        >
          <div className="flex items-center justify-between mb-3">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 bg-white/5 rounded-xl" />
              <div>
                <div className="h-4 w-20 bg-white/10 rounded mb-1" />
                <div className="h-3 w-14 bg-white/5 rounded" />
              </div>
            </div>
            <div className="h-5 w-16 bg-white/5 rounded-full" />
          </div>
          <div className="mb-3">
            <div className="flex items-center justify-between mb-1">
              <div className="h-3 w-10 bg-white/5 rounded" />
              <div className="h-3 w-12 bg-white/5 rounded" />
            </div>
            <div className="h-1.5 bg-white/5 rounded-full" />
          </div>
          <div className="flex items-center justify-between mb-3">
            <div className="h-3 w-24 bg-white/10 rounded" />
            <div className="h-3 w-16 bg-white/5 rounded" />
          </div>
          <div className="h-3 w-32 bg-white/5 rounded" />
        </div>
      ))}
    </div>
  );
}

function renderVehiclesContent({
  loading,
  error,
  data,
  onSelectVehicle,
}: {
  loading: boolean;
  error: string;
  data: VehiclesData | null;
  onSelectVehicle: (id: number | string) => void;
}): ReactNode {
  if (loading) {
    return <VehiclesSkeleton />;
  }

  if (error) {
    return (
      <div className="bg-red-500/10 border border-red-500/30 rounded-xl p-8 text-center">
        <i className="ri-error-warning-line text-red-400 text-3xl mb-3 block" />
        <p className="text-red-400 text-sm">{error}</p>
      </div>
    );
  }

  if (!data || data.vehicles.length === 0) {
    return (
      <div className="bg-[#1E2128] rounded-2xl p-12 text-center">
        <i className="ri-e-bike-line text-gray-600 text-5xl mb-4 block" />
        <p className="text-gray-400 text-sm">لا توجد مركبات تطابق هذا الفلتر</p>
      </div>
    );
  }

  return (
    <div className="grid grid-cols-3 gap-5">
      {data.vehicles.map((s) => (
        <ScooterCard key={s.id} scooter={s} onClick={() => onSelectVehicle(s.id)} />
      ))}
    </div>
  );
}

export default function ScootersPage() {
  // Active filter slug ("" = all).
  const [activeSlug, setActiveSlug] = useState("");
  const [data, setData] = useState<VehiclesData | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [selectedVehicleId, setSelectedVehicleId] = useState<number | string | null>(null);

  // Refetch whenever the status filter changes.
  useEffect(() => {
    let active = true;
    setLoading(true);
    setError("");

    // Query param `status` is omitted for "all" (empty slug).
    const url = activeSlug
      ? `/provider/vehicles?status=${activeSlug}`
      : "/provider/vehicles";

    apiFetch<VehiclesData>(url, {
      method: "GET",
      successCase: (res) => {
        if (active && res.data) setData(res.data);
      },
      errorCase: (res) => {
        if (active)
          setError(
            formatApiMsg(res.msg) || "تعذّر تحميل المركبات، حاول مرة أخرى",
          );
      },
    }).finally(() => {
      if (active) setLoading(false);
    });

    return () => {
      active = false;
    };
  }, [activeSlug]);

  // Summary count for each chip (0 for out_of_service which has no count).
  const summaryCount = (slug: string): number | null => {
    if (!data?.summary) return null;
    if (slug === "") return data.summary.total;
    if (slug === "active") return data.summary.active;
    if (slug === "in_ride") return data.summary.in_ride;
    if (slug === "maintenance") return data.summary.maintenance;
    if (slug === "inactive") return data.summary.inactive;
    return null; // out_of_service — no count in summary
  };

  const totalLabel = data ? `مركباتي (${data.summary.total})` : "مركباتي";

  return (
    <DashboardLayout title={totalLabel} subtitle="إدارة ومتابعة مركباتك">
      {/* ── Filter chips (right, RTL) ──────────────────────────────── */}
      <div className="flex items-center gap-2 flex-wrap justify-end mb-6">
        {FILTER_CHIPS.map(({ label, slug }) => {
          const count = summaryCount(slug);
          const isActive = activeSlug === slug;
          return (
            <button
              key={slug}
              onClick={() => setActiveSlug(slug)}
              disabled={loading}
              className={`px-4 py-2 rounded-xl text-sm font-medium cursor-pointer whitespace-nowrap transition-all disabled:cursor-not-allowed ${
                isActive
                  ? "bg-[#FCD704] text-[#13151A]"
                  : "bg-[#1E2128] text-gray-400 hover:text-white"
              }`}
            >
              {label}
              {count !== null && (
                <span
                  className={`mr-1.5 text-xs font-bold ${isActive ? "text-[#13151A]/60" : "text-gray-500"}`}
                >
                  {count}
                </span>
              )}
            </button>
          );
        })}
      </div>

      {/* ── Content area ─────────────────────────────────────────────── */}
      {renderVehiclesContent({
        loading,
        error,
        data,
        onSelectVehicle: setSelectedVehicleId,
      })}

      <VehicleDetailsModal
        isOpen={!!selectedVehicleId}
        onClose={() => setSelectedVehicleId(null)}
        vehicleId={selectedVehicleId}
      />
    </DashboardLayout>
  );
}