"use client";

import { useState } from "react";
import { Pencil, Trash2, Plus, Eye, EyeOff, Loader2, ImageIcon } from "lucide-react";
import ImageUploader from "@/components/ImageUploader";
import { normalizeMediaUrl } from "@/lib/media-url";

type Promo = {
  id: string;
  title: string;
  description: string;
  imageUrl: string;
  drawDate: string | null;
  active: boolean;
  order: number;
};

const empty = (): Omit<Promo, "id"> => ({
  title: "",
  description: "",
  imageUrl: "/islasabona.jpg",
  drawDate: "",
  active: true,
  order: 0,
});

export default function AdminPromosClient({ initialPromos }: { initialPromos: Promo[] }) {
  const [promos, setPromos] = useState<Promo[]>(initialPromos);
  const [editing, setEditing] = useState<Partial<Promo> & { isNew?: boolean } | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");

  const openNew = () => setEditing({ ...empty(), isNew: true });
  const openEdit = (p: Promo) => setEditing({ ...p, isNew: false });
  const closeModal = () => { setEditing(null); setError(""); };

  const save = async () => {
    if (!editing) return;
    setLoading(true);
    setError("");
    try {
      const isNew = editing.isNew;
      const url = isNew ? "/api/admin/promos" : `/api/admin/promos/${editing.id}`;
      const method = isNew ? "POST" : "PUT";
      const res = await fetch(url, {
        method,
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          title: editing.title,
          description: editing.description,
          imageUrl: editing.imageUrl,
          drawDate: editing.drawDate || null,
          active: editing.active,
          order: editing.order ?? 0,
        }),
      });
      const data = await res.json();
      if (!res.ok) { setError(data.error || "Error al guardar"); return; }
      if (isNew) {
        setPromos((prev) => [...prev, data.promo]);
      } else {
        setPromos((prev) => prev.map((p) => (p.id === data.promo.id ? data.promo : p)));
      }
      closeModal();
    } finally {
      setLoading(false);
    }
  };

  const toggleActive = async (promo: Promo) => {
    setPromos((prev) => prev.map((p) => p.id === promo.id ? { ...p, active: !p.active } : p));
    await fetch(`/api/admin/promos/${promo.id}`, {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ active: !promo.active }),
    });
  };

  const deletePromo = async (id: string) => {
    if (!confirm("¿Eliminar esta promoción?")) return;
    const res = await fetch(`/api/admin/promos/${id}`, { method: "DELETE" });
    if (res.ok) setPromos((prev) => prev.filter((p) => p.id !== id));
  };

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold">Promociones del Sorteo</h1>
        <button
          onClick={openNew}
          className="flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-neon-blue to-neon-purple rounded-xl text-white font-semibold hover:opacity-90 transition-opacity"
        >
          <Plus className="w-4 h-4" /> Nueva Promo
        </button>
      </div>

      {promos.length === 0 && (
        <div className="bg-white/5 rounded-xl p-12 text-center text-gray-500">
          <ImageIcon className="w-12 h-12 mx-auto mb-4 opacity-30" />
          <p>No hay promociones. Crea la primera.</p>
        </div>
      )}

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {promos.map((promo) => (
          <div
            key={promo.id}
            className={`rounded-xl overflow-hidden border transition-all ${
              promo.active ? "border-white/10" : "border-white/5 opacity-60"
            } bg-white/5`}
          >
            <div className="relative h-48 overflow-hidden">
              <img
                src={normalizeMediaUrl(promo.imageUrl) || promo.imageUrl}
                alt={promo.title}
                className="w-full h-full object-cover"
                onError={(e) => { (e.target as HTMLImageElement).src = "/logo-fundacion.png"; }}
              />
              <div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent" />
              <div className="absolute bottom-3 left-3 right-3 flex items-end justify-between">
                <span className="text-white font-bold text-lg drop-shadow">{promo.title}</span>
                {promo.drawDate && (
                  <span className="text-xs bg-neon-blue/80 text-white px-2 py-0.5 rounded-full">{promo.drawDate}</span>
                )}
              </div>
            </div>
            <div className="p-4">
              <p className="text-sm text-gray-400 line-clamp-2 mb-4">{promo.description}</p>
              <div className="flex items-center gap-2">
                <button
                  onClick={() => openEdit(promo)}
                  className="flex items-center gap-1 px-3 py-1.5 rounded-lg bg-white/10 hover:bg-white/20 text-sm transition-colors"
                >
                  <Pencil className="w-3.5 h-3.5" /> Editar
                </button>
                <button
                  onClick={() => toggleActive(promo)}
                  className="flex items-center gap-1 px-3 py-1.5 rounded-lg bg-white/10 hover:bg-white/20 text-sm transition-colors"
                >
                  {promo.active ? <EyeOff className="w-3.5 h-3.5" /> : <Eye className="w-3.5 h-3.5" />}
                  {promo.active ? "Ocultar" : "Mostrar"}
                </button>
                <button
                  onClick={() => deletePromo(promo.id)}
                  className="flex items-center gap-1 px-3 py-1.5 rounded-lg bg-red-500/20 hover:bg-red-500/30 text-red-400 text-sm transition-colors ml-auto"
                >
                  <Trash2 className="w-3.5 h-3.5" /> Eliminar
                </button>
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* Modal Crear/Editar */}
      {editing && (
        <div className="fixed inset-0 bg-black/70 backdrop-blur-sm z-50 flex items-center justify-center p-4">
          <div className="bg-[#111] border border-white/10 rounded-2xl w-full max-w-lg max-h-[90vh] overflow-y-auto">
            <div className="p-6 border-b border-white/10 flex items-center justify-between">
              <h2 className="text-xl font-bold">{editing.isNew ? "Nueva Promoción" : "Editar Promoción"}</h2>
              <button onClick={closeModal} className="text-gray-400 hover:text-white">✕</button>
            </div>
            <div className="p-6 space-y-4">
              {error && <p className="text-red-400 text-sm bg-red-500/10 border border-red-500/30 rounded-lg px-3 py-2">{error}</p>}

              <div>
                <label className="block text-xs text-gray-400 mb-1">Título *</label>
                <input
                  className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-neon-blue"
                  value={editing.title || ""}
                  onChange={(e) => setEditing((prev) => ({ ...prev!, title: e.target.value }))}
                  placeholder="Ej: Sorteo Viaje Punta Cana"
                />
              </div>

              <div>
                <label className="block text-xs text-gray-400 mb-1">Descripción *</label>
                <textarea
                  rows={3}
                  className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-neon-blue resize-none"
                  value={editing.description || ""}
                  onChange={(e) => setEditing((prev) => ({ ...prev!, description: e.target.value }))}
                  placeholder="Descripción del premio..."
                />
              </div>

              <ImageUploader
                label="Imagen de la promoción *"
                value={editing.imageUrl || ""}
                onChange={(url) => setEditing((prev) => ({ ...prev!, imageUrl: url }))}
              />

              <div>
                <label className="block text-xs text-gray-400 mb-1">Fecha del sorteo</label>
                <input
                  className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-neon-blue"
                  value={editing.drawDate || ""}
                  onChange={(e) => setEditing((prev) => ({ ...prev!, drawDate: e.target.value }))}
                  placeholder="Ej: 20 de Diciembre 2026"
                />
              </div>

              <div className="flex items-center gap-3">
                <label className="text-xs text-gray-400">Orden (número)</label>
                <input
                  type="number"
                  className="w-24 bg-white/5 border border-white/10 rounded-xl px-3 py-2 text-white focus:outline-none focus:border-neon-blue"
                  value={editing.order ?? 0}
                  onChange={(e) => setEditing((prev) => ({ ...prev!, order: Number(e.target.value) }))}
                />
                <label className="flex items-center gap-2 text-xs text-gray-400 ml-auto cursor-pointer">
                  <input
                    type="checkbox"
                    checked={editing.active ?? true}
                    onChange={(e) => setEditing((prev) => ({ ...prev!, active: e.target.checked }))}
                    className="w-4 h-4 accent-neon-blue"
                  />
                  Visible en el sitio
                </label>
              </div>
            </div>
            <div className="p-6 border-t border-white/10 flex gap-3 justify-end">
              <button onClick={closeModal} className="px-4 py-2 rounded-xl border border-white/10 text-gray-400 hover:text-white transition-colors">
                Cancelar
              </button>
              <button
                onClick={save}
                disabled={loading}
                className="px-6 py-2 rounded-xl bg-gradient-to-r from-neon-blue to-neon-purple text-white font-semibold hover:opacity-90 disabled:opacity-50 flex items-center gap-2"
              >
                {loading && <Loader2 className="w-4 h-4 animate-spin" />}
                {editing.isNew ? "Crear" : "Guardar"}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}