"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { apiFetch } from "@/lib/apiClient";
import { formatNaira, formatDate, getProgressPercent } from "@/lib/utils";
import type { Package } from "@/types";

export default function AdminPackagesPage() {
  const router = useRouter();
  const [packages, setPackages] = useState<Package[]>([]);
  const [loading, setLoading] = useState(true);
  const [showForm, setShowForm] = useState(false);
  const [editPkg, setEditPkg] = useState<Package | null>(null);
  const [saving, setSaving] = useState(false);
  const [formError, setFormError] = useState("");

  // Form fields
  const [name, setName] = useState("");
  const [type, setType] = useState<"HAJJ" | "UMRAH">("UMRAH");
  const [description, setDescription] = useState("");
  const [totalCost, setTotalCost] = useState("");
  const [departureDate, setDepartureDate] = useState("");
  const [returnDate, setReturnDate] = useState("");
  const [slotsAvailable, setSlotsAvailable] = useState("");
  const [inclusions, setInclusions] = useState("");
  const [status, setStatus] = useState<"DRAFT" | "PUBLISHED">("DRAFT");

  useEffect(() => {
    apiFetch<{ packages: Package[]; total: number }>("/admin/packages")
      .then((d) => setPackages(d.packages ?? []))
      .catch((err) => { if (err?.status === 401 || err?.status === 403) router.replace("/admin/login"); })
      .finally(() => setLoading(false));
  }, [router]);

  function openCreate() {
    setEditPkg(null);
    setName(""); setType("UMRAH"); setDescription(""); setTotalCost("");
    setDepartureDate(""); setReturnDate(""); setSlotsAvailable(""); setInclusions(""); setStatus("DRAFT");
    setFormError("");
    setShowForm(true);
  }

  function openEdit(pkg: Package) {
    setEditPkg(pkg);
    setName(pkg.name); setType(pkg.type); setDescription(pkg.description);
    setTotalCost(String(pkg.totalCost)); setDepartureDate(pkg.departureDate.split("T")[0]);
    setReturnDate(pkg.returnDate?.split("T")[0] ?? ""); setSlotsAvailable(String(pkg.slotsAvailable));
    setInclusions(pkg.inclusions.join(", ")); setStatus(pkg.status === "PUBLISHED" ? "PUBLISHED" : "DRAFT");
    setFormError("");
    setShowForm(true);
  }

  async function handleSave(e: React.FormEvent) {
    e.preventDefault();
    setFormError("");
    setSaving(true);
    const payload = {
      name, type, description,
      totalCost: Number(totalCost),
      departureDate, returnDate: returnDate || undefined,
      slotsAvailable: Number(slotsAvailable),
      inclusions: inclusions.split(",").map((s) => s.trim()).filter(Boolean),
      status,
    };
    try {
      if (editPkg) {
        const updated = await apiFetch<Package>(`/packages/${editPkg.slug}`, { method: "PATCH", body: JSON.stringify(payload) });
        setPackages((ps) => ps.map((p) => p.id === updated.id ? updated : p));
      } else {
        const created = await apiFetch<Package>("/packages", { method: "POST", body: JSON.stringify(payload) });
        setPackages((ps) => [created, ...ps]);
      }
      setShowForm(false);
    } catch (err: any) {
      setFormError(err?.message ?? "Failed to save package");
    }
    setSaving(false);
  }

  async function toggleStatus(pkg: Package) {
    const newStatus = pkg.status === "PUBLISHED" ? "DRAFT" : "PUBLISHED";
    try {
      const updated = await apiFetch<Package>(`/packages/${pkg.slug}`, { method: "PATCH", body: JSON.stringify({ status: newStatus }) });
      setPackages((ps) => ps.map((p) => p.id === updated.id ? updated : p));
    } catch {}
  }

  return (
    <div className="p-6 max-w-7xl">
      <div className="flex items-center justify-between mb-6">
        <div>
          <h1 className="text-[#111111] font-black text-2xl" style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>Packages</h1>
          <p className="text-[#6B7280] text-sm mt-0.5">{packages.length} packages</p>
        </div>
        <button onClick={openCreate}
          className="flex items-center gap-2 px-4 py-2.5 rounded-xl text-sm font-semibold text-white"
          style={{ background: "#1C2472" }}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
          </svg>
          New Package
        </button>
      </div>

      {/* Package cards */}
      {loading ? (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {[1, 2, 3].map((i) => <div key={i} className="h-48 bg-white rounded-2xl animate-pulse" />)}
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {packages.map((pkg) => {
            const pct = getProgressPercent(pkg.slotsBooked, pkg.slotsAvailable + pkg.slotsBooked);
            const isPublished = pkg.status === "PUBLISHED";
            return (
              <div key={pkg.id} className="bg-white rounded-2xl p-5" style={{ boxShadow: "0 2px 12px rgba(0,0,0,0.04)" }}>
                <div className="flex justify-between items-start mb-3">
                  <div>
                    <span className={`text-[10px] font-bold px-2 py-0.5 rounded-full ${isPublished ? "bg-green-100 text-green-700" : "bg-gray-100 text-gray-500"}`}>
                      {pkg.status}
                    </span>
                    <span className="ml-2 text-[10px] font-bold px-2 py-0.5 rounded-full bg-[#1C2472]/10 text-[#1C2472]">
                      {pkg.type}
                    </span>
                  </div>
                </div>
                <h3 className="font-bold text-[#111111] mb-1" style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>{pkg.name}</h3>
                <p className="text-[#B8952A] font-black text-lg mb-2" style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
                  {formatNaira(pkg.totalCost)}
                </p>
                <div className="text-xs text-[#6B7280] mb-3">
                  <p>Departure: {formatDate(pkg.departureDate)}</p>
                  <p>{pkg.slotsBooked}/{pkg.slotsBooked + pkg.slotsAvailable} slots booked</p>
                </div>
                <div className="h-1.5 rounded-full bg-gray-100 mb-4">
                  <div className="h-full rounded-full bg-[#B8952A]" style={{ width: `${pct}%` }} />
                </div>
                <div className="flex gap-2">
                  <button onClick={() => openEdit(pkg)}
                    className="flex-1 py-2 rounded-lg text-xs font-semibold border border-gray-200 text-[#6B7280] hover:bg-gray-50 transition-colors">
                    Edit
                  </button>
                  <button onClick={() => toggleStatus(pkg)}
                    className="flex-1 py-2 rounded-lg text-xs font-semibold transition-colors"
                    style={isPublished
                      ? { background: "#FEF3C7", color: "#92400E" }
                      : { background: "#D1FAE5", color: "#065F46" }}>
                    {isPublished ? "Unpublish" : "Publish"}
                  </button>
                </div>
              </div>
            );
          })}
        </div>
      )}

      {/* Form modal */}
      {showForm && (
        <div className="fixed inset-0 z-50 flex items-start justify-center p-4 overflow-y-auto"
          style={{ background: "rgba(0,0,0,0.5)", backdropFilter: "blur(4px)" }}>
          <div className="bg-white rounded-2xl w-full max-w-lg my-8 p-6" style={{ boxShadow: "0 20px 60px rgba(0,0,0,0.2)" }}>
            <div className="flex items-center justify-between mb-5">
              <h2 className="font-bold text-[#111111]" style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
                {editPkg ? "Edit Package" : "New Package"}
              </h2>
              <button onClick={() => setShowForm(false)} className="text-[#9CA3AF] hover:text-[#6B7280]">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                  <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
                </svg>
              </button>
            </div>
            <form onSubmit={handleSave} className="space-y-4">
              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="text-xs font-semibold text-[#6B7280] uppercase tracking-wider block mb-1">Name</label>
                  <input value={name} onChange={(e) => setName(e.target.value)} required
                    className="w-full px-3 py-2.5 rounded-xl border border-gray-200 text-[#111111] text-sm focus:outline-none focus:border-[#1C2472]"
                    placeholder="Elite Umrah Experience" />
                </div>
                <div>
                  <label className="text-xs font-semibold text-[#6B7280] uppercase tracking-wider block mb-1">Type</label>
                  <select value={type} onChange={(e) => setType(e.target.value as "HAJJ" | "UMRAH")}
                    className="w-full px-3 py-2.5 rounded-xl border border-gray-200 text-[#111111] text-sm focus:outline-none focus:border-[#1C2472]">
                    <option value="UMRAH">Umrah</option>
                    <option value="HAJJ">Hajj</option>
                  </select>
                </div>
              </div>
              <div>
                <label className="text-xs font-semibold text-[#6B7280] uppercase tracking-wider block mb-1">Description</label>
                <textarea value={description} onChange={(e) => setDescription(e.target.value)} required rows={3}
                  className="w-full px-3 py-2.5 rounded-xl border border-gray-200 text-[#111111] text-sm focus:outline-none focus:border-[#1C2472] resize-none"
                  placeholder="Package description..." />
              </div>
              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="text-xs font-semibold text-[#6B7280] uppercase tracking-wider block mb-1">Total Cost (₦)</label>
                  <input type="number" value={totalCost} onChange={(e) => setTotalCost(e.target.value)} required min="1"
                    className="w-full px-3 py-2.5 rounded-xl border border-gray-200 text-[#111111] text-sm focus:outline-none focus:border-[#1C2472]"
                    placeholder="2600000" />
                </div>
                <div>
                  <label className="text-xs font-semibold text-[#6B7280] uppercase tracking-wider block mb-1">Available Slots</label>
                  <input type="number" value={slotsAvailable} onChange={(e) => setSlotsAvailable(e.target.value)} required min="1"
                    className="w-full px-3 py-2.5 rounded-xl border border-gray-200 text-[#111111] text-sm focus:outline-none focus:border-[#1C2472]"
                    placeholder="30" />
                </div>
              </div>
              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="text-xs font-semibold text-[#6B7280] uppercase tracking-wider block mb-1">Departure Date</label>
                  <input type="date" value={departureDate} onChange={(e) => setDepartureDate(e.target.value)} required
                    className="w-full px-3 py-2.5 rounded-xl border border-gray-200 text-[#111111] text-sm focus:outline-none focus:border-[#1C2472]" />
                </div>
                <div>
                  <label className="text-xs font-semibold text-[#6B7280] uppercase tracking-wider block mb-1">Return Date</label>
                  <input type="date" value={returnDate} onChange={(e) => setReturnDate(e.target.value)}
                    className="w-full px-3 py-2.5 rounded-xl border border-gray-200 text-[#111111] text-sm focus:outline-none focus:border-[#1C2472]" />
                </div>
              </div>
              <div>
                <label className="text-xs font-semibold text-[#6B7280] uppercase tracking-wider block mb-1">
                  Inclusions <span className="normal-case font-normal">(comma-separated)</span>
                </label>
                <input value={inclusions} onChange={(e) => setInclusions(e.target.value)}
                  className="w-full px-3 py-2.5 rounded-xl border border-gray-200 text-[#111111] text-sm focus:outline-none focus:border-[#1C2472]"
                  placeholder="Flight, 5★ Hotel, Visa, Transport" />
              </div>
              <div>
                <label className="text-xs font-semibold text-[#6B7280] uppercase tracking-wider block mb-1">Status</label>
                <select value={status} onChange={(e) => setStatus(e.target.value as "DRAFT" | "PUBLISHED")}
                  className="w-full px-3 py-2.5 rounded-xl border border-gray-200 text-[#111111] text-sm focus:outline-none focus:border-[#1C2472]">
                  <option value="DRAFT">Draft</option>
                  <option value="PUBLISHED">Published</option>
                </select>
              </div>

              {formError && (
                <div className="p-3 rounded-xl bg-red-50 border border-red-200 text-red-600 text-sm">{formError}</div>
              )}

              <div className="flex gap-3 pt-2">
                <button type="button" onClick={() => setShowForm(false)}
                  className="flex-1 py-3 rounded-xl border border-gray-200 text-[#6B7280] text-sm font-semibold hover:bg-gray-50">
                  Cancel
                </button>
                <button type="submit" disabled={saving}
                  className="flex-1 py-3 rounded-xl text-white text-sm font-semibold disabled:opacity-50"
                  style={{ background: "#1C2472" }}>
                  {saving ? "Saving..." : editPkg ? "Save Changes" : "Create Package"}
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
}