"use client";

import { useEffect, useState } from "react";
import { useParams, useRouter } from "next/navigation";
import { useLocale, useTranslations } from "next-intl";
import { useSession } from "@/auth/session-provider";
import axios from "axios";
import {
  Card,
  CardBody,
  Button,
  Input,
  Textarea,
  Select,
  SelectItem,
  Switch,
} from "@heroui/react";
import Image from "next/image";
import type { AuctionConfigData } from "@/models/auctionConfig";
import {
  applyCamelAgesReferenceParam,
  formatCamelAnimalAgeForDisplay,
} from "@/lib/camelAnimalAge";
import { uploadImage, removeImage } from "@/actions/upload-image";
import { ArrowLeft, ArrowRight } from "lucide-react";
import { BaseModal } from "@/components/modal";
import PdfViewer from "@/components/viewers/PdfViewer";
import LocationMapPicker from "@/components/maps/LocationMapPicker";
import { DEFAULT_MAP_LAT, DEFAULT_MAP_LNG } from "@/lib/mapDefaults";
import { isValidLatLng } from "@/lib/coordinates";
import { normalizeNullableDateOfBirth } from "@/lib/animalDateOfBirth";
import { API_BASE_URL } from "@/lib/axios";

const API_URL = API_BASE_URL;

function parseFlag(value: any): boolean {
  return value === true || value === 1 || value === "1" || value === "true";
}

function toInputDateTime(value?: string) {
  if (!value) return "";
  return value.replace(" ", "T").slice(0, 16);
}

function toBackendDateTime(value?: string) {
  if (!value) return "";
  return value.replace("T", " ") + ":00";
}

