"use client";

import { useMemo, useState, useTransition } from "react";
import { Plus, Pencil, Trash2, Loader2, MapPinned, Building2, Images, Inbox } from "lucide-react";
import {
  saveTicketCountryAction,
  deleteTicketCountryAction,
  saveTicketCityAction,
  deleteTicketCityAction,
  saveTicketSlideAction,
  deleteTicketSlideAction,
  updateTicketRequestStatusAction,
  deleteTicketRequestAction,
} from "./actions";

type CountryRow = {
  id: string;
  name: string;
  slug: string;
  isActive: boolean;
};

type CityRow = {
  id: string;
  countryId: string;
  name: string;
  slug: string;
  isActive: boolean;
  country: { id: string; name: string };
};

type SlideRow = {
  id: string;
  imageUrl: string;
  title: string | null;
  subtitle: string | null;
  ctaText: string | null;
  ctaLink: string | null;
  sortOrder: number;
  isActive: boolean;
};

type RequestRow = {
  id: string;
  tripType: "one_way" | "return_trip";
  departureDate: string;
  returnDate: string | null;
  passengers: number;
  cabinClass: string | null;
  name: string;
  email: string;
  phone: string | null;
  message: string | null;
  status: "new" | "in_progress" | "resolved";
  createdAt: string;
  fromCountry: { id: string; name: string };
  fromCity: { id: string; name: string };
  toCountry: { id: string; name: string };
  toCity: { id: string; name: string };
  user: { id: string; name: string; email: string } | null;
};

const emptyCountry = { id: "", name: "", slug: "", isActive: true };
const emptyCity = { id: "", countryId: "", name: "", slug: "", isActive: true };
const emptySlide = {
  id: "",
  imageUrl: "",
  title: "",
  subtitle: "",
  ctaText: "",
  ctaLink: "#ticket-request",
  sortOrder: "0",
  isActive: true,
};

