"use client";

import { useMemo, useState, useTransition } from "react";
import Image from "next/image";
import {
  MapPin,
  Plus,
  Edit2,
  Trash2,
  Loader2,
  CheckCircle,
  XCircle,
  Star,
  StarOff,
  Images,
  CalendarDays,
  Eye,
  EyeOff,
  Upload,
  X,
  Globe,
  Building2,
} from "lucide-react";
import {
  saveTourCountryAction,
  deleteTourCountryAction,
  saveTourCityAction,
  deleteTourCityAction,
  saveTourCategoryAction,
  deleteTourCategoryAction,
  saveTourPackageAction,
  deleteTourPackageAction,
  saveTourSlideAction,
  deleteTourSlideAction,
  updateTourBookingStatusAction,
  deleteTourBookingAction,
  uploadTourPackageImageAction,
} from "./actions";

type Category = { id: string; name: string; slug: string };
type Country = { id: string; name: string; slug: string };
type City = { id: string; name: string; slug: string; countryId: string; country: Country };
type PackageRow = {
  id: string;
  title: string;
  slug: string;
  destination: string | null;
  duration: string | null;
  description: string | null;
  itinerary: string | null;
  inclusions: string | null;
  exclusions: string | null;
  pricePerPax: string;
  minPax: number;
  maxPax: number | null;
  isFeatured: boolean;
  isActive: boolean;
  categoryId: string | null;
  countryId: string | null;
  cityId: string | null;
  category: Category | null;
  country: Country | null;
  city: { id: string; name: string; slug: string; countryId: string } | null;
  images: { id: string; url: string; isPrimary: boolean }[];
  _count: { bookings: number };
};
type Slide = {
  id: string;
  imageUrl: string;
  title: string | null;
  subtitle: string | null;
  ctaText: string | null;
  ctaLink: string | null;
  sortOrder: number;
  isActive: boolean;
};
type Booking = {
  id: string;
  name: string;
  email: string;
  phone: string | null;
  date: string | null;
  pax: number | null;
  status: "enquiry" | "confirmed" | "completed" | "cancelled";
  message: string | null;
  createdAt: string;
  package: { id: string; title: string; destination: string | null };
  user: { id: string; name: string; email: string } | null;
};

type Props = {
  categories: Category[];
  countries: Country[];
  cities: City[];
  packages: PackageRow[];
  slides: Slide[];
  bookings: Booking[];
};

type TabId = "packages" | "countries" | "cities" | "categories" | "slider" | "bookings";

const TABS: { id: TabId; label: string; icon: React.ComponentType<{ size?: number }> }[] = [
  { id: "packages", label: "Packages", icon: MapPin },
  { id: "countries", label: "Countries", icon: Globe },
  { id: "cities", label: "Cities", icon: Building2 },
  { id: "categories", label: "Categories", icon: Star },
  { id: "slider", label: "Slider", icon: Images },
  { id: "bookings", label: "Bookings CRM", icon: CalendarDays },
];

function useToast() {
  const [msg, setMsg] = useState<{ type: "ok" | "err"; text: string } | null>(null);
  function show(type: "ok" | "err", text: string) {
    setMsg({ type, text });
    setTimeout(() => setMsg(null), 4000);
  }
  const Toast = msg ? (
    <div className={`fixed bottom-6 right-6 z-50 flex items-center gap-2.5 px-4 py-3 rounded-xl shadow-lg text-sm font-medium border ${msg.type === "ok" ? "bg-emerald-50 text-emerald-800 border-emerald-200" : "bg-red-50 text-red-700 border-red-200"}`}>
      {msg.type === "ok" ? <CheckCircle size={16} /> : <XCircle size={16} />}
      {msg.text}
    </div>
  ) : null;
  return { show, Toast };
}

function Modal({ title, onClose, children }: { title: string; onClose: () => void; children: React.ReactNode }) {
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4" onClick={onClose}>
      <div className="bg-white rounded-2xl shadow-xl w-full max-w-3xl max-h-[90vh] overflow-y-auto" onClick={(e) => e.stopPropagation()}>
        <div className="flex items-center justify-between px-6 py-4 border-b border-neutral-100">
          <h3 className="font-bold text-neutral-800">{title}</h3>
          <button onClick={onClose} className="text-neutral-400 hover:text-neutral-600"><X size={18} /></button>
        </div>
        <div className="p-6">{children}</div>
      </div>
    </div>
  );
}

