"use client";

import { useEffect, useState, useCallback } from "react";
import Image from "next/image";
import {
  Image as ImageIcon,
  Plus,
  Trash2,
  Edit3,
  ToggleLeft,
  ToggleRight,
  GripVertical,
  Loader2,
  Eye,
  EyeOff,
  X,
  Save,
  AlertCircle,
  MousePointerClick,
  TrendingUp,
} from "lucide-react";
import { cn } from "@/lib/utils";
import ImageUpload from "@/components/admin/ImageUpload";
import { resolveUploadUrl } from "@/lib/uploadUrl";
import { getAdminToken } from "@/lib/adminAuth";

const API = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000";

interface Banner {
  id: string;
  title: string;
  subtitle?: string;
  description?: string;
  imageDesktop: string;
  imageMobile?: string;
  thumbnailImage?: string;
  buttonText?: string;
  buttonUrl?: string;
  priority: number;
  isActive: boolean;
  createdAt?: string;
  // Analytics
  views?:  number;
  clicks?: number;
  ctr?:    number;
}

interface AnalyticsSummary {
  totalViews:  number;
  totalClicks: number;
  overallCtr:  number;
}

const EMPTY: Partial<Banner> = {
  title: "",
  subtitle: "",
  description: "",
  imageDesktop: "",
  imageMobile: "",
  thumbnailImage: "",
  buttonText: "",
  buttonUrl: "",
  priority: 0,
  isActive: true,
};

async function apiFetch(path: string, opts: RequestInit = {}) {
  const token = getAdminToken();
  const res = await fetch(`${API}${path}`, {
    headers: {
      "Content-Type": "application/json",
      ...(token ? { Authorization: `Bearer ${token}` } : {}),
      ...((opts.headers as Record<string, string>) || {}),
    },
    ...opts,
  });
  if (!res.ok) throw new Error(await res.text());
  if (res.status === 204) return null;
  return res.json();
}

// ── Form modal ─────────────────────────────────────────────────────────────────