export default function AuctionEditPage() {
  const t = useTranslations("DASHBOARD.LISTINGS");
  const tAuction = useTranslations("DASHBOARD.AUCTIONS");
  const tLoc = useTranslations("ADD_LISTING.STEP6");
  const tMedia = useTranslations("ADD_LISTING.STEP7");
  const params = useParams();
  const id = params?.id as string;
  const lang = useLocale();
  const isRTL = lang === "ar";
  const session = useSession();
  const router = useRouter();

  const [pdfModalOpen, setPdfModalOpen] = useState(false);
  const [selectedPdf, setSelectedPdf] = useState<{
    url: string;
    title: string;
  } | null>(null);

  // Modal states
  const [mainImageModalOpen, setMainImageModalOpen] = useState(false);
  const [galleryModalOpen, setGalleryModalOpen] = useState(false);
  const [videoModalOpen, setVideoModalOpen] = useState(false);
  const [certsModalOpen, setCertsModalOpen] = useState(false);
  const [detailsModalOpen, setDetailsModalOpen] = useState(false);
  const [animalModalOpen, setAnimalModalOpen] = useState(false);

  const getFileKind = (f: any): "pdf" | "image" | "other" => {
    const url = String(f?.url || "").toLowerCase();
    const type = String(f?.type || "").toLowerCase();
    const name = String(f?.name || "").toLowerCase();
    if (type.includes("pdf") || url.endsWith(".pdf") || name.endsWith(".pdf"))
      return "pdf";
    if (
      type.startsWith("image/") ||
      url.match(/\.(jpg|jpeg|png|gif|webp)$/i) ||
      name.match(/\.(jpg|jpeg|png|gif|webp)$/i)
    )
      return "image";
    return "other";
  };

  const openPdf = (url: string, title: string) => {
    setSelectedPdf({ url, title });
    setPdfModalOpen(true);
  };

  const scrollToSection = (sectionId: string) => {
    const el = document.getElementById(sectionId);
    el?.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  const label = (key: string) => {
    const map: Record<string, { ar: string; en: string }> = {
      horse: { ar: "حصان", en: "Horse" },
      camel: { ar: "جمل", en: "Camel" },
      camel_group: { ar: "مجموعة جمال", en: "Camel Group" },
      name: { ar: "الاسم", en: "Name" },
      father_name: { ar: "اسم الأب", en: "Father name" },
      mother_name: { ar: "اسم الأم", en: "Mother name" },
      mother_father_name: { ar: "اسم جد الأم", en: "Mother's father name" },
      animal_usage_id: { ar: "الاستخدام", en: "Usage" },
      animal_color_id: { ar: "اللون", en: "Color" },
      animal_age_id: { ar: "فئة العمر", en: "Age category" },
      date_of_birth: { ar: "تاريخ الميلاد", en: "Date of birth" },
      height: { ar: "الارتفاع", en: "Height" },
      type: { ar: "النوع", en: "Type" },
      breed: { ar: "السلالة", en: "Breed" },
      main_image: { ar: "الصورة الرئيسية", en: "Main image" },
      additional_images: { ar: "صور إضافية", en: "Additional images" },
      medical_exam_certificate: {
        ar: "شهادة الفحص الطبي",
        en: "Medical exam certificate",
      },
      info_certificate: { ar: "شهادة المعلومات", en: "Info certificate" },
      owner_document: { ar: "وثيقة المالك", en: "Owner document" },
    };

    const entry = map[key];
    return entry ? (isRTL ? entry.ar : entry.en) : key;
  };

  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [full, setFull] = useState<any | null>(null);
  const [files, setFiles] = useState<any[]>([]);

  const canEditDetails = parseFlag((full as any)?.can_edit_details);
  const canEditStatus = parseFlag((full as any)?.can_edit_status);

  const [config, setConfig] = useState<AuctionConfigData | null>(null);
  const [configLoading, setConfigLoading] = useState(false);

  const [general, setGeneral] = useState({
    title: "",
    description: "",
    auction_start_time: "",
    auction_end_time: "",
    state_id: "",
    status: "",
    lat: DEFAULT_MAP_LAT,
    lng: DEFAULT_MAP_LNG,
  });

  const [videoLinks, setVideoLinks] = useState<string[]>([]);
  const [initialVideoLinks, setInitialVideoLinks] = useState<string[]>([]);
  const [videoDirty, setVideoDirty] = useState(false);

  const [camel, setCamel] = useState<any | null>(null);
  const [camelGroup, setCamelGroup] = useState<any | null>(null);
  const [horse, setHorse] = useState<any | null>(null);

  const handleFilesUpload = async (
    fieldName: string,
    collectionName: string,
    fileList: FileList | null,
  ) => {
    if (!fileList || fileList.length === 0) return;

    const singleCollections = new Set([
      "main_image",
      "medical_exam_certificate",
      "info_certificate",
      "owner_document",
    ]);

    if (singleCollections.has(collectionName)) {
      const alreadyHasOne = files.some(
        (f) => f.collection_name === collectionName,
      );
      if (alreadyHasOne) {
        if (collectionName === "main_image") {
          alert(tMedia("toast.main_image_exists"));
        } else {
          alert("لا يمكن رفع أكثر من ملف لهذا الحقل");
        }
        return;
      }

      if (fileList.length > 1) {
        if (collectionName === "main_image") {
          alert(tMedia("toast.only_one_main_image"));
        } else {
          alert("يرجى اختيار ملف واحد فقط");
        }
        return;
      }
    }

    const formData = new FormData();
    formData.append("model_name", "Auction");

    const filesArray = Array.from(fileList);

    if (singleCollections.has(collectionName)) {
      formData.append(fieldName, filesArray[0]);
    } else {
      filesArray.forEach((file, index) => {
        formData.append(`${fieldName}[${index}]`, file);
      });
    }

    try {
      const res = await uploadImage(formData);
      if (res?.success && Array.isArray(res.data)) {
        const uploadedFiles = res.data.map((f: any) => ({
          collection_name: f.collection_name,
          url: f.url,
        }));

        setFiles((prev) => [...prev, ...uploadedFiles]);
      } else {
        alert(tMedia("toast.upload_failed"));
      }
    } catch (error) {
      console.error("upload error", error);
      alert(tMedia("toast.upload_failed"));
    }
  };

  const handleRemoveExistingFile = async (index: number, file: any) => {
    // إذا لم يكن هناك id (ملف مضاف محليًا فقط)، نحذفه محليًا بدون استدعاء API
    if (!file?.id) {
      setFiles((prev) => prev.filter((_, idx) => idx !== index));
      return;
    }

    try {
      const token = session?.access_token;
      if (!token) {
        alert(tMedia("toast.auth_required"));
        return;
      }
      const res = await removeImage({ mediaIds: [file.id], token });
      if (res?.success) {
        setFiles((prev) => prev.filter((_, idx) => idx !== index));
      } else {
        alert(tMedia("toast.remove_failed"));
      }
    } catch (err) {
      console.error("remove media error", err);
      alert(tMedia("toast.remove_failed"));
    }
  };

  useEffect(() => {
    const fetchAuction = async () => {
      try {
        setLoading(true);
        const token = session?.access_token;
        const res = await axios.get(`${API_URL}/user/auctions/${id}`, {
          headers: {
            Authorization: token ? `Bearer ${token}` : "",
            Accept: "application/json",
            lang,
          },
        });
        const data = res.data?.data || {};
        setFull(data);
        const latRaw =
          data.lat != null && data.lat !== "" ? Number(data.lat) : NaN;
        const lngRaw =
          data.lng != null && data.lng !== "" ? Number(data.lng) : NaN;
        setGeneral({
          title: data.title || "",
          description: data.description || "",
          auction_start_time: toInputDateTime(data.auction_start_time),
          auction_end_time: toInputDateTime(data.auction_end_time),
          // نخزن state_id كسلسلة حتى يطابق مفاتيح الـ Select القادمة من الكونفغ
          state_id:
            data.state_id !== null && data.state_id !== undefined
              ? String(data.state_id)
              : "",
          status: data.status || "",
          lat: Number.isFinite(latRaw) ? latRaw : DEFAULT_MAP_LAT,
          lng: Number.isFinite(lngRaw) ? lngRaw : DEFAULT_MAP_LNG,
        });
        setCamel(data.camel || null);
        setCamelGroup(data.camel_group || null);
        setHorse(data.horse || null);

        const videos: string[] = Array.isArray(data.video_links)
          ? data.video_links
          : [];
        setVideoLinks(videos);
        setInitialVideoLinks(videos);

        const combinedFiles: any[] = [];

        if (Array.isArray(data.files) && data.files.length) {
          combinedFiles.push(...data.files);
        } else if (data.media_files) {
          const media = data.media_files;

          if (media.main_image?.url) {
            combinedFiles.push({
              collection_name: "main_image",
              url: media.main_image.url,
              id: media.main_image.id,
            });
          }

          if (Array.isArray(media.additional_images)) {
            media.additional_images.forEach((img: any) => {
              if (img?.url) {
                combinedFiles.push({
                  collection_name: "additional_images",
                  url: img.url,
                  id: img.id,
                });
              }
            });
          }

          if (media.medical_exam_certificate?.url) {
            combinedFiles.push({
              collection_name: "medical_exam_certificate",
              url: media.medical_exam_certificate.url,
              id: media.medical_exam_certificate.id,
            });
          }

          if (media.info_certificate?.url) {
            combinedFiles.push({
              collection_name: "info_certificate",
              url: media.info_certificate.url,
              id: media.info_certificate.id,
            });
          }

          if (media.owner_document?.url) {
            combinedFiles.push({
              collection_name: "owner_document",
              url: media.owner_document.url,
              id: media.owner_document.id,
            });
          }
        }

        setFiles(combinedFiles);

        // جلب الكونفغ حسب نوع الحيوان (horse أو camel)
        const animalTypeForConfig: "camel" | "horse" | null = data.horse
          ? "horse"
          : data.camel || data.camel_group
            ? "camel"
            : null;

        if (animalTypeForConfig) {
          setConfigLoading(true);
          const params = new URLSearchParams({
            countries: "1",
            additional_services: "1",
            usages: "1",
            animal_type: animalTypeForConfig,
            colors: "1",
          });
          applyCamelAgesReferenceParam(params, animalTypeForConfig);

          const cfgRes = await axios.get(
            `${API_URL}/user/config/reference-data?${params.toString()}`,
            {
              headers: {
                Authorization: token ? `Bearer ${token}` : "",
                Accept: "application/json",
                lang,
              },
            },
          );

          setConfig(cfgRes.data?.data || null);
          setConfigLoading(false);
        }
        setError(null);
      } catch (e: any) {
        console.error(e);
        setError(
          e?.response?.data?.message || e?.message || "فشل في تحميل المزاد",
        );
      } finally {
        setLoading(false);
      }
    };

    if (id) fetchAuction();
  }, [id, lang, session?.access_token]);

  // عند توفر الكونفغ، اربط الأسماء القادمة من المزاد (usage/color) بالـ IDs من الكونفغ
  useEffect(() => {
    if (!config) return;

    // Horse
    setHorse((prev: any) => {
      if (!prev) return prev;
      const next = { ...prev };

      if (!next.animal_usage_id && next.animal_usage && config.usages) {
        const u = config.usages.find((x) => x.name === next.animal_usage);
        if (u) next.animal_usage_id = String(u.id);
      }

      if (!next.animal_color_id && next.animal_color && config.colors) {
        const c = config.colors.find((x) => x.name === next.animal_color);
        if (c) next.animal_color_id = String(c.id);
      }

      return next;
    });

    // Camel (فردي)
    setCamel((prev: any) => {
      if (!prev) return prev;
      const next = { ...prev };

      if (!next.animal_usage_id && next.animal_usage && config.usages) {
        const u = config.usages.find((x) => x.name === next.animal_usage);
        if (u) next.animal_usage_id = String(u.id);
      }

      if (!next.animal_color_id && next.animal_color && config.colors) {
        const c = config.colors.find((x) => x.name === next.animal_color);
        if (c) next.animal_color_id = String(c.id);
      }

      if (!next.animal_age_id && next.animal_age && config.ages?.length) {
        const ageLabel = formatCamelAnimalAgeForDisplay(next.animal_age);
        if (ageLabel) {
          const a = config.ages.find((x) => x.name === ageLabel);
          if (a) next.animal_age_id = String(a.id);
        }
      }

      return next;
    });

    // Camel Group
    setCamelGroup((prev: any) => {
      if (!prev) return prev;
      const next = { ...prev };

      if (!next.animal_usage_id && next.animal_usage && config.usages) {
        const u = config.usages.find((x) => x.name === next.animal_usage);
        if (u) next.animal_usage_id = String(u.id);
      }

      if (!next.animal_color_id && next.animal_color && config.colors) {
        const c = config.colors.find((x) => x.name === next.animal_color);
        if (c) next.animal_color_id = String(c.id);
      }

      return next;
    });
  }, [config]);

  const handleSave = async () => {
    if (!full) return;
    if (!canEditDetails) {
      alert("لا يمكنك تعديل هذا المزاد حالياً");
      return;
    }
    try {
      if (general.auction_start_time && full.auction_end_time) {
        const start = new Date(general.auction_start_time);
        const end = new Date(toInputDateTime(full.auction_end_time));

        /*         if (!(end > start)) {
          alert(
            "حقل auction end time محظور.\nيجب على حقل auction end time أن يكون تاريخًا لاحقًا للتاريخ auction start time."
          );
          return;
        } */
      }

      setSaving(true);
      const token = session?.access_token;

      const la = Number(general.lat);
      const ln = Number(general.lng);
      if (!isValidLatLng(la, ln)) {
        alert(tLoc("invalid_coordinates"));
        setSaving(false);
        return;
      }

      const payload: any = {
        _method: "put",
        state_id: general.state_id || full.state_id,
        auction_start_time: toBackendDateTime(general.auction_start_time),
        auction_end_time: toBackendDateTime(general.auction_end_time),
        lat: la,
        lng: ln,
        ...(canEditDetails
          ? {
              title: general.title,
              description: general.description,
              files,
            }
          : {}),
      };

      if (videoDirty) {
        if (canEditDetails) {
          payload.video_links = videoLinks.filter((v) => v && v.trim().length);
        }
      }

      if (camel) {
        const { id: _camelId, ...camelWithoutId } = camel as any;
        if (canEditDetails) {
          payload.camel = {
            ...camelWithoutId,
            date_of_birth: normalizeNullableDateOfBirth(
              camelWithoutId.date_of_birth,
            ),
          };
        }
      }
      if (camelGroup) {
        const { id: _groupId, ...camelGroupWithoutId } = camelGroup as any;
        if (canEditDetails) payload.camel_group = camelGroupWithoutId;
      }
      if (horse) {
        const { id: _horseId, ...horseWithoutId } = horse as any;
        if (canEditDetails) payload.horse = horseWithoutId;
      }

      await axios.post(`${API_URL}/user/dashboard/auctions/${id}`, payload, {
        headers: {
          Authorization: token ? `Bearer ${token}` : "",
          Accept: "application/json",
          lang,
        },
      });

      router.back();
    } catch (e: any) {
      console.error(e);
      alert(e?.response?.data?.message || e?.message || "فشل تعديل المزاد");
    } finally {
      setSaving(false);
    }
  };

  if (loading) {
    return (
      <div
        className={`max-w-7xl mx-auto px-4 py-4 mt-16 ${isRTL ? "text-right" : ""}`}
      >
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 items-start">
          <main className="lg:col-span-8 space-y-6">
            {/* Top actions skeleton: back + edit status */}
            <div className="flex items-center justify-between gap-3">
              <div className="h-10 w-32 bg-slate-200 rounded-full animate-pulse" />
              <div className="h-10 w-40 bg-sky-100 rounded-full animate-pulse" />
            </div>

            <Card className="border rounded-2xl shadow-soft">
              <CardBody className="space-y-4">
                <div className="h-5 w-28 bg-slate-200 rounded animate-pulse" />
                <div className="aspect-16/7 w-full bg-slate-200 rounded-2xl animate-pulse" />
              </CardBody>
            </Card>
            <Card className="border rounded-2xl shadow-soft">
              <CardBody className="space-y-4">
                <div className="h-5 w-36 bg-slate-200 rounded animate-pulse" />
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="h-10 bg-slate-200 rounded animate-pulse" />
                  <div className="h-10 bg-slate-200 rounded animate-pulse" />
                </div>
                <div className="h-28 bg-slate-200 rounded animate-pulse" />
              </CardBody>
            </Card>
            <Card className="border rounded-2xl shadow-soft">
              <CardBody className="space-y-4">
                <div className="h-5 w-40 bg-slate-200 rounded animate-pulse" />
                <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
                  {Array.from({ length: 8 }).map((_, idx) => (
                    <div
                      key={idx}
                      className="aspect-square bg-slate-200 rounded-xl animate-pulse"
                    />
                  ))}
                </div>
              </CardBody>
            </Card>
            <div className="flex justify-end">
              <div className="h-11 w-40 bg-primary/10 rounded-full animate-pulse" />
            </div>
          </main>
          <aside className="lg:col-span-4 space-y-6">
            <Card className="border rounded-2xl shadow-soft">
              <CardBody className="space-y-4">
                <div className="h-5 w-32 bg-slate-200 rounded animate-pulse" />
                <div className="space-y-3">
                  <div className="h-10 bg-slate-200 rounded animate-pulse" />
                  <div className="h-10 bg-slate-200 rounded animate-pulse" />
                  <div className="h-10 bg-slate-200 rounded animate-pulse" />
                </div>
              </CardBody>
            </Card>
            <Card className="border rounded-2xl shadow-soft">
              <CardBody className="space-y-4">
                <div className="h-5 w-28 bg-slate-200 rounded animate-pulse" />
                <div className="h-10 bg-slate-200 rounded animate-pulse" />
                <div className="h-10 bg-slate-200 rounded animate-pulse" />
                <div className="h-10 bg-slate-200 rounded animate-pulse" />
              </CardBody>
            </Card>
          </aside>
        </div>
      </div>
    );
  }

  if (error || !full) {
    return (
      <Card className="border rounded-2xl shadow-soft">
        <CardBody>
          <div className="text-center p-8 text-red-500">
            {error || t("not_found")}
          </div>
        </CardBody>
      </Card>
    );
  }

  const mainImageUrl =
    files.find((f) => f.collection_name === "main_image")?.url ||
    full?.media_files?.main_image?.url ||
    full?.main_image?.url ||
    "";

  const ownerName =
    full?.created_by?.name || full?.owner?.name || full?.user?.name || "-";
  const stableName =
    full?.created_by?.stable_name ||
    full?.owner?.stable_name ||
    full?.stable_name ||
    "-";
  const ownerPhone =
    full?.created_by?.phone ||
    full?.owner?.phone ||
    full?.phone ||
    full?.owner_phone ||
    "-";

  const medicalCert = files.find(
    (f) => f.collection_name === "medical_exam_certificate",
  );
  const infoCert = files.find((f) => f.collection_name === "info_certificate");
  const ownerDoc = files.find((f) => f.collection_name === "owner_document");

  const statusKey = String(full?.status || "").toLowerCase();
  const statusLabel = statusKey ? tAuction(`status.${statusKey}` as any) : "-";

  return (
    <div className="max-w-7xl mx-auto px-4 py-4 mt-16">
      <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 items-start">
        <main className="lg:col-span-8 space-y-6">
          <div className="flex items-center justify-between gap-3">
            <button
              type="button"
              onClick={() => router.back()}
              className="group flex w-full max-w-2xl items-center justify-between gap-3 rounded-full border border-slate-200/80 bg-white/90 px-5 py-3 text-sm font-semibold text-slate-700 shadow-[0_4px_24px_rgba(15,81,50,0.08)] transition hover:border-[#0F5132]/30 hover:bg-white"
            >
              <span className="inline-flex h-9 w-9 items-center justify-center rounded-full bg-[#0F5132]/10 text-[#0F5132] transition group-hover:bg-[#0F5132]/15">
                {isRTL ? <ArrowRight size={18} /> : <ArrowLeft size={18} />}
              </span>
              <span className="flex flex-col leading-tight text-start">
                <span className="text-[11px] uppercase tracking-wide text-slate-400">
                  {t("nav.back_hint")}
                </span>
                <span className="text-base text-[#0F5132]">
                  {t("nav.back")}
                </span>
              </span>
            </button>
            <Button
              variant="flat"
              className="bg-blue-50 text-blue-700"
              onPress={() => {
                scrollToSection("auction-status");
              }}
            >
              {t("edit.actions.edit_status")}
            </Button>
          </div>

          {!canEditDetails && (
            <Card className="border rounded-2xl shadow-soft">
              <CardBody>
                <div className="text-center text-sm text-amber-700">
                  {tAuction("cannot_edit_details")}
                </div>
              </CardBody>
            </Card>
          )}

          {camelGroup && (
            <Card
              id="section-camel-group"
              className="border rounded-2xl shadow-soft"
            >
              <CardBody className="space-y-4">
                <div className="flex items-center justify-between ">
                  <div className="font-bold text-lg">
                    {t("edit.sections.camel_group_info")}
                  </div>
                </div>
                <div className="grid grid-cols-2 md:grid-cols-3 gap-4 text-sm text-start">
                  <div>
                    <div className="font-semibold text-slate-500">
                      {t("edit.fields.group_count")}
                    </div>
                    <div>{camelGroup.count || "-"}</div>
                  </div>
                  <div>
                    <div className="font-semibold text-slate-500">
                      {t("edit.fields.usage")}
                    </div>
                    <div>{camelGroup.animal_usage || "-"}</div>
                  </div>
                  <div>
                    <div className="font-semibold text-slate-500">
                      {t("edit.fields.breed")}
                    </div>
                    <div>{camelGroup.breed || "-"}</div>
                  </div>
                </div>
                {Array.isArray(camelGroup.additional_service) &&
                  camelGroup.additional_service.length > 0 && (
                    <div className="mt-2 text-sm text-start">
                      <div className="font-semibold text-slate-500 mb-1">
                        {t("edit.fields.additional_services")}
                      </div>
                      <ul className="list-disc ms-4 space-y-1 text-slate-700">
                        {camelGroup.additional_service.map((svc: any) => (
                          <li key={svc.id}>{svc.name}</li>
                        ))}
                      </ul>
                    </div>
                  )}
              </CardBody>
            </Card>
          )}

          <Card id="section-image" className="border rounded-2xl shadow-soft">
            <CardBody className="space-y-4">
              <div className="flex items-center flex-row-reverse justify-between">
                <div className="font-bold text-lg">
                  {t("edit.sections.images")}
                </div>
                <div className="flex items-center gap-3">
                  <button
                    type="button"
                    className="text-primary underline text-sm"
                    onClick={() => setMainImageModalOpen(true)}
                  >
                    {label("main_image")}
                  </button>
                  <button
                    type="button"
                    className="text-primary underline text-sm"
                    onClick={() => setGalleryModalOpen(true)}
                  >
                    {label("additional_images")}
                  </button>
                  <button
                    type="button"
                    className="text-primary underline text-sm"
                    onClick={() => setVideoModalOpen(true)}
                  >
                    {tMedia("video")}
                  </button>
                </div>
              </div>
              <div className="relative w-full overflow-hidden rounded-2xl aspect-16/7 bg-slate-100">
                {mainImageUrl ? (
                  <Image
                    src={mainImageUrl}
                    alt={general.title || "main image"}
                    fill
                    className="object-cover"
                    unoptimized
                  />
                ) : (
                  <div className="w-full h-full flex items-center justify-center text-sm text-slate-500">
                    {t("edit.empty.no_image")}
                  </div>
                )}
              </div>
              {/* Thumbnails */}
              {files.filter((f) => f.collection_name === "additional_images")
                .length > 0 && (
                <div className="flex gap-2 overflow-x-auto pb-2">
                  {files
                    .filter((f) => f.collection_name === "additional_images")
                    .map((f, i) => (
                      <div
                        key={i}
                        className="relative w-20 h-20 rounded-lg overflow-hidden shrink-0 border"
                      >
                        <Image
                          src={f.url}
                          alt={`additional ${i}`}
                          fill
                          className="object-cover"
                          unoptimized
                        />
                      </div>
                    ))}
                </div>
              )}
            </CardBody>
          </Card>

          <Card
            id="section-auction"
            className="border rounded-2xl shadow-soft text-start"
          >
            <CardBody className="space-y-4">
              <div className="flex items-center justify-between text-start">
                <div className="font-bold text-lg">
                  {t("edit.sections.offer_details")}
                </div>
                <button
                  type="button"
                  className="text-primary underline text-sm"
                  onClick={() => setDetailsModalOpen(true)}
                >
                  {t("edit.actions.edit")}
                </button>
              </div>
              {/* Read-only display */}
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm text-start">
                <div>
                  <div className="font-semibold text-slate-500">
                    {t("title")}
                  </div>
                  <div>{general.title || "-"}</div>
                </div>
                <div>
                  <div className="font-semibold text-slate-500">
                    {t("description")}
                  </div>
                  <div className="line-clamp-2">
                    {general.description || "-"}
                  </div>
                </div>
                <div>
                  <div className="font-semibold text-slate-500">
                    {label("type")}
                  </div>
                  <div>
                    {horse ? label("horse") : camel ? label("camel") : "-"}
                  </div>
                </div>
                <div>
                  <div className="font-semibold text-slate-500">
                    {tAuction("end_date")}
                  </div>
                  <div>{general.auction_end_time?.split("T")[0] || "-"}</div>
                </div>
                <div>
                  <div className="font-semibold text-slate-500">
                    {tAuction("state")}
                  </div>
                  <div>{statusLabel}</div>
                </div>
                <div>
                  <div className="font-semibold text-slate-500">
                    {tAuction("state")}
                  </div>
                  <div>
                    {config?.countries?.find(
                      (c) => String(c.id) === general.state_id,
                    )?.name || "-"}
                  </div>
                </div>
              </div>
            </CardBody>
          </Card>

          {(camel || horse) && (
            <Card
              id="section-animal"
              className="border rounded-2xl shadow-soft"
            >
              <CardBody className="space-y-4">
                <div className="flex items-center justify-between ">
                  <div className="font-bold text-lg">
                    {camel
                      ? t("edit.sections.camel_info")
                      : t("edit.sections.horse_info")}
                  </div>
                  <button
                    type="button"
                    className="text-primary underline text-sm"
                    onClick={() => setAnimalModalOpen(true)}
                  >
                    {t("edit.actions.edit")}
                  </button>
                </div>
                {/* Read-only display */}
                <div className="grid grid-cols-2 md:grid-cols-3 gap-4 text-sm text-start">
                  <div>
                    <div className="font-semibold text-slate-500">
                      {label("name")}
                    </div>
                    <div>{(camel || horse)?.name || "-"}</div>
                  </div>
                  <div>
                    <div className="font-semibold text-slate-500">
                      {label("father_name")}
                    </div>
                    <div>{(camel || horse)?.father_name || "-"}</div>
                  </div>
                  <div>
                    <div className="font-semibold text-slate-500">
                      {label("mother_name")}
                    </div>
                    <div>{(camel || horse)?.mother_name || "-"}</div>
                  </div>
                  <div>
                    <div className="font-semibold text-slate-500">
                      {label("date_of_birth")}
                    </div>
                    <div>{(camel || horse)?.date_of_birth || "-"}</div>
                  </div>
                  <div>
                    <div className="font-semibold text-slate-500">
                      {label("breed")}
                    </div>
                    <div>{(camel || horse)?.breed || "-"}</div>
                  </div>
                  {camel &&
                  formatCamelAnimalAgeForDisplay(camel.animal_age) ? (
                    <div>
                      <div className="font-semibold text-slate-500">
                        {label("animal_age_id")}
                      </div>
                      <div>
                        {formatCamelAnimalAgeForDisplay(camel.animal_age)}
                      </div>
                    </div>
                  ) : null}
                  {horse && (
                    <div>
                      <div className="font-semibold text-slate-500">
                        {label("height")}
                      </div>
                      <div>{horse?.height || "-"}</div>
                    </div>
                  )}
                </div>
              </CardBody>
            </Card>
          )}

          <div className="flex justify-end mb-2">
            <Button
              color="primary"
              onPress={handleSave}
              isLoading={saving}
              isDisabled={!canEditDetails}
            >
              {t("save")}
            </Button>
          </div>
        </main>
        <aside className="lg:col-span-4 space-y-6 items-start text-start">
          <Card id="section-owner" className="border rounded-2xl shadow-soft">
            <CardBody className="space-y-4">
              <div className="flex items-center justify-between">
                <div className="font-bold text-lg">{t("edit.owner_info")}</div>
                <Button
                  isIconOnly
                  size="sm"
                  variant="flat"
                  className="bg-slate-100"
                  onPress={() => scrollToSection("section-owner")}
                >
                  ⚑
                </Button>
              </div>
              <div className="space-y-3 text-start">
                <div className="border-b pb-2">
                  <div className="text-sm font-semibold">
                    {t("edit.fields.name")}
                  </div>
                  <div className="text-sm text-slate-600">{ownerName}</div>
                </div>
                <div className="border-b pb-2">
                  <div className="text-sm font-semibold">
                    {t("edit.fields.stable_name")}
                  </div>
                  <div className="text-sm text-slate-600">{stableName}</div>
                </div>
                <div className="border-b pb-2">
                  <div className="text-sm font-semibold">
                    {t("edit.fields.phone")}
                  </div>
                  <div className="text-sm text-slate-600">{ownerPhone}</div>
                </div>
              </div>
            </CardBody>
          </Card>

          <Card id="section-certs" className="border rounded-2xl shadow-soft">
            <CardBody className="space-y-4">
              <div className="flex items-center justify-between">
                <div className="font-bold text-lg">
                  {t("edit.certificates")}
                </div>
                <button
                  type="button"
                  className="text-primary underline text-sm"
                  onClick={() => setCertsModalOpen(true)}
                >
                  {t("edit.actions.edit")}
                </button>
              </div>
              <div className="space-y-3 text-sm">
                <div className="flex items-center justify-between gap-3">
                  <div className="font-semibold">
                    {t("edit.fields.medical_exam_certificate")}
                  </div>
                  {medicalCert?.url ? (
                    <a
                      className="text-primary underline"
                      href={medicalCert.url}
                      target="_blank"
                      rel="noreferrer"
                    >
                      {t("edit.actions.view")}
                    </a>
                  ) : (
                    <span className="text-slate-500">
                      {t("edit.empty.no_certificates")}
                    </span>
                  )}
                </div>
                <div className="flex items-center justify-between gap-3">
                  <div className="font-semibold">
                    {t("edit.fields.info_certificate")}
                  </div>
                  {infoCert?.url ? (
                    <a
                      className="text-primary underline"
                      href={infoCert.url}
                      target="_blank"
                      rel="noreferrer"
                    >
                      {t("edit.actions.view")}
                    </a>
                  ) : (
                    <span className="text-slate-500">
                      {t("edit.empty.no_certificates")}
                    </span>
                  )}
                </div>
                <div className="flex items-center justify-between gap-3">
                  <div className="font-semibold">
                    {t("edit.fields.owner_document")}
                  </div>
                  {ownerDoc?.url ? (
                    <a
                      className="text-primary underline"
                      href={ownerDoc.url}
                      target="_blank"
                      rel="noreferrer"
                    >
                      {t("edit.actions.view")}
                    </a>
                  ) : (
                    <span className="text-slate-500">
                      {t("edit.empty.no_certificates")}
                    </span>
                  )}
                </div>
              </div>
            </CardBody>
          </Card>
        </aside>
      </div>

      {/* Main Image Modal */}
      <BaseModal
        isOpen={mainImageModalOpen}
        onOpenChange={setMainImageModalOpen}
        placement="center"
        contentClassName="w-full max-w-2xl max-h-[85vh] overflow-y-auto rounded-2xl p-4"
        title={label("main_image")}
      >
        <div className="space-y-4">
          <div className="relative w-full aspect-video bg-slate-100 rounded-xl overflow-hidden">
            {mainImageUrl ? (
              <Image
                src={mainImageUrl}
                alt="main"
                fill
                className="object-cover"
                unoptimized
              />
            ) : (
              <div className="w-full h-full flex items-center justify-center text-sm text-slate-500">
                {t("edit.empty.no_image")}
              </div>
            )}
          </div>
          <input
            type="file"
            accept="image/*"
            onChange={(e) =>
              handleFilesUpload(
                "media[main_image]",
                "main_image",
                e.target.files,
              )
            }
            disabled={!canEditDetails}
            className="block w-full text-sm"
          />
          <div className="flex justify-end pt-4 border-t">
            <Button
              color="primary"
              onPress={() => setMainImageModalOpen(false)}
            >
              {t("edit.actions.done")}
            </Button>
          </div>
        </div>
      </BaseModal>

      {/* Gallery Modal */}
      <BaseModal
        isOpen={galleryModalOpen}
        onOpenChange={setGalleryModalOpen}
        placement="center"
        contentClassName="w-full max-w-2xl max-h-[85vh] overflow-y-auto rounded-2xl p-4"
        title={label("additional_images")}
      >
        <div className="space-y-4">
          <div className="grid grid-cols-3 gap-3">
            {files
              .filter((f) => f.collection_name === "additional_images")
              .map((f, i) => (
                <div
                  key={i}
                  className="relative aspect-square rounded-xl overflow-hidden border group"
                >
                  <Image
                    src={f.url}
                    alt={`img-${i}`}
                    fill
                    className="object-cover"
                    unoptimized
                  />
                  <button
                    type="button"
                    onClick={() =>
                      handleRemoveExistingFile(files.indexOf(f), f)
                    }
                    className="absolute top-1 right-1 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-xs"
                  >
                    ×
                  </button>
                </div>
              ))}
          </div>
          <input
            type="file"
            multiple
            accept="image/*"
            onChange={(e) =>
              handleFilesUpload(
                "media[additional_images]",
                "additional_images",
                e.target.files,
              )
            }
            disabled={!canEditDetails}
            className="block w-full text-sm"
          />
          <div className="flex justify-end pt-4 border-t">
            <Button color="primary" onPress={() => setGalleryModalOpen(false)}>
              {t("edit.actions.done")}
            </Button>
          </div>
        </div>
      </BaseModal>

      {/* Video Links Modal */}
      <BaseModal
        isOpen={videoModalOpen}
        onOpenChange={setVideoModalOpen}
        placement="center"
        contentClassName="w-full max-w-2xl max-h-[85vh] overflow-y-auto rounded-2xl p-4"
        title={t("edit.sections.video_links")}
      >
        <div className="space-y-4">
          {videoLinks.map((link, idx) => (
            <div key={idx} className="flex gap-2">
              <Input
                className="flex-1"
                value={link}
                onChange={(e) => {
                  setVideoLinks((prev) => {
                    const next = [...prev];
                    next[idx] = e.target.value;
                    return next;
                  });
                  setVideoDirty(true);
                }}
                placeholder={t("edit.video_link_label", { index: idx + 1 })}
              />
              <Button
                color="danger"
                variant="flat"
                size="sm"
                onPress={() => {
                  setVideoLinks((prev) => prev.filter((_, i) => i !== idx));
                  setVideoDirty(true);
                }}
              >
                {t("edit.actions.delete")}
              </Button>
            </div>
          ))}
          <Button
            variant="flat"
            onPress={() => {
              setVideoLinks((prev) => [...prev, ""]);
              setVideoDirty(true);
            }}
          >
            {t("edit.actions.add_video_link")}
          </Button>
          <div className="flex justify-end pt-4 border-t">
            <Button color="primary" onPress={() => setVideoModalOpen(false)}>
              {t("edit.actions.done")}
            </Button>
          </div>
        </div>
      </BaseModal>

      {/* Certificates Modal */}
      <BaseModal
        isOpen={certsModalOpen}
        onOpenChange={setCertsModalOpen}
        placement="center"
        contentClassName="w-full max-w-lg max-h-[85vh] overflow-y-auto rounded-2xl p-4"
        title={t("edit.certificates")}
      >
        <div className="space-y-4">
          {[
            { key: "medical_exam_certificate", file: medicalCert },
            { key: "info_certificate", file: infoCert },
            { key: "owner_document", file: ownerDoc },
          ].map(({ key, file }) => (
            <div
              key={key}
              className="flex items-center justify-between p-3 border rounded-xl"
            >
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 bg-slate-100 rounded-lg flex items-center justify-center">
                  📄
                </div>
                <div>
                  <div className="font-medium text-sm">{label(key)}</div>
                  <div className="text-xs text-slate-500">
                    {file
                      ? t("edit.status.uploaded")
                      : t("edit.status.not_uploaded")}
                  </div>
                </div>
              </div>
              <div className="flex gap-2">
                {file?.url && (
                  <a
                    href={file.url}
                    target="_blank"
                    rel="noreferrer"
                    className="p-2 bg-blue-50 text-blue-600 rounded-lg"
                  >
                    👁
                  </a>
                )}
                <label className="p-2 bg-slate-100 rounded-lg cursor-pointer">
                  📤
                  <input
                    type="file"
                    accept="image/*,application/pdf"
                    className="hidden"
                    onChange={(e) =>
                      handleFilesUpload(`media[${key}]`, key, e.target.files)
                    }
                  />
                </label>
                {file && (
                  <button
                    type="button"
                    className="p-2 bg-red-50 text-red-600 rounded-lg"
                    onClick={() =>
                      handleRemoveExistingFile(files.indexOf(file), file)
                    }
                  >
                    🗑
                  </button>
                )}
              </div>
            </div>
          ))}
          <div className="flex justify-end pt-4 border-t">
            <Button color="primary" onPress={() => setCertsModalOpen(false)}>
              {t("edit.actions.done")}
            </Button>
          </div>
        </div>
      </BaseModal>

      {/* Details Modal */}
      <BaseModal
        isOpen={detailsModalOpen}
        onOpenChange={setDetailsModalOpen}
        placement="center"
        contentClassName="w-full max-w-2xl max-h-[85vh] overflow-y-auto rounded-2xl p-4"
        title={t("edit.sections.offer_details")}
      >
        <div
          dir={isRTL ? "rtl" : "ltr"}
          className={`space-y-4 ${isRTL ? "text-right" : ""}`}
        >
          <Input
            label={t("title")}
            value={general.title}
            onChange={(e) =>
              setGeneral((p) => ({ ...p, title: e.target.value }))
            }
            isDisabled={!canEditDetails}
          />
          <Select
            label={tAuction("state")}
            selectedKeys={general.state_id ? [general.state_id] : []}
            onChange={(e) =>
              setGeneral((p) => ({ ...p, state_id: e.target.value }))
            }
            isDisabled={!config || !canEditDetails}
          >
            {(config?.countries ?? []).map((c) => (
              <SelectItem key={String(c.id)}>{c.name}</SelectItem>
            ))}
          </Select>
          <Textarea
            label={t("description")}
            value={general.description}
            onChange={(e) =>
              setGeneral((p) => ({ ...p, description: e.target.value }))
            }
            isDisabled={!canEditDetails}
          />
          <div className="grid grid-cols-2 gap-4">
            <Input
              type="datetime-local"
              label={tAuction("start_date")}
              value={general.auction_start_time}
              onChange={(e) =>
                setGeneral((p) => ({
                  ...p,
                  auction_start_time: e.target.value,
                }))
              }
              isDisabled={!canEditDetails}
            />
            <Input
              type="datetime-local"
              label={tAuction("end_date")}
              value={general.auction_end_time}
              onChange={(e) =>
                setGeneral((p) => ({ ...p, auction_end_time: e.target.value }))
              }
              isDisabled={!canEditDetails}
            />
          </div>
          {canEditDetails ? (
            <div className="space-y-2">
              <div className="text-sm font-semibold text-slate-700">
                {tLoc("map_title")}
              </div>
              <p className="text-sm text-slate-500">{tLoc("map_hint")}</p>
              <LocationMapPicker
                lat={general.lat}
                lng={general.lng}
                height={240}
                onChange={({ lat, lng }) =>
                  setGeneral((p) => ({ ...p, lat, lng }))
                }
              />
              <div className="text-xs text-slate-600 font-mono" dir="ltr">
                {`${general.lat.toFixed(6)}, ${general.lng.toFixed(6)}`}
              </div>
            </div>
          ) : null}
          <div className="flex justify-end pt-4 border-t">
            <Button color="primary" onPress={() => setDetailsModalOpen(false)}>
              {t("edit.actions.done")}
            </Button>
          </div>
        </div>
      </BaseModal>

      {/* Animal Modal */}
      <BaseModal
        isOpen={animalModalOpen}
        onOpenChange={setAnimalModalOpen}
        placement="center"
        contentClassName="w-full max-w-2xl max-h-[85vh] overflow-y-auto rounded-2xl p-4"
        title={
          camel ? t("edit.sections.camel_info") : t("edit.sections.horse_info")
        }
      >
        <div
          dir={isRTL ? "rtl" : "ltr"}
          className={`space-y-4 ${isRTL ? "text-right" : ""}`}
        >
          <div className="grid grid-cols-2 gap-4">
            <Input
              label={label("name")}
              value={(camel || horse)?.name ?? ""}
              onChange={(e) => {
                const setter = camel ? setCamel : setHorse;
                setter((prev: any) => ({ ...prev, name: e.target.value }));
              }}
              isDisabled={!canEditDetails}
            />
            <Input
              label={label("father_name")}
              value={(camel || horse)?.father_name ?? ""}
              onChange={(e) => {
                const setter = camel ? setCamel : setHorse;
                setter((prev: any) => ({
                  ...prev,
                  father_name: e.target.value,
                }));
              }}
              isDisabled={!canEditDetails}
            />
            <Input
              label={label("mother_name")}
              value={(camel || horse)?.mother_name ?? ""}
              onChange={(e) => {
                const setter = camel ? setCamel : setHorse;
                setter((prev: any) => ({
                  ...prev,
                  mother_name: e.target.value,
                }));
              }}
              isDisabled={!canEditDetails}
            />
            <Input
              label={label("mother_father_name")}
              value={(camel || horse)?.mother_father_name ?? ""}
              onChange={(e) => {
                const setter = camel ? setCamel : setHorse;
                setter((prev: any) => ({
                  ...prev,
                  mother_father_name: e.target.value,
                }));
              }}
              isDisabled={!canEditDetails}
            />
            <Input
              label={label("date_of_birth")}
              type="date"
              value={(camel || horse)?.date_of_birth ?? ""}
              onChange={(e) => {
                const setter = camel ? setCamel : setHorse;
                setter((prev: any) => ({
                  ...prev,
                  date_of_birth: e.target.value,
                }));
              }}
              isDisabled={!canEditDetails}
            />
            {horse && (
              <Input
                label={label("height")}
                type="number"
                value={horse?.height == null ? "" : String(horse.height)}
                onChange={(e) =>
                  setHorse((prev: any) => ({
                    ...prev,
                    height: Number(e.target.value),
                  }))
                }
                isDisabled={!canEditDetails}
              />
            )}
            <Input
              label={label("breed")}
              value={(camel || horse)?.breed ?? ""}
              onChange={(e) => {
                const setter = camel ? setCamel : setHorse;
                setter((prev: any) => ({ ...prev, breed: e.target.value }));
              }}
              isDisabled={!canEditDetails}
            />
            <Input
              label={label("type")}
              value={(camel || horse)?.type ?? ""}
              onChange={(e) => {
                const setter = camel ? setCamel : setHorse;
                setter((prev: any) => ({ ...prev, type: e.target.value }));
              }}
              isDisabled={!canEditDetails}
            />
            {camel && config?.ages && config.ages.length > 0 ? (
              <Select
                label={label("animal_age_id")}
                selectedKeys={
                  camel?.animal_age_id ? [String(camel.animal_age_id)] : []
                }
                onSelectionChange={(keys) => {
                  const id = Array.from(keys)[0] as string;
                  setCamel((prev: any) => ({
                    ...prev,
                    animal_age_id: id,
                  }));
                }}
                isDisabled={!canEditDetails}
              >
                {config.ages.map((a) => (
                  <SelectItem key={String(a.id)}>{a.name}</SelectItem>
                ))}
              </Select>
            ) : null}
          </div>
          <div className="flex justify-end pt-4 border-t">
            <Button color="primary" onPress={() => setAnimalModalOpen(false)}>
              {t("edit.actions.done")}
            </Button>
          </div>
        </div>
      </BaseModal>

      {/* PDF Modal */}
      <BaseModal
        isOpen={pdfModalOpen}
        onOpenChange={setPdfModalOpen}
        placement="center"
        contentClassName="w-full max-w-4xl max-h-[85vh] overflow-y-auto rounded-2xl p-3"
        title={selectedPdf?.title || "PDF"}
      >
        {selectedPdf ? (
          <PdfViewer fileUrl={selectedPdf.url} fileName={selectedPdf.title} />
        ) : null}
      </BaseModal>
    </div>
  );
}