export default function AdminToursClient({ categories, countries, cities, packages, slides, bookings }: Props) {
  const [tab, setTab] = useState<TabId>("packages");
  const [isPending, startTransition] = useTransition();
  const { show, Toast } = useToast();

  const [countryModal, setCountryModal] = useState<Country | "new" | null>(null);
  const [cityModal, setCityModal] = useState<City | "new" | null>(null);
  const [categoryModal, setCategoryModal] = useState<Category | "new" | null>(null);
  const [packageModal, setPackageModal] = useState<PackageRow | "new" | null>(null);
  const [slideModal, setSlideModal] = useState<Slide | "new" | null>(null);

  const [slideFile, setSlideFile] = useState<File | null>(null);
  const [packageUploadFile, setPackageUploadFile] = useState<File | null>(null);

  const [countryForm, setCountryForm] = useState({ name: "", slug: "" });
  const [cityForm, setCityForm] = useState({ name: "", slug: "", countryId: "" });
  const [categoryForm, setCategoryForm] = useState({ name: "", slug: "" });
  const [packageForm, setPackageForm] = useState({
    title: "",
    slug: "",
    destination: "",
    duration: "",
    description: "",
    itinerary: "",
    inclusions: "",
    exclusions: "",
    pricePerPax: "",
    minPax: 1,
    maxPax: "",
    categoryId: "",
    countryId: "",
    cityId: "",
    isFeatured: false,
    isActive: true,
    images: "",
  });
  const [slideForm, setSlideForm] = useState({ imageUrl: "", title: "", subtitle: "", ctaText: "", ctaLink: "", sortOrder: 0, isActive: true });

  const stats = useMemo(() => ({
    packages: packages.length,
    featured: packages.filter((p) => p.isFeatured).length,
    active: packages.filter((p) => p.isActive).length,
    bookings: bookings.length,
  }), [packages, bookings]);

  function openCategoryModal(c: Category | "new") {
    if (c === "new") setCategoryForm({ name: "", slug: "" });
    else setCategoryForm({ name: c.name, slug: c.slug });
    setCategoryModal(c);
  }

  function openCountryModal(c: Country | "new") {
    if (c === "new") setCountryForm({ name: "", slug: "" });
    else setCountryForm({ name: c.name, slug: c.slug });
    setCountryModal(c);
  }

  function openCityModal(c: City | "new") {
    if (c === "new") setCityForm({ name: "", slug: "", countryId: countries[0]?.id || "" });
    else setCityForm({ name: c.name, slug: c.slug, countryId: c.countryId });
    setCityModal(c);
  }

  function openPackageModal(p: PackageRow | "new") {
    if (p === "new") {
      setPackageForm({ title: "", slug: "", destination: "", duration: "", description: "", itinerary: "", inclusions: "", exclusions: "", pricePerPax: "", minPax: 1, maxPax: "", categoryId: "", countryId: "", cityId: "", isFeatured: false, isActive: true, images: "" });
    } else {
      setPackageForm({
        title: p.title,
        slug: p.slug,
        destination: p.destination || "",
        duration: p.duration || "",
        description: p.description || "",
        itinerary: p.itinerary || "",
        inclusions: p.inclusions || "",
        exclusions: p.exclusions || "",
        pricePerPax: String(p.pricePerPax),
        minPax: p.minPax,
        maxPax: p.maxPax ? String(p.maxPax) : "",
        categoryId: p.categoryId || "",
        countryId: p.countryId || "",
        cityId: p.cityId || "",
        isFeatured: p.isFeatured,
        isActive: p.isActive,
        images: p.images.map((i) => i.url).join("\n"),
      });
    }
    setPackageUploadFile(null);
    setPackageModal(p);
  }

  function openSlideModal(s: Slide | "new") {
    if (s === "new") setSlideForm({ imageUrl: "", title: "", subtitle: "", ctaText: "", ctaLink: "", sortOrder: slides.length, isActive: true });
    else setSlideForm({ imageUrl: s.imageUrl, title: s.title || "", subtitle: s.subtitle || "", ctaText: s.ctaText || "", ctaLink: s.ctaLink || "", sortOrder: s.sortOrder, isActive: s.isActive });
    setSlideFile(null);
    setSlideModal(s);
  }

  async function uploadPackageImageAndAppend() {
    if (!packageUploadFile) return;

    const fd = new FormData();
    fd.append("imageFile", packageUploadFile);

    startTransition(async () => {
      const res = await uploadTourPackageImageAction(fd);
      if (res.ok && res.url) {
        setPackageForm((prev) => ({ ...prev, images: prev.images ? `${prev.images}\n${res.url}` : res.url }));
        setPackageUploadFile(null);
        show("ok", "Image uploaded and appended.");
      } else {
        show("err", res.error || "Upload failed");
      }
    });
  }

  const filteredCities = useMemo(
    () => (packageForm.countryId ? cities.filter((c) => c.countryId === packageForm.countryId) : cities),
    [cities, packageForm.countryId],
  );

  return (
    <div className="p-8">
      {Toast}

      <div className="mb-7">
        <h1 className="text-2xl font-bold text-neutral-900">Tours & Travel Management</h1>
        <p className="text-neutral-500 text-sm mt-0.5">Manage packages, slider, categories, and booking CRM.</p>
      </div>

      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
        <div className="bg-white border border-neutral-200 rounded-xl p-4"><div className="text-xs text-neutral-500">Packages</div><div className="text-xl font-bold text-neutral-900">{stats.packages}</div></div>
        <div className="bg-white border border-neutral-200 rounded-xl p-4"><div className="text-xs text-neutral-500">Featured</div><div className="text-xl font-bold text-neutral-900">{stats.featured}</div></div>
        <div className="bg-white border border-neutral-200 rounded-xl p-4"><div className="text-xs text-neutral-500">Active</div><div className="text-xl font-bold text-neutral-900">{stats.active}</div></div>
        <div className="bg-white border border-neutral-200 rounded-xl p-4"><div className="text-xs text-neutral-500">Bookings</div><div className="text-xl font-bold text-neutral-900">{stats.bookings}</div></div>
      </div>

      <div className="flex gap-2 mb-6 border-b border-neutral-200">
        {TABS.map((t) => {
          const Icon = t.icon;
          return (
            <button key={t.id} onClick={() => setTab(t.id)} className={`flex items-center gap-2 px-4 py-2.5 text-sm font-medium border-b-2 transition-colors ${tab === t.id ? "border-navy-600 text-navy-700" : "border-transparent text-neutral-500 hover:text-neutral-700"}`}>
              <Icon size={16} /> {t.label}
            </button>
          );
        })}
      </div>

      {tab === "packages" && (
        <div>
          <div className="flex justify-between items-center mb-4">
            <h2 className="text-lg font-semibold text-neutral-800">Packages ({packages.length})</h2>
            <button onClick={() => openPackageModal("new")} className="flex items-center gap-2 px-4 py-2.5 bg-navy-700 text-white text-sm font-semibold rounded-lg hover:bg-navy-800"><Plus size={16} /> Add Package</button>
          </div>
          <div className="bg-white border border-neutral-200 rounded-xl overflow-hidden">
            <table className="w-full text-sm">
              <thead className="bg-neutral-50 border-b border-neutral-200">
                <tr>
                  <th className="px-4 py-3 text-left">Package</th>
                  <th className="px-4 py-3 text-left">Destination</th>
                  <th className="px-4 py-3 text-left">Price</th>
                  <th className="px-4 py-3 text-left">Bookings</th>
                  <th className="px-4 py-3 text-left">Status</th>
                  <th className="px-4 py-3 text-right">Actions</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-neutral-100">
                {packages.map((p) => (
                  <tr key={p.id}>
                    <td className="px-4 py-3">
                      <div className="flex items-center gap-3">
                        {p.images[0] ? <Image src={p.images[0].url} alt={p.title} width={48} height={36} className="rounded object-cover w-12 h-9" unoptimized /> : <div className="w-12 h-9 bg-neutral-100 rounded" />}
                        <div>
                          <div className="font-medium text-neutral-800">{p.title}</div>
                          <div className="text-xs text-neutral-500">{p.duration || "-"} · {p.category?.name || "Uncategorized"}</div>
                        </div>
                      </div>
                    </td>
                    <td className="px-4 py-3 text-xs text-neutral-600">{p.destination || "-"}</td>
                    <td className="px-4 py-3 text-xs text-neutral-600">${Number(p.pricePerPax).toFixed(2)}</td>
                    <td className="px-4 py-3 text-xs text-neutral-600">{p._count.bookings}</td>
                    <td className="px-4 py-3">
                      <span className={`inline-flex px-2 py-0.5 text-xs rounded-full ${p.isActive ? "bg-emerald-100 text-emerald-700" : "bg-neutral-100 text-neutral-600"}`}>{p.isActive ? "Active" : "Hidden"}</span>
                    </td>
                    <td className="px-4 py-3">
                      <div className="flex justify-end gap-2">
                        <button className="p-2 text-neutral-400 hover:text-amber-600" title="Toggle Featured">{p.isFeatured ? <Star size={16} /> : <StarOff size={16} />}</button>
                        <button onClick={() => openPackageModal(p)} className="p-2 text-neutral-400 hover:text-blue-600"><Edit2 size={16} /></button>
                        <button onClick={() => startTransition(async () => {
                          if (confirm("Delete this package?")) {
                            await deleteTourPackageAction(p.id);
                            show("ok", "Package deleted");
                          }
                        })} className="p-2 text-neutral-400 hover:text-red-600"><Trash2 size={16} /></button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}

      {tab === "countries" && (
        <div>
          <div className="flex justify-between items-center mb-4">
            <h2 className="text-lg font-semibold text-neutral-800">Countries ({countries.length})</h2>
            <button onClick={() => openCountryModal("new")} className="flex items-center gap-2 px-4 py-2.5 bg-navy-700 text-white text-sm font-semibold rounded-lg hover:bg-navy-800"><Plus size={16} /> Add Country</button>
          </div>
          <div className="grid gap-3">
            {countries.map((c) => (
              <div key={c.id} className="bg-white border border-neutral-200 rounded-xl p-4 flex items-center justify-between">
                <div>
                  <div className="font-semibold text-neutral-900">{c.name}</div>
                  <div className="text-xs text-neutral-500">/{c.slug}</div>
                </div>
                <div className="flex gap-2">
                  <button onClick={() => openCountryModal(c)} className="p-2 text-neutral-400 hover:text-blue-600"><Edit2 size={16} /></button>
                  <button onClick={() => startTransition(async () => {
                    if (confirm("Delete this country?")) {
                      const res = await deleteTourCountryAction(c.id);
                      if (res.ok) show("ok", "Country deleted");
                      else show("err", res.error || "Failed");
                    }
                  })} className="p-2 text-neutral-400 hover:text-red-600"><Trash2 size={16} /></button>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {tab === "cities" && (
        <div>
          <div className="flex justify-between items-center mb-4">
            <h2 className="text-lg font-semibold text-neutral-800">Cities ({cities.length})</h2>
            <button onClick={() => openCityModal("new")} className="flex items-center gap-2 px-4 py-2.5 bg-navy-700 text-white text-sm font-semibold rounded-lg hover:bg-navy-800"><Plus size={16} /> Add City</button>
          </div>
          <div className="grid gap-3">
            {cities.map((c) => (
              <div key={c.id} className="bg-white border border-neutral-200 rounded-xl p-4 flex items-center justify-between">
                <div>
                  <div className="font-semibold text-neutral-900">{c.name}</div>
                  <div className="text-xs text-neutral-500">{c.country.name} · /{c.slug}</div>
                </div>
                <div className="flex gap-2">
                  <button onClick={() => openCityModal(c)} className="p-2 text-neutral-400 hover:text-blue-600"><Edit2 size={16} /></button>
                  <button onClick={() => startTransition(async () => {
                    if (confirm("Delete this city?")) {
                      const res = await deleteTourCityAction(c.id);
                      if (res.ok) show("ok", "City deleted");
                      else show("err", res.error || "Failed");
                    }
                  })} className="p-2 text-neutral-400 hover:text-red-600"><Trash2 size={16} /></button>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {tab === "categories" && (
        <div>
          <div className="flex justify-between items-center mb-4">
            <h2 className="text-lg font-semibold text-neutral-800">Categories ({categories.length})</h2>
            <button onClick={() => openCategoryModal("new")} className="flex items-center gap-2 px-4 py-2.5 bg-navy-700 text-white text-sm font-semibold rounded-lg hover:bg-navy-800"><Plus size={16} /> Add Category</button>
          </div>
          <div className="grid gap-3">
            {categories.map((c) => (
              <div key={c.id} className="bg-white border border-neutral-200 rounded-xl p-4 flex items-center justify-between">
                <div>
                  <div className="font-semibold text-neutral-900">{c.name}</div>
                  <div className="text-xs text-neutral-500">/{c.slug}</div>
                </div>
                <div className="flex gap-2">
                  <button onClick={() => openCategoryModal(c)} className="p-2 text-neutral-400 hover:text-blue-600"><Edit2 size={16} /></button>
                  <button onClick={() => startTransition(async () => {
                    if (confirm("Delete this category?")) {
                      await deleteTourCategoryAction(c.id);
                      show("ok", "Category deleted");
                    }
                  })} className="p-2 text-neutral-400 hover:text-red-600"><Trash2 size={16} /></button>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {tab === "slider" && (
        <div>
          <div className="flex justify-between items-center mb-4">
            <h2 className="text-lg font-semibold text-neutral-800">Tours Slider ({slides.length})</h2>
            <button onClick={() => openSlideModal("new")} className="flex items-center gap-2 px-4 py-2.5 bg-navy-700 text-white text-sm font-semibold rounded-lg hover:bg-navy-800"><Plus size={16} /> Add Slide</button>
          </div>
          <div className="grid gap-3">
            {slides.map((s) => (
              <div key={s.id} className="bg-white border border-neutral-200 rounded-xl p-4 flex items-center justify-between">
                <div className="flex items-center gap-3 min-w-0">
                  <Image src={s.imageUrl} alt={s.title || "slide"} width={96} height={56} className="w-24 h-14 rounded object-cover" unoptimized />
                  <div className="min-w-0">
                    <div className="font-semibold text-neutral-900 truncate">{s.title || "Untitled"}</div>
                    <div className="text-xs text-neutral-500 truncate">{s.subtitle || "No subtitle"}</div>
                  </div>
                </div>
                <div className="flex items-center gap-2">
                  {s.isActive ? <Eye size={16} className="text-emerald-600" /> : <EyeOff size={16} className="text-neutral-400" />}
                  <button onClick={() => openSlideModal(s)} className="p-2 text-neutral-400 hover:text-blue-600"><Edit2 size={16} /></button>
                  <button onClick={() => startTransition(async () => {
                    if (confirm("Delete this slide?")) {
                      await deleteTourSlideAction(s.id);
                      show("ok", "Slide deleted");
                    }
                  })} className="p-2 text-neutral-400 hover:text-red-600"><Trash2 size={16} /></button>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {tab === "bookings" && (
        <div>
          <h2 className="text-lg font-semibold text-neutral-800 mb-4">Bookings ({bookings.length})</h2>
          <div className="bg-white border border-neutral-200 rounded-xl overflow-hidden">
            <table className="w-full text-sm">
              <thead className="bg-neutral-50 border-b border-neutral-200">
                <tr>
                  <th className="px-4 py-3 text-left">Traveller</th>
                  <th className="px-4 py-3 text-left">Package</th>
                  <th className="px-4 py-3 text-left">Travel Date</th>
                  <th className="px-4 py-3 text-left">Pax</th>
                  <th className="px-4 py-3 text-left">Status</th>
                  <th className="px-4 py-3 text-right">Actions</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-neutral-100">
                {bookings.map((b) => (
                  <tr key={b.id}>
                    <td className="px-4 py-3">
                      <div className="font-medium text-neutral-800">{b.name}</div>
                      <div className="text-xs text-neutral-500">{b.email}</div>
                    </td>
                    <td className="px-4 py-3 text-xs text-neutral-700">{b.package.title}</td>
                    <td className="px-4 py-3 text-xs text-neutral-600">{b.date ? new Date(b.date).toLocaleDateString() : "Not set"}</td>
                    <td className="px-4 py-3 text-xs text-neutral-600">{b.pax || "-"}</td>
                    <td className="px-4 py-3"><span className="inline-flex px-2 py-0.5 rounded-full text-xs bg-neutral-100 text-neutral-700">{b.status}</span></td>
                    <td className="px-4 py-3">
                      <div className="flex justify-end gap-2">
                        {(["enquiry", "confirmed", "completed", "cancelled"] as const).map((s) => (
                          <button key={s} onClick={() => startTransition(async () => {
                            await updateTourBookingStatusAction(b.id, s);
                            show("ok", `Booking marked ${s}`);
                          })} className="px-2 py-1 text-xs border border-neutral-200 rounded hover:border-navy-300">{s}</button>
                        ))}
                        <button onClick={() => startTransition(async () => {
                          if (confirm("Delete this booking?")) {
                            await deleteTourBookingAction(b.id);
                            show("ok", "Booking deleted");
                          }
                        })} className="p-2 text-neutral-400 hover:text-red-600"><Trash2 size={16} /></button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}

      {categoryModal && (
        <Modal title={categoryModal === "new" ? "Add Category" : "Edit Category"} onClose={() => setCategoryModal(null)}>
          <div className="space-y-4">
            <label className="text-sm block">Name<input className="mt-1 w-full px-3 py-2 border border-neutral-200 rounded-lg" value={categoryForm.name} onChange={(e) => setCategoryForm({ ...categoryForm, name: e.target.value })} /></label>
            <label className="text-sm block">Slug<input className="mt-1 w-full px-3 py-2 border border-neutral-200 rounded-lg" value={categoryForm.slug} onChange={(e) => setCategoryForm({ ...categoryForm, slug: e.target.value })} /></label>
          </div>
          <div className="flex justify-end gap-3 mt-5">
            <button onClick={() => setCategoryModal(null)} className="px-4 py-2 text-sm">Cancel</button>
            <button disabled={isPending} onClick={() => startTransition(async () => {
              const fd = new FormData();
              if (categoryModal !== "new") fd.append("id", (categoryModal as Category).id);
              fd.append("name", categoryForm.name);
              fd.append("slug", categoryForm.slug);
              const res = await saveTourCategoryAction(fd);
              if (res.ok) {
                show("ok", "Category saved");
                setCategoryModal(null);
              } else {
                show("err", res.error || "Failed");
              }
            })} className="px-4 py-2 bg-navy-700 text-white text-sm rounded-lg">{isPending ? <Loader2 size={14} className="animate-spin" /> : "Save"}</button>
          </div>
        </Modal>
      )}

      {packageModal && (
        <Modal title={packageModal === "new" ? "Add Package" : "Edit Package"} onClose={() => setPackageModal(null)}>
          <div className="grid md:grid-cols-2 gap-4">
            <label className="text-sm">Title<input className="mt-1 w-full px-3 py-2 border border-neutral-200 rounded-lg" value={packageForm.title} onChange={(e) => setPackageForm({ ...packageForm, title: e.target.value })} /></label>
            <label className="text-sm">Slug<input className="mt-1 w-full px-3 py-2 border border-neutral-200 rounded-lg" value={packageForm.slug} onChange={(e) => setPackageForm({ ...packageForm, slug: e.target.value })} /></label>
            <label className="text-sm">Destination<input className="mt-1 w-full px-3 py-2 border border-neutral-200 rounded-lg" value={packageForm.destination} onChange={(e) => setPackageForm({ ...packageForm, destination: e.target.value })} /></label>
            <label className="text-sm">Duration<input className="mt-1 w-full px-3 py-2 border border-neutral-200 rounded-lg" value={packageForm.duration} onChange={(e) => setPackageForm({ ...packageForm, duration: e.target.value })} /></label>
            <label className="text-sm">Price Per Pax<input type="number" step="0.01" className="mt-1 w-full px-3 py-2 border border-neutral-200 rounded-lg" value={packageForm.pricePerPax} onChange={(e) => setPackageForm({ ...packageForm, pricePerPax: e.target.value })} /></label>
            <label className="text-sm">Country
              <select className="mt-1 w-full px-3 py-2 border border-neutral-200 rounded-lg" value={packageForm.countryId} onChange={(e) => setPackageForm({ ...packageForm, countryId: e.target.value, cityId: "" })}>
                <option value="">Select Country</option>
                {countries.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
              </select>
            </label>
            <label className="text-sm">City
              <select className="mt-1 w-full px-3 py-2 border border-neutral-200 rounded-lg" value={packageForm.cityId} onChange={(e) => setPackageForm({ ...packageForm, cityId: e.target.value })}>
                <option value="">Select City</option>
                {filteredCities.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
              </select>
            </label>
            <label className="text-sm">Category
              <select className="mt-1 w-full px-3 py-2 border border-neutral-200 rounded-lg" value={packageForm.categoryId} onChange={(e) => setPackageForm({ ...packageForm, categoryId: e.target.value })}>
                <option value="">Uncategorized</option>
                {categories.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
              </select>
            </label>
            <label className="text-sm">Destination (optional override)<input className="mt-1 w-full px-3 py-2 border border-neutral-200 rounded-lg" value={packageForm.destination} onChange={(e) => setPackageForm({ ...packageForm, destination: e.target.value })} /></label>
            <label className="text-sm">Min Pax<input type="number" className="mt-1 w-full px-3 py-2 border border-neutral-200 rounded-lg" value={packageForm.minPax} onChange={(e) => setPackageForm({ ...packageForm, minPax: Number(e.target.value) || 1 })} /></label>
            <label className="text-sm">Max Pax<input type="number" className="mt-1 w-full px-3 py-2 border border-neutral-200 rounded-lg" value={packageForm.maxPax} onChange={(e) => setPackageForm({ ...packageForm, maxPax: e.target.value })} /></label>
            <label className="text-sm">Featured
              <select className="mt-1 w-full px-3 py-2 border border-neutral-200 rounded-lg" value={String(packageForm.isFeatured)} onChange={(e) => setPackageForm({ ...packageForm, isFeatured: e.target.value === "true" })}>
                <option value="false">No</option>
                <option value="true">Yes</option>
              </select>
            </label>
            <label className="text-sm">Active
              <select className="mt-1 w-full px-3 py-2 border border-neutral-200 rounded-lg" value={String(packageForm.isActive)} onChange={(e) => setPackageForm({ ...packageForm, isActive: e.target.value === "true" })}>
                <option value="true">Yes</option>
                <option value="false">No</option>
              </select>
            </label>
            <label className="text-sm md:col-span-2">Description<textarea rows={3} className="mt-1 w-full px-3 py-2 border border-neutral-200 rounded-lg" value={packageForm.description} onChange={(e) => setPackageForm({ ...packageForm, description: e.target.value })} /></label>
            <label className="text-sm md:col-span-2">Itinerary<textarea rows={3} className="mt-1 w-full px-3 py-2 border border-neutral-200 rounded-lg" value={packageForm.itinerary} onChange={(e) => setPackageForm({ ...packageForm, itinerary: e.target.value })} /></label>
            <label className="text-sm md:col-span-2">Inclusions<textarea rows={2} className="mt-1 w-full px-3 py-2 border border-neutral-200 rounded-lg" value={packageForm.inclusions} onChange={(e) => setPackageForm({ ...packageForm, inclusions: e.target.value })} /></label>
            <label className="text-sm md:col-span-2">Exclusions<textarea rows={2} className="mt-1 w-full px-3 py-2 border border-neutral-200 rounded-lg" value={packageForm.exclusions} onChange={(e) => setPackageForm({ ...packageForm, exclusions: e.target.value })} /></label>
            <label className="text-sm md:col-span-2">Image URLs (one per line)
              <textarea rows={4} className="mt-1 w-full px-3 py-2 border border-neutral-200 rounded-lg" value={packageForm.images} onChange={(e) => setPackageForm({ ...packageForm, images: e.target.value })} />
            </label>
            <div className="md:col-span-2 border border-neutral-200 rounded-lg p-3">
              <div className="text-xs text-neutral-500 mb-2">Upload image from PC and append URL</div>
              <div className="flex gap-2">
                <input type="file" accept="image/*" className="flex-1 text-sm" onChange={(e) => setPackageUploadFile(e.target.files?.[0] ?? null)} />
                <button onClick={uploadPackageImageAndAppend} disabled={!packageUploadFile || isPending} className="inline-flex items-center gap-1 px-3 py-2 text-sm bg-neutral-900 text-white rounded-lg disabled:opacity-50"><Upload size={14} /> Upload</button>
              </div>
            </div>
          </div>
          <div className="flex justify-end gap-3 mt-5">
            <button onClick={() => setPackageModal(null)} className="px-4 py-2 text-sm">Cancel</button>
            <button disabled={isPending} onClick={() => startTransition(async () => {
              const fd = new FormData();
              if (packageModal !== "new") fd.append("id", (packageModal as PackageRow).id);
              Object.entries(packageForm).forEach(([k, v]) => fd.append(k, String(v)));
              const res = await saveTourPackageAction(fd);
              if (res.ok) {
                show("ok", "Package saved");
                setPackageModal(null);
              } else {
                show("err", res.error || "Failed");
              }
            })} className="px-4 py-2 bg-navy-700 text-white text-sm rounded-lg">{isPending ? <Loader2 size={14} className="animate-spin" /> : "Save"}</button>
          </div>
        </Modal>
      )}

      {countryModal && (
        <Modal title={countryModal === "new" ? "Add Country" : "Edit Country"} onClose={() => setCountryModal(null)}>
          <div className="space-y-4">
            <label className="text-sm block">Name<input className="mt-1 w-full px-3 py-2 border border-neutral-200 rounded-lg" value={countryForm.name} onChange={(e) => setCountryForm({ ...countryForm, name: e.target.value })} /></label>
            <label className="text-sm block">Slug<input className="mt-1 w-full px-3 py-2 border border-neutral-200 rounded-lg" value={countryForm.slug} onChange={(e) => setCountryForm({ ...countryForm, slug: e.target.value })} /></label>
          </div>
          <div className="flex justify-end gap-3 mt-5">
            <button onClick={() => setCountryModal(null)} className="px-4 py-2 text-sm">Cancel</button>
            <button disabled={isPending} onClick={() => startTransition(async () => {
              const fd = new FormData();
              if (countryModal !== "new") fd.append("id", (countryModal as Country).id);
              fd.append("name", countryForm.name);
              fd.append("slug", countryForm.slug);
              const res = await saveTourCountryAction(fd);
              if (res.ok) {
                show("ok", "Country saved");
                setCountryModal(null);
              } else {
                show("err", res.error || "Failed");
              }
            })} className="px-4 py-2 bg-navy-700 text-white text-sm rounded-lg">{isPending ? <Loader2 size={14} className="animate-spin" /> : "Save"}</button>
          </div>
        </Modal>
      )}

      {cityModal && (
        <Modal title={cityModal === "new" ? "Add City" : "Edit City"} onClose={() => setCityModal(null)}>
          <div className="space-y-4">
            <label className="text-sm block">Name<input className="mt-1 w-full px-3 py-2 border border-neutral-200 rounded-lg" value={cityForm.name} onChange={(e) => setCityForm({ ...cityForm, name: e.target.value })} /></label>
            <label className="text-sm block">Slug<input className="mt-1 w-full px-3 py-2 border border-neutral-200 rounded-lg" value={cityForm.slug} onChange={(e) => setCityForm({ ...cityForm, slug: e.target.value })} /></label>
            <label className="text-sm block">Country
              <select className="mt-1 w-full px-3 py-2 border border-neutral-200 rounded-lg" value={cityForm.countryId} onChange={(e) => setCityForm({ ...cityForm, countryId: e.target.value })}>
                <option value="">Select Country</option>
                {countries.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
              </select>
            </label>
          </div>
          <div className="flex justify-end gap-3 mt-5">
            <button onClick={() => setCityModal(null)} className="px-4 py-2 text-sm">Cancel</button>
            <button disabled={isPending} onClick={() => startTransition(async () => {
              const fd = new FormData();
              if (cityModal !== "new") fd.append("id", (cityModal as City).id);
              fd.append("name", cityForm.name);
              fd.append("slug", cityForm.slug);
              fd.append("countryId", cityForm.countryId);
              const res = await saveTourCityAction(fd);
              if (res.ok) {
                show("ok", "City saved");
                setCityModal(null);
              } else {
                show("err", res.error || "Failed");
              }
            })} className="px-4 py-2 bg-navy-700 text-white text-sm rounded-lg">{isPending ? <Loader2 size={14} className="animate-spin" /> : "Save"}</button>
          </div>
        </Modal>
      )}

      {slideModal && (
        <Modal title={slideModal === "new" ? "Add Slide" : "Edit Slide"} onClose={() => setSlideModal(null)}>
          <div className="grid md:grid-cols-2 gap-4">
            <label className="text-sm md:col-span-2">Image URL<input className="mt-1 w-full px-3 py-2 border border-neutral-200 rounded-lg" value={slideForm.imageUrl} onChange={(e) => setSlideForm({ ...slideForm, imageUrl: e.target.value })} /></label>
            <label className="text-sm md:col-span-2">Or Upload Image<input type="file" accept="image/*" className="mt-1 w-full" onChange={(e) => setSlideFile(e.target.files?.[0] ?? null)} /></label>
            <label className="text-sm">Title<input className="mt-1 w-full px-3 py-2 border border-neutral-200 rounded-lg" value={slideForm.title} onChange={(e) => setSlideForm({ ...slideForm, title: e.target.value })} /></label>
            <label className="text-sm">Subtitle<input className="mt-1 w-full px-3 py-2 border border-neutral-200 rounded-lg" value={slideForm.subtitle} onChange={(e) => setSlideForm({ ...slideForm, subtitle: e.target.value })} /></label>
            <label className="text-sm">CTA Text<input className="mt-1 w-full px-3 py-2 border border-neutral-200 rounded-lg" value={slideForm.ctaText} onChange={(e) => setSlideForm({ ...slideForm, ctaText: e.target.value })} /></label>
            <label className="text-sm">CTA Link<input className="mt-1 w-full px-3 py-2 border border-neutral-200 rounded-lg" value={slideForm.ctaLink} onChange={(e) => setSlideForm({ ...slideForm, ctaLink: e.target.value })} /></label>
            <label className="text-sm">Sort Order<input type="number" className="mt-1 w-full px-3 py-2 border border-neutral-200 rounded-lg" value={slideForm.sortOrder} onChange={(e) => setSlideForm({ ...slideForm, sortOrder: Number(e.target.value) || 0 })} /></label>
            <label className="text-sm">Active
              <select className="mt-1 w-full px-3 py-2 border border-neutral-200 rounded-lg" value={String(slideForm.isActive)} onChange={(e) => setSlideForm({ ...slideForm, isActive: e.target.value === "true" })}>
                <option value="true">Yes</option>
                <option value="false">No</option>
              </select>
            </label>
          </div>
          <div className="flex justify-end gap-3 mt-5">
            <button onClick={() => setSlideModal(null)} className="px-4 py-2 text-sm">Cancel</button>
            <button disabled={isPending} onClick={() => startTransition(async () => {
              const fd = new FormData();
              if (slideModal !== "new") fd.append("id", (slideModal as Slide).id);
              Object.entries(slideForm).forEach(([k, v]) => fd.append(k, String(v)));
              if (slideFile) fd.append("imageFile", slideFile);
              const res = await saveTourSlideAction(fd);
              if (res.ok) {
                show("ok", "Slide saved");
                setSlideModal(null);
              } else {
                show("err", res.error || "Failed");
              }
            })} className="px-4 py-2 bg-navy-700 text-white text-sm rounded-lg">{isPending ? <Loader2 size={14} className="animate-spin" /> : "Save"}</button>
          </div>
        </Modal>
      )}
    </div>
  );
}