function BannerModal({
  initial,
  onSave,
  onClose,
}: {
  initial: Partial<Banner>;
  onSave: (data: Partial<Banner>) => Promise<void>;
  onClose: () => void;
}) {
  const [form, setForm] = useState<Partial<Banner>>(initial);
  const [saving, setSaving] = useState(false);
  const [error,  setError]  = useState("");

  const set = (k: keyof Banner, v: string | number | boolean) =>
    setForm((f) => ({ ...f, [k]: v }));

  async function submit(e: React.FormEvent) {
    e.preventDefault();
    if (!form.title?.trim())       { setError("Title is required"); return; }
    if (!form.imageDesktop?.trim()){ setError("Desktop image is required — please upload one"); return; }
    setSaving(true); setError("");
    try   { await onSave(form); onClose(); }
    catch (err: unknown) { setError(err instanceof Error ? err.message : "Save failed"); }
    finally { setSaving(false); }
  }

  return (
    <div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-0 sm:p-4 pt-[env(safe-area-inset-top,0px)] pb-[env(safe-area-inset-bottom,0px)] bg-black/50 backdrop-blur-sm">
      <div className="bg-white rounded-t-3xl sm:rounded-3xl w-full max-w-xl max-h-[min(100dvh,100%)] shadow-2xl overflow-hidden flex flex-col min-w-0">
        {/* Header */}
        <div className="flex items-center justify-between gap-3 px-4 sm:px-6 py-4 border-b border-gray-100 shrink-0 min-w-0">
          <h2 className="text-base font-black text-gray-900 min-w-0 truncate">
            {initial.id ? "Edit Banner" : "Add Banner"}
          </h2>
          <button onClick={onClose} className="p-2.5 min-h-11 min-w-11 flex items-center justify-center rounded-lg hover:bg-gray-100 transition-colors shrink-0" aria-label="Close">
            <X className="w-4 h-4 text-gray-500" />
          </button>
        </div>

        <form onSubmit={submit} className="p-4 sm:p-6 space-y-5 overflow-y-auto min-h-0 min-w-0 flex-1">
          {error && (
            <div className="flex items-start gap-2 bg-red-50 border border-red-200 rounded-xl px-3 py-2.5 text-sm text-red-700 min-w-0">
              <AlertCircle className="w-4 h-4 shrink-0 mt-0.5" />
              <span className="min-w-0 break-words">{error}</span>
            </div>
          )}

          {/* Text fields */}
          <Field label="Title *" value={form.title || ""} onChange={(v) => set("title", v)}
                 placeholder="e.g. Tata Nexon Launch Special" />
          <Field label="Subtitle" value={form.subtitle || ""} onChange={(v) => set("subtitle", v)}
                 placeholder="e.g. India's #1 Electric SUV" />
          <Field label="Description" value={form.description || ""} onChange={(v) => set("description", v)}
                 placeholder="Short marketing copy shown below the title" />

          {/* Desktop image upload */}
          <ImageUpload
            label="Desktop Image *"
            value={form.imageDesktop || ""}
            category="banner"
            variant="desktop"
            aspectRatio="16/5"
            onChange={(r) => setForm((f) => ({
              ...f,
              imageDesktop:   r.desktopUrl,
              imageMobile:    f.imageMobile || r.mobileUrl,
              thumbnailImage: r.thumbnailUrl,
            }))}
            onClear={() => setForm((f) => ({ ...f, imageDesktop: "", thumbnailImage: "" }))}
          />

          {/* Mobile image upload (optional) */}
          <ImageUpload
            label="Mobile Image (optional — auto-generated if blank)"
            value={form.imageMobile || ""}
            category="banner"
            variant="mobile"
            aspectRatio="4/3"
            onChange={(r) => set("imageMobile", r.mobileUrl)}
            onClear={() => set("imageMobile", "")}
          />

          <Field label="Button Text" value={form.buttonText || ""} onChange={(v) => set("buttonText", v)}
                 placeholder="e.g. Explore Now" />
          <Field label="Button URL" value={form.buttonUrl || ""} onChange={(v) => set("buttonUrl", v)}
                 placeholder="/cars?brand=Tata" />

          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 min-w-0">
            <div className="min-w-0">
              <label className="text-xs font-bold text-gray-600 mb-1 block">Priority (lower = first)</label>
              <input
                type="number"
                value={form.priority ?? 0}
                onChange={(e) => set("priority", parseInt(e.target.value) || 0)}
                className="w-full min-w-0 px-3 py-2.5 min-h-11 text-sm border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500"
              />
            </div>
            <div className="min-w-0">
              <label className="text-xs font-bold text-gray-600 mb-1 block">Status</label>
              <button
                type="button"
                onClick={() => set("isActive", !form.isActive)}
                className={cn(
                  "flex items-center gap-2 px-3 py-2.5 min-h-11 rounded-xl text-sm font-semibold border transition-colors w-full",
                  form.isActive
                    ? "border-green-200 bg-green-50 text-green-700"
                    : "border-gray-200 bg-gray-50 text-gray-500"
                )}
              >
                {form.isActive ? <ToggleRight className="w-4 h-4 shrink-0" /> : <ToggleLeft className="w-4 h-4 shrink-0" />}
                {form.isActive ? "Active" : "Inactive"}
              </button>
            </div>
          </div>

          <div className="flex flex-col-reverse sm:flex-row gap-3 pt-2">
            <button type="button" onClick={onClose}
              className="flex-1 py-2.5 min-h-11 rounded-xl border border-gray-200 text-sm font-semibold text-gray-600 hover:bg-gray-50 transition-colors"
            >Cancel</button>
            <button type="submit" disabled={saving}
              className="flex-1 py-2.5 min-h-11 rounded-xl bg-gradient-to-r from-blue-600 to-cyan-500 text-white text-sm font-black hover:opacity-90 disabled:opacity-50 transition-all flex items-center justify-center gap-2"
            >
              {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
              {saving ? "Saving…" : "Save Banner"}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}

function Field({ label, value, onChange, placeholder }: {
  label: string; value: string;
  onChange: (v: string) => void; placeholder?: string;
}) {
  return (
    <div className="min-w-0">
      <label className="text-xs font-bold text-gray-600 mb-1 block">{label}</label>
      <input type="text" value={value} onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        className="w-full min-w-0 px-3 py-2.5 min-h-11 text-sm border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 placeholder-gray-300"
      />
    </div>
  );
}

// ── Main page ──────────────────────────────────────────────────────────────────

export default function AdminBannersPage() {
  const [banners,   setBanners]   = useState<Banner[]>([]);
  const [analytics, setAnalytics] = useState<AnalyticsSummary | null>(null);
  const [loading,   setLoading]   = useState(true);
  const [modal,     setModal]     = useState<Partial<Banner> | null>(null);
  const [toast,     setToast]     = useState("");

  const showToast = (msg: string) => { setToast(msg); setTimeout(() => setToast(""), 3000); };

  const load = useCallback(async () => {
    try {
      const [list, stats] = await Promise.all([
        apiFetch("/api/banners"),
        apiFetch("/api/banners/analytics").catch(() => null),
      ]);
      setBanners(list.banners || []);
      if (stats) {
        // Merge per-banner analytics into the list
        const statsMap: Record<string, Pick<Banner, "views" | "clicks" | "ctr">> = {};
        for (const b of (stats.banners || [])) statsMap[b.id] = { views: b.views, clicks: b.clicks, ctr: b.ctr };
        setBanners((prev) => prev.map((b) => ({ ...b, ...statsMap[b.id] })));
        setAnalytics({ totalViews: stats.totalViews, totalClicks: stats.totalClicks, overallCtr: stats.overallCtr });
      }
    } catch { showToast("Failed to load banners"); }
    finally { setLoading(false); }
  }, []);

  useEffect(() => { load(); }, [load]);

  async function handleSave(form: Partial<Banner>) {
    if (form.id) {
      await apiFetch(`/api/banners/${form.id}`, { method: "PATCH", body: JSON.stringify(form) });
      showToast("Banner updated");
    } else {
      await apiFetch("/api/banners", { method: "POST", body: JSON.stringify(form) });
      showToast("Banner created");
    }
    await load();
  }

  async function toggleActive(banner: Banner) {
    await apiFetch(`/api/banners/${banner.id}/toggle`, { method: "PATCH" });
    showToast(`Banner ${banner.isActive ? "deactivated" : "activated"}`);
    await load();
  }

  async function deleteBanner(id: string) {
    if (!confirm("Delete this banner?")) return;
    await apiFetch(`/api/banners/${id}`, { method: "DELETE" });
    showToast("Banner deleted");
    await load();
  }

  return (
    <div className="p-4 sm:p-6 max-w-4xl mx-auto min-w-0 overflow-x-hidden pb-[env(safe-area-inset-bottom,0px)]">
      {/* Toast */}
      {toast && (
        <div className="fixed top-[max(1.5rem,env(safe-area-inset-top,0px))] left-4 right-4 sm:left-auto sm:right-6 z-50 max-w-sm ml-auto bg-gray-900 text-white text-sm font-semibold px-5 py-3 rounded-2xl shadow-xl animate-fade-in break-words">
          {toast}
        </div>
      )}

      {/* Header */}
      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between mb-6 min-w-0">
        <div className="flex items-center gap-3 min-w-0">
          <div className="w-10 h-10 rounded-2xl bg-gradient-to-br from-blue-600 to-cyan-500 flex items-center justify-center shrink-0">
            <ImageIcon className="w-5 h-5 text-white" />
          </div>
          <div className="min-w-0">
            <h1 className="text-xl font-black text-gray-900 truncate">Hero Banners</h1>
            <p className="text-sm text-gray-500 break-words">Manage homepage slider banners</p>
          </div>
        </div>
        <button
          onClick={() => setModal(EMPTY)}
          className="flex items-center justify-center gap-2 px-4 py-2.5 min-h-11 w-full sm:w-auto bg-gradient-to-r from-blue-600 to-cyan-500 text-white text-sm font-black rounded-2xl hover:opacity-90 transition-all shadow-md shadow-blue-200 shrink-0"
        >
          <Plus className="w-4 h-4" />
          Add Banner
        </button>
      </div>

      <div className="bg-blue-50 border border-blue-100 rounded-2xl px-4 py-3 mb-4 text-sm text-blue-700 break-words min-w-0">
        <strong>How it works:</strong> Active banners appear in the homepage hero slider, sorted by priority.
        Upload images directly — they&apos;re automatically compressed, converted to WebP, and resized for desktop &amp; mobile.
      </div>

      {/* Analytics summary strip */}
      {analytics && (
        <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 mb-6 min-w-0">
          {[
            { icon: Eye,               label: "Impressions",  val: analytics.totalViews.toLocaleString(),  color: "text-blue-600",   bg: "bg-blue-50"  },
            { icon: MousePointerClick, label: "Clicks",       val: analytics.totalClicks.toLocaleString(), color: "text-green-600",  bg: "bg-green-50" },
            { icon: TrendingUp,        label: "Overall CTR",  val: `${analytics.overallCtr}%`,             color: "text-violet-600", bg: "bg-violet-50" },
          ].map(({ icon: Icon, label, val, color, bg }) => (
            <div key={label} className={cn("rounded-2xl border border-gray-100 p-3 flex items-center gap-3 bg-white shadow-sm min-w-0")}>
              <div className={cn("w-9 h-9 rounded-xl flex items-center justify-center shrink-0", bg)}>
                <Icon className={cn("w-4 h-4", color)} />
              </div>
              <div className="min-w-0">
                <p className="text-[10px] text-gray-400 font-semibold uppercase tracking-wide">{label}</p>
                <p className={cn("text-lg font-black truncate", color)}>{val}</p>
              </div>
            </div>
          ))}
        </div>
      )}

      {/* List */}
      {loading ? (
        <div className="flex items-center justify-center h-40">
          <Loader2 className="w-6 h-6 text-blue-500 animate-spin" />
        </div>
      ) : banners.length === 0 ? (
        <div className="text-center py-16 px-4 bg-white rounded-3xl border border-gray-100 shadow-sm min-w-0">
          <ImageIcon className="w-10 h-10 mx-auto mb-3 text-gray-200" />
          <p className="font-bold text-gray-500">No banners yet</p>
          <p className="text-sm text-gray-400 mt-1 break-words">Add your first hero banner to get started.</p>
          <button
            onClick={() => setModal(EMPTY)}
            className="mt-4 inline-flex items-center justify-center gap-2 px-4 py-2.5 min-h-11 bg-blue-50 text-blue-600 text-sm font-bold rounded-xl hover:bg-blue-100 transition-colors"
          >
            <Plus className="w-4 h-4" /> Add First Banner
          </button>
        </div>
      ) : (
        <div className="space-y-3 min-w-0">
          {banners.map((banner) => (
            <div
              key={banner.id}
              className={cn(
                "bg-white rounded-2xl border p-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:gap-4 transition-all min-w-0",
                banner.isActive ? "border-gray-100 shadow-sm" : "border-gray-100 opacity-60"
              )}
            >
              <div className="flex items-center gap-3 min-w-0 flex-1">
                <GripVertical className="w-4 h-4 text-gray-300 shrink-0 cursor-grab hidden sm:block" aria-hidden />

                {/* Thumbnail */}
                <div className="w-20 h-12 sm:w-24 sm:h-14 rounded-xl overflow-hidden bg-gray-100 shrink-0">
                  {(banner.thumbnailImage || banner.imageDesktop) ? (
                    <Image
                      src={resolveUploadUrl(banner.thumbnailImage || banner.imageDesktop)}
                      alt={banner.title}
                      width={96}
                      height={56}
                      className="w-full h-full object-cover"
                    />
                  ) : (
                    <div className="w-full h-full flex items-center justify-center">
                      <ImageIcon className="w-5 h-5 text-gray-300" />
                    </div>
                  )}
                </div>

                {/* Info */}
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-2 flex-wrap min-w-0">
                    <p className="text-sm font-bold text-gray-900 truncate max-w-full">{banner.title}</p>
                    <span className={cn(
                      "px-2 py-0.5 text-[10px] font-black rounded-full shrink-0",
                      banner.isActive ? "bg-green-100 text-green-700" : "bg-gray-100 text-gray-500"
                    )}>
                      {banner.isActive ? "ACTIVE" : "INACTIVE"}
                    </span>
                  </div>
                  {banner.subtitle && <p className="text-xs text-gray-500 truncate mt-0.5">{banner.subtitle}</p>}
                  <div className="flex items-center gap-2 sm:gap-3 mt-0.5 flex-wrap min-w-0">
                    <p className="text-xs text-gray-400 shrink-0">Priority: {banner.priority}</p>
                    {banner.imageMobile && (
                      <span className="text-[10px] font-semibold text-emerald-600 bg-emerald-50 px-1.5 py-0.5 rounded shrink-0">
                        mobile ✓
                      </span>
                    )}
                    {(banner.views !== undefined) && (
                      <>
                        <span className="text-[10px] text-blue-600 bg-blue-50 px-1.5 py-0.5 rounded font-semibold shrink-0">
                          👁 {(banner.views || 0).toLocaleString()}
                        </span>
                        <span className="text-[10px] text-green-600 bg-green-50 px-1.5 py-0.5 rounded font-semibold shrink-0">
                          🖱 {(banner.clicks || 0).toLocaleString()}
                        </span>
                        <span className="text-[10px] text-violet-600 bg-violet-50 px-1.5 py-0.5 rounded font-semibold shrink-0">
                          CTR {banner.ctr ?? 0}%
                        </span>
                      </>
                    )}
                  </div>
                </div>
              </div>

              {/* Actions */}
              <div className="flex items-center gap-1 shrink-0 self-end sm:self-auto">
                <button onClick={() => toggleActive(banner)}
                  className="p-2.5 min-h-11 min-w-11 flex items-center justify-center rounded-xl hover:bg-gray-100 transition-colors"
                  title={banner.isActive ? "Deactivate" : "Activate"}
                >
                  {banner.isActive
                    ? <Eye className="w-4 h-4 text-green-600" />
                    : <EyeOff className="w-4 h-4 text-gray-400" />}
                </button>
                <button onClick={() => setModal(banner)}
                  className="p-2.5 min-h-11 min-w-11 flex items-center justify-center rounded-xl hover:bg-blue-50 transition-colors" title="Edit">
                  <Edit3 className="w-4 h-4 text-blue-600" />
                </button>
                <button onClick={() => deleteBanner(banner.id)}
                  className="p-2.5 min-h-11 min-w-11 flex items-center justify-center rounded-xl hover:bg-red-50 transition-colors" title="Delete">
                  <Trash2 className="w-4 h-4 text-red-500" />
                </button>
              </div>
            </div>
          ))}
        </div>
      )}

      {modal !== null && (
        <BannerModal initial={modal} onSave={handleSave} onClose={() => setModal(null)} />
      )}
    </div>
  );
}