"use client";

import { useState } from "react";
import { motion } from "framer-motion";
import { useTranslations } from "next-intl";
import ServiceListingCard from "@/components/service-listing-card/ServiceListingCard";
import ServiceDetailModal, {
  type ServiceDetailInfoRow,
} from "@/components/service-listing-card/ServiceDetailModal";
import { displayServiceField } from "@/components/service-listing-card/detailHelpers";
import DynamicButton from "@/components/button";
import DynamicInput from "@/components/input";
import { getTransportServices } from "@/actions/services/transport";
import {
  extractTransportLogoUrls,
  withServiceImageFallback,
} from "@/lib/serviceMedia";
import { parseServiceLatLng } from "@/lib/serviceGeo";
import type { ServiceMapCoords } from "@/lib/serviceGeo";
import { formatRatingWithMax } from "@/lib/serviceRating";
import type { ReviewableType } from "@/lib/publicReviewsApi";
import type { ServiceDetailPackage } from "@/components/service-listing-card/detailHelpers";

type DetailState = {
  images: string[];
  imageAlt: string;
  infoRows: ServiceDetailInfoRow[];
  description: string;
  mapCoords: ServiceMapCoords | null;
  phone: string;
  whatsapp: string;
  serviceRatingRaw: string | null | undefined;
  reviewableId: string;
  reviewableType: ReviewableType;
  packages?: ServiceDetailPackage[] | null;
} | null;