export default function AdminTicketsClient({
  countries,
  cities,
  slides,
  requests,
}: {
  countries: CountryRow[];
  cities: CityRow[];
  slides: SlideRow[];
  requests: RequestRow[];
}) {
  const [tab, setTab] = useState<"countries" | "cities" | "slider" | "requests">("countries");
  const [pending, startTransition] = useTransition();

  const [countryForm, setCountryForm] = useState(emptyCountry);
  const [cityForm, setCityForm] = useState(emptyCity);
  const [slideForm, setSlideForm] = useState(emptySlide);

  const orderedRequests = useMemo(
    () => [...requests].sort((a, b) => +new Date(b.createdAt) - +new Date(a.createdAt)),
    [requests]
  );

  function onSaveCountry(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const fd = new FormData();
    Object.entries(countryForm).forEach(([k, v]) => fd.set(k, String(v)));

    startTransition(async () => {
      const res = await saveTicketCountryAction(fd);
      if (res.ok) setCountryForm(emptyCountry);
      else alert(res.error || "Failed to save country");
    });
  }

  function onSaveCity(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const fd = new FormData();
    Object.entries(cityForm).forEach(([k, v]) => fd.set(k, String(v)));

    startTransition(async () => {
      const res = await saveTicketCityAction(fd);
      if (res.ok) setCityForm(emptyCity);
      else alert(res.error || "Failed to save city");
    });
  }

  function onSaveSlide(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const form = e.currentTarget;
    const fd = new FormData(form);
    fd.set("id", slideForm.id);
    fd.set("isActive", String(slideForm.isActive));

    startTransition(async () => {
      const res = await saveTicketSlideAction(fd);
      if (res.ok) {
        setSlideForm(emptySlide);
        form.reset();
      } else {
        alert(res.error || "Failed to save slide");
      }
    });
  }

  return (
    <div className="p-8 space-y-6">
      <div>
        <h1 className="text-2xl font-bold text-neutral-900">Tickets CMS & CRM</h1>
        <p className="text-sm text-neutral-500 mt-1">Manage ticket countries, cities, slider, and manual booking requests.</p>
      </div>

      <div className="flex flex-wrap gap-2">
        {[
          { key: "countries", label: "Countries", icon: MapPinned },
          { key: "cities", label: "Cities", icon: Building2 },
          { key: "slider", label: "Hero Slider", icon: Images },
          { key: "requests", label: "Requests", icon: Inbox },
        ].map(({ key, label, icon: Icon }) => (
          <button
            key={key}
            onClick={() => setTab(key as "countries" | "cities" | "slider" | "requests")}
            className={`inline-flex items-center gap-2 px-4 py-2 rounded-xl text-sm border ${
              tab === key ? "bg-navy-700 text-white border-navy-700" : "bg-white text-neutral-700 border-neutral-200 hover:border-navy-300"
            }`}
          >
            <Icon size={15} /> {label}
          </button>
        ))}
      </div>

      {tab === "countries" && (
        <div className="grid lg:grid-cols-5 gap-6">
          <form onSubmit={onSaveCountry} className="lg:col-span-2 bg-white border border-neutral-200 rounded-2xl p-5 space-y-3">
            <h2 className="font-semibold text-neutral-900">{countryForm.id ? "Edit Country" : "Add Country"}</h2>
            <input value={countryForm.id} readOnly hidden name="id" />
            <input value={countryForm.name} onChange={(e) => setCountryForm((s) => ({ ...s, name: e.target.value }))} placeholder="Country name" className="w-full border border-neutral-300 rounded-lg px-3 py-2 text-sm" required />
            <input value={countryForm.slug} onChange={(e) => setCountryForm((s) => ({ ...s, slug: e.target.value }))} placeholder="Slug (optional)" className="w-full border border-neutral-300 rounded-lg px-3 py-2 text-sm" />
            <select value={String(countryForm.isActive)} onChange={(e) => setCountryForm((s) => ({ ...s, isActive: e.target.value === "true" }))} className="w-full border border-neutral-300 rounded-lg px-3 py-2 text-sm">
              <option value="true">Active</option>
              <option value="false">Inactive</option>
            </select>
            <div className="flex gap-2">
              <button type="submit" disabled={pending} className="inline-flex items-center gap-2 px-4 py-2 bg-navy-700 text-white rounded-lg text-sm">
                {pending ? <Loader2 size={14} className="animate-spin" /> : <Plus size={14} />} Save Country
              </button>
              <button type="button" onClick={() => setCountryForm(emptyCountry)} className="px-4 py-2 border border-neutral-300 rounded-lg text-sm">Reset</button>
            </div>
          </form>

          <div className="lg:col-span-3 bg-white border border-neutral-200 rounded-2xl overflow-hidden">
            <table className="w-full text-sm">
              <thead className="bg-neutral-50 text-xs uppercase text-neutral-500">
                <tr>
                  <th className="text-left px-4 py-3">Country</th>
                  <th className="text-left px-4 py-3">Slug</th>
                  <th className="text-left px-4 py-3">Status</th>
                  <th className="text-left px-4 py-3">Actions</th>
                </tr>
              </thead>
              <tbody>
                {countries.map((row) => (
                  <tr key={row.id} className="border-t border-neutral-100">
                    <td className="px-4 py-3 font-medium">{row.name}</td>
                    <td className="px-4 py-3 text-neutral-500">{row.slug}</td>
                    <td className="px-4 py-3">{row.isActive ? "Active" : "Inactive"}</td>
                    <td className="px-4 py-3">
                      <div className="flex gap-2">
                        <button onClick={() => setCountryForm({ id: row.id, name: row.name, slug: row.slug, isActive: row.isActive })} className="p-2 border border-neutral-300 rounded-lg"><Pencil size={14} /></button>
                        <button
                          onClick={() => startTransition(async () => {
                            if (!confirm(`Delete ${row.name}?`)) return;
                            const res = await deleteTicketCountryAction(row.id);
                            if (!res.ok) alert(res.error || "Failed to delete");
                          })}
                          className="p-2 border border-red-200 text-red-600 rounded-lg"
                        >
                          <Trash2 size={14} />
                        </button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}

      {tab === "cities" && (
        <div className="grid lg:grid-cols-5 gap-6">
          <form onSubmit={onSaveCity} className="lg:col-span-2 bg-white border border-neutral-200 rounded-2xl p-5 space-y-3">
            <h2 className="font-semibold text-neutral-900">{cityForm.id ? "Edit City" : "Add City"}</h2>
            <input value={cityForm.id} readOnly hidden name="id" />
            <select value={cityForm.countryId} onChange={(e) => setCityForm((s) => ({ ...s, countryId: e.target.value }))} className="w-full border border-neutral-300 rounded-lg px-3 py-2 text-sm" required>
              <option value="">Select country</option>
              {countries.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
            </select>
            <input value={cityForm.name} onChange={(e) => setCityForm((s) => ({ ...s, name: e.target.value }))} placeholder="City name" className="w-full border border-neutral-300 rounded-lg px-3 py-2 text-sm" required />
            <input value={cityForm.slug} onChange={(e) => setCityForm((s) => ({ ...s, slug: e.target.value }))} placeholder="Slug (optional)" className="w-full border border-neutral-300 rounded-lg px-3 py-2 text-sm" />
            <select value={String(cityForm.isActive)} onChange={(e) => setCityForm((s) => ({ ...s, isActive: e.target.value === "true" }))} className="w-full border border-neutral-300 rounded-lg px-3 py-2 text-sm">
              <option value="true">Active</option>
              <option value="false">Inactive</option>
            </select>
            <div className="flex gap-2">
              <button type="submit" disabled={pending} className="inline-flex items-center gap-2 px-4 py-2 bg-navy-700 text-white rounded-lg text-sm">
                {pending ? <Loader2 size={14} className="animate-spin" /> : <Plus size={14} />} Save City
              </button>
              <button type="button" onClick={() => setCityForm(emptyCity)} className="px-4 py-2 border border-neutral-300 rounded-lg text-sm">Reset</button>
            </div>
          </form>

          <div className="lg:col-span-3 bg-white border border-neutral-200 rounded-2xl overflow-hidden">
            <table className="w-full text-sm">
              <thead className="bg-neutral-50 text-xs uppercase text-neutral-500">
                <tr>
                  <th className="text-left px-4 py-3">City</th>
                  <th className="text-left px-4 py-3">Country</th>
                  <th className="text-left px-4 py-3">Status</th>
                  <th className="text-left px-4 py-3">Actions</th>
                </tr>
              </thead>
              <tbody>
                {cities.map((row) => (
                  <tr key={row.id} className="border-t border-neutral-100">
                    <td className="px-4 py-3 font-medium">{row.name}</td>
                    <td className="px-4 py-3 text-neutral-500">{row.country.name}</td>
                    <td className="px-4 py-3">{row.isActive ? "Active" : "Inactive"}</td>
                    <td className="px-4 py-3">
                      <div className="flex gap-2">
                        <button
                          onClick={() => setCityForm({ id: row.id, countryId: row.countryId, name: row.name, slug: row.slug, isActive: row.isActive })}
                          className="p-2 border border-neutral-300 rounded-lg"
                        >
                          <Pencil size={14} />
                        </button>
                        <button
                          onClick={() => startTransition(async () => {
                            if (!confirm(`Delete ${row.name}?`)) return;
                            const res = await deleteTicketCityAction(row.id);
                            if (!res.ok) alert(res.error || "Failed to delete");
                          })}
                          className="p-2 border border-red-200 text-red-600 rounded-lg"
                        >
                          <Trash2 size={14} />
                        </button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}

      {tab === "slider" && (
        <div className="grid lg:grid-cols-5 gap-6">
          <form onSubmit={onSaveSlide} className="lg:col-span-2 bg-white border border-neutral-200 rounded-2xl p-5 space-y-3">
            <h2 className="font-semibold text-neutral-900">{slideForm.id ? "Edit Slide" : "Add Slide"}</h2>
            <input value={slideForm.id} readOnly hidden name="id" />
            <input name="imageUrl" value={slideForm.imageUrl} onChange={(e) => setSlideForm((s) => ({ ...s, imageUrl: e.target.value }))} placeholder="Image URL" className="w-full border border-neutral-300 rounded-lg px-3 py-2 text-sm" />
            <input name="imageFile" type="file" accept="image/*" className="w-full border border-neutral-300 rounded-lg px-3 py-2 text-sm" />
            <input name="title" value={slideForm.title} onChange={(e) => setSlideForm((s) => ({ ...s, title: e.target.value }))} placeholder="Title" className="w-full border border-neutral-300 rounded-lg px-3 py-2 text-sm" />
            <textarea name="subtitle" value={slideForm.subtitle} onChange={(e) => setSlideForm((s) => ({ ...s, subtitle: e.target.value }))} rows={3} placeholder="Subtitle" className="w-full border border-neutral-300 rounded-lg px-3 py-2 text-sm" />
            <div className="grid grid-cols-2 gap-2">
              <input name="ctaText" value={slideForm.ctaText} onChange={(e) => setSlideForm((s) => ({ ...s, ctaText: e.target.value }))} placeholder="CTA text" className="w-full border border-neutral-300 rounded-lg px-3 py-2 text-sm" />
              <input name="ctaLink" value={slideForm.ctaLink} onChange={(e) => setSlideForm((s) => ({ ...s, ctaLink: e.target.value }))} placeholder="CTA link" className="w-full border border-neutral-300 rounded-lg px-3 py-2 text-sm" />
            </div>
            <div className="grid grid-cols-2 gap-2">
              <input name="sortOrder" type="number" value={slideForm.sortOrder} onChange={(e) => setSlideForm((s) => ({ ...s, sortOrder: e.target.value }))} placeholder="Sort order" className="w-full border border-neutral-300 rounded-lg px-3 py-2 text-sm" />
              <select value={String(slideForm.isActive)} onChange={(e) => setSlideForm((s) => ({ ...s, isActive: e.target.value === "true" }))} className="w-full border border-neutral-300 rounded-lg px-3 py-2 text-sm">
                <option value="true">Active</option>
                <option value="false">Inactive</option>
              </select>
            </div>
            <div className="flex gap-2">
              <button type="submit" disabled={pending} className="inline-flex items-center gap-2 px-4 py-2 bg-navy-700 text-white rounded-lg text-sm">
                {pending ? <Loader2 size={14} className="animate-spin" /> : <Plus size={14} />} Save Slide
              </button>
              <button type="button" onClick={() => setSlideForm(emptySlide)} className="px-4 py-2 border border-neutral-300 rounded-lg text-sm">Reset</button>
            </div>
          </form>

          <div className="lg:col-span-3 bg-white border border-neutral-200 rounded-2xl overflow-hidden">
            <table className="w-full text-sm">
              <thead className="bg-neutral-50 text-xs uppercase text-neutral-500">
                <tr>
                  <th className="text-left px-4 py-3">Slide</th>
                  <th className="text-left px-4 py-3">Order</th>
                  <th className="text-left px-4 py-3">Status</th>
                  <th className="text-left px-4 py-3">Actions</th>
                </tr>
              </thead>
              <tbody>
                {slides.map((row) => (
                  <tr key={row.id} className="border-t border-neutral-100">
                    <td className="px-4 py-3">
                      <div className="font-medium text-neutral-900">{row.title || "Untitled"}</div>
                      <div className="text-xs text-neutral-500">{row.imageUrl}</div>
                    </td>
                    <td className="px-4 py-3 text-neutral-600">{row.sortOrder}</td>
                    <td className="px-4 py-3">{row.isActive ? "Active" : "Inactive"}</td>
                    <td className="px-4 py-3">
                      <div className="flex gap-2">
                        <button onClick={() => setSlideForm({ id: row.id, imageUrl: row.imageUrl, title: row.title || "", subtitle: row.subtitle || "", ctaText: row.ctaText || "", ctaLink: row.ctaLink || "", sortOrder: String(row.sortOrder), isActive: row.isActive })} className="p-2 border border-neutral-300 rounded-lg"><Pencil size={14} /></button>
                        <button onClick={() => startTransition(async () => { if (!confirm("Delete this slide?")) return; await deleteTicketSlideAction(row.id); })} className="p-2 border border-red-200 text-red-600 rounded-lg"><Trash2 size={14} /></button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}

      {tab === "requests" && (
        <div className="bg-white border border-neutral-200 rounded-2xl overflow-hidden">
          <table className="w-full text-sm">
            <thead className="bg-neutral-50 text-xs uppercase text-neutral-500">
              <tr>
                <th className="text-left px-4 py-3">Customer</th>
                <th className="text-left px-4 py-3">Route</th>
                <th className="text-left px-4 py-3">Trip</th>
                <th className="text-left px-4 py-3">Date</th>
                <th className="text-left px-4 py-3">Status</th>
                <th className="text-left px-4 py-3">Actions</th>
              </tr>
            </thead>
            <tbody>
              {orderedRequests.map((row) => (
                <tr key={row.id} className="border-t border-neutral-100 align-top">
                  <td className="px-4 py-3">
                    <div className="font-medium text-neutral-900">{row.name}</div>
                    <div className="text-xs text-neutral-500">{row.email}</div>
                    {row.phone && <div className="text-xs text-neutral-500">{row.phone}</div>}
                  </td>
                  <td className="px-4 py-3 text-neutral-700">
                    {row.fromCity.name}, {row.fromCountry.name}<br />
                    to {row.toCity.name}, {row.toCountry.name}
                  </td>
                  <td className="px-4 py-3">
                    <div>{row.tripType === "return_trip" ? "Return" : "One Way"}</div>
                    <div className="text-xs text-neutral-500">{row.passengers} pax · {row.cabinClass || "-"}</div>
                  </td>
                  <td className="px-4 py-3 text-neutral-700">
                    {new Date(row.departureDate).toLocaleDateString("en-MY")}
                    {row.returnDate ? ` - ${new Date(row.returnDate).toLocaleDateString("en-MY")}` : ""}
                  </td>
                  <td className="px-4 py-3">
                    <select
                      value={row.status}
                      onChange={(e) => startTransition(async () => { await updateTicketRequestStatusAction(row.id, e.target.value as "new" | "in_progress" | "resolved"); })}
                      className="border border-neutral-300 rounded-lg px-2 py-1.5 text-xs"
                    >
                      <option value="new">New</option>
                      <option value="in_progress">In Progress</option>
                      <option value="resolved">Resolved</option>
                    </select>
                  </td>
                  <td className="px-4 py-3 space-y-1">
                    {row.message && <div className="text-xs text-neutral-600 max-w-[260px] whitespace-pre-wrap">{row.message}</div>}
                    <button
                      onClick={() => startTransition(async () => {
                        if (!confirm("Delete this request?")) return;
                        await deleteTicketRequestAction(row.id);
                      })}
                      className="inline-flex items-center gap-1 text-xs px-2 py-1 rounded border border-red-200 text-red-600"
                    >
                      <Trash2 size={12} /> Delete
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}