export default function ClientTransportServices({ data }: { data: any }) {
  const t = useTranslations("SERVICES_TRANSPORT");
  const tCard = useTranslations("SERVICE_LISTING_CARD");
  const tDetail = useTranslations("SERVICE_DETAIL_MODAL");

  const [items, setItems] = useState<any[]>(data.data);
  const [meta, setMeta] = useState(data.meta);
  const [detail, setDetail] = useState<DetailState>(null);

  const [filters, setFilters] = useState({
    category: "horse",
    transport_type: "internal_external",
    search: "",
  });

  const fetchData = async (page = 1, append = false) => {
    const res = await getTransportServices({
      page,
      per_page: meta.per_page,
      ...filters,
    });

    const newData = res.data;
    setMeta(newData.meta);

    if (append) {
      setItems((prev) => [...prev, ...newData.data]);
    } else {
      setItems(newData.data);
    }
  };

  const handleLoadMore = async () => {
    if (meta.current_page >= meta.last_page) return;
    await fetchData(meta.current_page + 1, true);
  };

  const handleFilterChange = async (
    key: "category" | "transport_type" | "search",
    value: string,
  ) => {
    setFilters((prev) => ({ ...prev, [key]: value }));
    await fetchData(1, false);
  };

  return (
    <main className="bg-[#FBF9F6] min-h-screen">
      <section className="bg-gradient-to-tr from-[#0F5132] to-[#1B7A50] text-white py-10 sm:py-14 px-4 sm:px-6">
        <div className="max-w-7xl mx-auto text-start">
          <h1 className="text-3xl md:text-4xl font-extrabold">
            {t("hero.title")}
          </h1>
          <p className="mt-3 max-w-3xl text-sm sm:text-base text-white/90 leading-relaxed">
            {t("hero.description")}
          </p>
        </div>
      </section>

      <section className="py-4 sm:py-6">
        <div className="max-w-7xl mx-auto px-4 sm:px-6">
          <div className="filter-container p-3 sm:p-4">
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
              <DynamicInput
                label={t("filters.category_label")}
                type="select"
                field={{
                  name: "category",
                  value: filters.category,
                  onChange: (e: any) =>
                    handleFilterChange("category", e.target.value),
                }}
                options={[
                  {
                    value: "horse",
                    label: `🐎 ${t("filters.category.horse")}`,
                  },
                  {
                    value: "camel",
                    label: `🐫 ${t("filters.category.camel")}`,
                  },
                ]}
                variant="bordered"
                size="sm"
                className="w-full"
              />

              <DynamicInput
                label={t("filters.transport_type_label")}
                type="select"
                field={{
                  name: "transport_type",
                  value: filters.transport_type,
                  onChange: (e: any) =>
                    handleFilterChange("transport_type", e.target.value),
                }}
                options={[
                  {
                    value: "internal",
                    label: t("filters.transport_type.internal"),
                  },
                  {
                    value: "external",
                    label: t("filters.transport_type.external"),
                  },
                  {
                    value: "internal_external",
                    label: t("filters.transport_type.internal_external"),
                  },
                ]}
                variant="bordered"
                size="sm"
                className="w-full"
              />

              <DynamicInput
                type="text"
                placeholder={t("filters.search_placeholder")}
                field={{
                  name: "search",
                  value: filters.search,
                  onChange: (e: any) =>
                    setFilters((prev) => ({ ...prev, search: e.target.value })),
                }}
                variant="bordered"
                size="sm"
                className="w-full"
              />

              <DynamicButton
                className="h-10 sm:h-11 px-5 btn-primary-gradient text-white rounded-xl w-full sm:w-auto sm:self-end"
                onClick={() => handleFilterChange("search", filters.search)}
              >
                {t("filters.search_button")}
              </DynamicButton>
            </div>
          </div>
        </div>
      </section>

      <section className="max-w-7xl mx-auto px-4 sm:px-6 py-6 sm:py-8">
        <motion.div
          className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-6 lg:gap-8"
          initial="hidden"
          animate="show"
          variants={{
            hidden: {},
            show: { transition: { staggerChildren: 0.15 } },
          }}
        >
          {items.map((item, i) => {
            const categoryLabel =
              item.category === "horse"
                ? `🐎 ${t("filters.category.horse")}`
                : `🐫 ${t("filters.category.camel")}`;
            const transportTypeLabel =
              item.transport_type === "internal"
                ? t("filters.transport_type.internal")
                : item.transport_type === "external"
                  ? t("filters.transport_type.external")
                  : t("filters.transport_type.internal_external");
            const tags = [categoryLabel, transportTypeLabel];
            const itemRec = item as Record<string, unknown>;
            const images = withServiceImageFallback(
              extractTransportLogoUrls(itemRec.media_files),
            );
            const ratingLine = formatRatingWithMax(itemRec.rating);
            const infoRows: ServiceDetailInfoRow[] = [
              {
                label: tCard("label_company"),
                value: displayServiceField(item.company_name),
              },
              {
                label: tDetail("label_transport_category"),
                value: categoryLabel,
              },
              {
                label: tDetail("label_transport_type"),
                value: transportTypeLabel,
              },
              {
                label: tDetail("label_state"),
                value: displayServiceField(itemRec.state),
              },
              {
                label: tDetail("label_country"),
                value: displayServiceField(itemRec.country),
              },
              {
                label: tDetail("label_phone"),
                value: displayServiceField(item.phone_number),
              },
              {
                label: tDetail("label_whatsapp"),
                value: displayServiceField(item.whatsapp_number),
              },
            ];
            return (
              <motion.div
                key={item.id || i}
                variants={{
                  hidden: { opacity: 0, y: 20 },
                  show: { opacity: 1, y: 0, transition: { duration: 0.5 } },
                }}
              >
                <ServiceListingCard
                  images={images}
                  imageAlt={item.company_name}
                  primaryLabel={tCard("label_company")}
                  primaryValue={item.company_name}
                  secondaryLabel={tCard("label_service_type")}
                  secondaryValue={tags.join(" · ")}
                  phone={item.phone_number}
                  whatsapp={item.whatsapp_number}
                  ratingRaw={itemRec.rating}
                  ratingLine={ratingLine}
                  onDetailsClick={() =>
                    setDetail({
                      images,
                      imageAlt: item.company_name,
                      infoRows,
                      description: String(item.description ?? "").trim(),
                      mapCoords: parseServiceLatLng(
                        itemRec.lat,
                        itemRec.lng,
                      ),
                      phone: item.phone_number,
                      whatsapp: item.whatsapp_number,
                      serviceRatingRaw:
                        itemRec.rating != null
                          ? String(itemRec.rating)
                          : undefined,
                      reviewableId: String(item.id),
                      reviewableType: "transport_service",
                      packages: null,
                    })
                  }
                />
              </motion.div>
            );
          })}
        </motion.div>

        {meta.current_page < meta.last_page && (
          <div className="mt-8 text-center">
            <DynamicButton
              onClick={handleLoadMore}
              className="px-6 py-3 rounded-xl text-white bg-[#1B7A50] hover:bg-[#14623c] transition-colors"
            >
              {t("load_more")}
            </DynamicButton>
          </div>
        )}
      </section>

      <ServiceDetailModal
        isOpen={detail != null}
        onOpenChange={(open) => {
          if (!open) setDetail(null);
        }}
        images={detail?.images ?? []}
        imageAlt={detail?.imageAlt ?? ""}
        infoRows={detail?.infoRows ?? []}
        descriptionLabel={tDetail("label_description")}
        description={detail?.description}
        mapCoords={detail?.mapCoords ?? null}
        serviceRatingRaw={detail?.serviceRatingRaw}
        reviewableId={detail?.reviewableId}
        reviewableType={detail?.reviewableType}
        packages={detail?.packages ?? null}
        phone={detail?.phone}
        whatsapp={detail?.whatsapp}
      />
    </main>
  );
}