"use client";

import { useState } from "react";
import { Loader2, Globe, CheckCircle, MessageCircle, Timer, Trophy, Plus, Trash2, ArrowUp, ArrowDown } from "lucide-react";
import ImageUploader from "@/components/ImageUploader";

type Config = {
  hero_image: string;
  prize_name: string;
  prize_subtitle: string;
  prize_badge: string;
  hero_highlight: string;
  cause_image: string;
  cta_image: string;
  gallery_images: string;
  draw_place: string;
  draw_authorization: string;
  contact_url: string;
  contact_email: string;
  contact_phone: string;
  foundation_url: string;
  countdown_enabled: string;
  countdown_end_at: string;
  countdown_title: string;
  social_instagram_url: string;
  social_tiktok_url: string;
  social_facebook_url: string;
  draw_results_enabled: string;
  draw_results_title: string;
  draw_results_image: string;
  draw_results_prizes: string;
  draw_results_2_enabled: string;
  draw_results_2_title: string;
  draw_results_2_image: string;
  draw_results_2_prizes: string;
};

type WinnerRow = {
  prize: string;
  code: string;
};

function isoToDatetimeLocal(iso: string): string {
  const t = String(iso ?? "").trim();
  if (!t) return "";
  const d = new Date(t);
  if (Number.isNaN(d.getTime())) return "";
  const local = new Date(d.getTime() - d.getTimezoneOffset() * 60000);
  return local.toISOString().slice(0, 16);
}

function datetimeLocalToIso(local: string): string {
  const t = String(local ?? "").trim();
  if (!t) return "";
  const d = new Date(t);
  if (Number.isNaN(d.getTime())) return "";
  return d.toISOString();
}

export default function AdminSiteImagesClient({ initialConfig }: { initialConfig: Config }) {
  const [config, setConfig] = useState<Config>(initialConfig);
  const [loading, setLoading] = useState(false);
  const [saved, setSaved] = useState(false);
  const [rejected, setRejected] = useState<string[]>([]);

  const [prizes, setPrizes] = useState<WinnerRow[]>(() => {
    try {
      const parsed = JSON.parse(initialConfig.draw_results_prizes || "[]");
      return Array.isArray(parsed) ? parsed : [];
    } catch {
      return [];
    }
  });

  const [prizes2, setPrizes2] = useState<WinnerRow[]>(() => {
    try {
      const parsed = JSON.parse(initialConfig.draw_results_2_prizes || "[]");
      return Array.isArray(parsed) ? parsed : [];
    } catch {
      return [];
    }
  });

  const addPrizeRow = () => {
    setPrizes((prev) => [...prev, { prize: "", code: "" }]);
  };

  const addPrizeRow2 = () => {
    setPrizes2((prev) => [...prev, { prize: "", code: "" }]);
  };

  const deletePrizeRow = (index: number) => {
    setPrizes((prev) => prev.filter((_, i) => i !== index));
  };

  const deletePrizeRow2 = (index: number) => {
    setPrizes2((prev) => prev.filter((_, i) => i !== index));
  };

  const updatePrizeRow = (index: number, field: keyof WinnerRow, val: string) => {
    setPrizes((prev) =>
      prev.map((row, i) => (i === index ? { ...row, [field]: val } : row))
    );
  };

  const updatePrizeRow2 = (index: number, field: keyof WinnerRow, val: string) => {
    setPrizes2((prev) =>
      prev.map((row, i) => (i === index ? { ...row, [field]: val } : row))
    );
  };

  const movePrizeRow = (index: number, direction: "up" | "down") => {
    if (direction === "up" && index === 0) return;
    if (direction === "down" && index === prizes.length - 1) return;

    const newPrizes = [...prizes];
    const targetIndex = direction === "up" ? index - 1 : index + 1;
    const temp = newPrizes[index];
    newPrizes[index] = newPrizes[targetIndex];
    newPrizes[targetIndex] = temp;
    setPrizes(newPrizes);
  };

  const movePrizeRow2 = (index: number, direction: "up" | "down") => {
    if (direction === "up" && index === 0) return;
    if (direction === "down" && index === prizes2.length - 1) return;

    const newPrizes = [...prizes2];
    const targetIndex = direction === "up" ? index - 1 : index + 1;
    const temp = newPrizes[index];
    newPrizes[index] = newPrizes[targetIndex];
    newPrizes[targetIndex] = temp;
    setPrizes2(newPrizes);
  };

  const [gallery, setGallery] = useState<string[]>(() => {
    try {
      const parsed = JSON.parse(initialConfig.gallery_images || "[]");
      return Array.isArray(parsed) ? parsed : [];
    } catch {
      return [];
    }
  });

  const set = (key: keyof Config) => (url: string) =>
    setConfig((prev) => ({ ...prev, [key]: url }));

  const save = async () => {
    setLoading(true);
    setSaved(false);
    setRejected([]);
    try {
      const finalConfig = {
        ...config,
        draw_results_prizes: JSON.stringify(prizes),
        draw_results_2_prizes: JSON.stringify(prizes2),
        gallery_images: JSON.stringify(gallery.filter((u) => u.trim())),
      };

      // Snapshot de lo que el admin intentó guardar (para detectar rechazos)
      const attempted = {
        instagram: finalConfig.social_instagram_url.trim(),
        tiktok: finalConfig.social_tiktok_url.trim(),
        facebook: finalConfig.social_facebook_url.trim(),
      };

      await fetch("/api/admin/site-config", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(finalConfig),
      });

      // Re-leer del backend para ver qué quedó realmente guardado
      const res = await fetch("/api/admin/site-config", { cache: "no-store" });
      const data = await res.json().catch(() => null);
      if (data?.config) {
        setConfig((prev) => ({ ...prev, ...data.config }));
        try {
          const parsed = JSON.parse(data.config.draw_results_prizes || "[]");
          setPrizes(Array.isArray(parsed) ? parsed : []);
        } catch {}
        try {
          const parsed2 = JSON.parse(data.config.draw_results_2_prizes || "[]");
          setPrizes2(Array.isArray(parsed2) ? parsed2 : []);
        } catch {}
        try {
          const parsedGallery = JSON.parse(data.config.gallery_images || "[]");
          setGallery(Array.isArray(parsedGallery) ? parsedGallery : []);
        } catch {}

        const issues: string[] = [];
        if (attempted.instagram && !data.config.social_instagram_url) issues.push("Instagram");
        if (attempted.tiktok && !data.config.social_tiktok_url) issues.push("TikTok");
        if (attempted.facebook && !data.config.social_facebook_url) issues.push("Facebook");
        setRejected(issues);
      }

      setSaved(true);
      setTimeout(() => setSaved(false), 3000);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="space-y-8">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          <Globe className="text-neon-blue w-7 h-7" />
          <h1 className="text-3xl font-bold">Contenido del sitio</h1>
        </div>
        <button
          onClick={save}
          disabled={loading}
          className="flex items-center gap-2 px-5 py-2.5 bg-gradient-to-r from-neon-blue to-neon-purple rounded-xl text-white font-semibold hover:opacity-90 disabled:opacity-50 transition-opacity"
        >
          {loading ? <Loader2 className="w-4 h-4 animate-spin" /> : saved ? <CheckCircle className="w-4 h-4" /> : null}
          {saved ? "¡Guardado!" : "Guardar cambios"}
        </button>
      </div>

      <p className="text-sm text-gray-400">
        Premio, fotos, contacto y cuenta regresiva del inicio. Guarda y recarga la portada para ver los cambios.
      </p>

      <div className="space-y-8">
        <section className="bg-white/5 border border-white/10 rounded-2xl p-6">
          <h2 className="font-bold text-lg mb-1 flex items-center gap-2">
            <Timer className="w-5 h-5 text-[#0ea5c6]" /> Cuenta regresiva (hero)
          </h2>
          <p className="text-xs text-gray-500 mb-4">
            Fecha y hora en la zona horaria de este navegador. Si no eliges fecha, el contador no se muestra en la portada.
          </p>
          <label className="flex items-center gap-2 text-sm text-gray-300 mb-4 cursor-pointer">
            <input
              type="checkbox"
              checked={config.countdown_enabled === "true"}
              onChange={(e) =>
                setConfig((c) => ({ ...c, countdown_enabled: e.target.checked ? "true" : "false" }))
              }
              className="w-4 h-4 accent-neon-blue"
            />
            Mostrar cuenta regresiva en el inicio
          </label>
          <div className="space-y-3">
            <div>
              <label className="block text-xs text-gray-400 mb-1">Título (solo texto)</label>
              <input
                type="text"
                maxLength={80}
                value={config.countdown_title}
                onChange={(e) => setConfig((c) => ({ ...c, countdown_title: e.target.value }))}
                className="w-full bg-black/40 border border-white/10 rounded-lg px-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:border-neon-blue"
                placeholder="Sorteo en vivo en"
              />
            </div>
            <div>
              <label className="block text-xs text-gray-400 mb-1">Fecha y hora del sorteo</label>
              <input
                type="datetime-local"
                value={isoToDatetimeLocal(config.countdown_end_at)}
                onChange={(e) =>
                  setConfig((c) => ({ ...c, countdown_end_at: datetimeLocalToIso(e.target.value) }))
                }
                className="w-full max-w-md bg-black/40 border border-white/10 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-neon-blue"
              />
            </div>
          </div>
        </section>

        <section className="bg-white/5 border border-white/10 rounded-2xl p-6">
          <h2 className="font-bold text-lg mb-1 flex items-center gap-2">
            <MessageCircle className="w-5 h-5 text-neon-blue" /> Contacto (WhatsApp u otro)
          </h2>
          <p className="text-xs text-gray-500 mb-4">URL del enlace «Contacto» en header y footer. Ej: https://wa.me/56912345678?text=Hola</p>
          <input
            type="url"
            value={config.contact_url}
            onChange={(e) => setConfig((c) => ({ ...c, contact_url: e.target.value }))}
            placeholder="https://wa.me/56900000000?text=..."
            className="w-full bg-black/40 border border-white/10 rounded-lg px-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:border-neon-blue"
          />
          <p className="text-xs text-gray-500 mt-5 mb-3">Datos visibles en la columna «Contacto» del footer (vacío = no se muestra).</p>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
            {(
              [
                ["contact_email", "Correo", "contacto@fundacion.cl", "email"],
                ["contact_phone", "Teléfono", "+56 9 1234 5678", "text"],
                ["foundation_url", "Sitio web de la fundación", "https://...", "url"],
              ] as const
            ).map(([key, label, placeholder, type]) => (
              <div key={key}>
                <label className="block text-xs text-gray-400 mb-1">{label}</label>
                <input
                  type={type}
                  value={config[key]}
                  onChange={(e) => setConfig((c) => ({ ...c, [key]: e.target.value }))}
                  placeholder={placeholder}
                  className="w-full bg-black/40 border border-white/10 rounded-lg px-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:border-neon-blue"
                />
              </div>
            ))}
          </div>
        </section>

        <section className="bg-white/5 border border-white/10 rounded-2xl p-6">
          <h2 className="font-bold text-lg mb-1 flex items-center gap-2">
            <Globe className="w-5 h-5 text-neon-purple" /> Redes sociales del footer
          </h2>
          <p className="text-xs text-gray-500 mb-4">
            Pega las URLs manualmente. Si dejas un campo vacío, ese enlace no se mostrará en el footer.
            Solo se aceptan dominios oficiales: <code className="text-gray-400">instagram.com</code>,{" "}
            <code className="text-gray-400">tiktok.com</code>,{" "}
            <code className="text-gray-400">facebook.com</code> (también <code className="text-gray-400">fb.com</code>,{" "}
            <code className="text-gray-400">fb.me</code>).
          </p>
          {rejected.length > 0 && (
            <div className="mb-4 rounded-lg border border-red-500/40 bg-red-500/10 px-4 py-3 text-sm text-red-300">
              No se pudo guardar la URL de <strong>{rejected.join(", ")}</strong>. Asegúrate de pegar
              una URL completa del dominio oficial (ej.{" "}
              <code className="text-red-200">https://facebook.com/tu-pagina</code>).
            </div>
          )}
          <div className="space-y-3">
            <div>
              <label className="block text-xs text-gray-400 mb-1">Instagram</label>
              <input
                type="url"
                value={config.social_instagram_url}
                onChange={(e) => setConfig((c) => ({ ...c, social_instagram_url: e.target.value }))}
                placeholder="https://instagram.com/tu_cuenta"
                className="w-full bg-black/40 border border-white/10 rounded-lg px-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:border-neon-blue"
              />
            </div>
            <div>
              <label className="block text-xs text-gray-400 mb-1">TikTok</label>
              <input
                type="url"
                value={config.social_tiktok_url}
                onChange={(e) => setConfig((c) => ({ ...c, social_tiktok_url: e.target.value }))}
                placeholder="https://www.tiktok.com/@tu_cuenta"
                className="w-full bg-black/40 border border-white/10 rounded-lg px-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:border-neon-blue"
              />
            </div>
            <div>
              <label className="block text-xs text-gray-400 mb-1">Facebook</label>
              <input
                type="url"
                value={config.social_facebook_url}
                onChange={(e) => setConfig((c) => ({ ...c, social_facebook_url: e.target.value }))}
                placeholder="https://facebook.com/tu_pagina"
                className="w-full bg-black/40 border border-white/10 rounded-lg px-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:border-neon-blue"
              />
            </div>
          </div>
        </section>

        <section className="bg-white/5 border border-white/10 rounded-2xl p-6 space-y-4">
          <h2 className="font-bold text-lg mb-1 flex items-center gap-2">
            <Trophy className="w-5 h-5 text-neon-purple" /> Premio principal (tarjeta del inicio)
          </h2>
          <p className="text-xs text-gray-500">
            Si cargas imágenes en «Carrusel», reemplazan a esta foto dentro de la tarjeta.
          </p>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
            {(
              [
                ["prize_name", "Nombre del premio", "Deepal S07"],
                ["prize_subtitle", "Subtítulo", "SUV eléctrico · 0 km"],
                ["prize_badge", "Etiqueta", "1er premio"],
                ["hero_highlight", "Texto destacado del titular", "Deepal S07 0km"],
              ] as const
            ).map(([key, label, placeholder]) => (
              <div key={key}>
                <label className="block text-xs text-gray-400 mb-1">{label}</label>
                <input
                  type="text"
                  maxLength={80}
                  value={config[key]}
                  onChange={(e) => setConfig((c) => ({ ...c, [key]: e.target.value }))}
                  placeholder={placeholder}
                  className="w-full bg-black/40 border border-white/10 rounded-lg px-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:border-neon-blue"
                />
              </div>
            ))}
          </div>
          <p className="text-xs text-gray-500">
            Titular: «Gana un <strong>{config.hero_highlight || "…"}</strong> y ayuda a crecer una infancia»
          </p>
          <ImageUploader label="Foto del premio" value={config.hero_image} onChange={set("hero_image")} />
        </section>

        <section className="bg-white/5 border border-white/10 rounded-2xl p-6 space-y-3">
          <h2 className="font-bold text-lg mb-1 flex items-center gap-2">
            <Timer className="w-5 h-5 text-neon-blue" /> Datos del sorteo
          </h2>
          <p className="text-xs text-gray-500">
            Se muestran en la barra bajo el hero y en el asistente. La fecha se toma de la cuenta regresiva.
          </p>
          {(
            [
              ["draw_place", "Lugar del sorteo", "Espacio Launch CoWork · Av. Vicuña Mackenna 7110..."],
              ["draw_authorization", "Autorización legal", "Autorizado según resolución exenta..."],
            ] as const
          ).map(([key, label, placeholder]) => (
            <div key={key}>
              <label className="block text-xs text-gray-400 mb-1">{label}</label>
              <input
                type="text"
                maxLength={160}
                value={config[key]}
                onChange={(e) => setConfig((c) => ({ ...c, [key]: e.target.value }))}
                placeholder={placeholder}
                className="w-full bg-black/40 border border-white/10 rounded-lg px-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:border-neon-blue"
              />
            </div>
          ))}
        </section>

        <section className="bg-white/5 border border-white/10 rounded-2xl p-6">
          <div className="flex items-center justify-between mb-1">
            <h2 className="font-bold text-lg">Galería de fotos (carrusel)</h2>
            <button
              type="button"
              onClick={() => setGallery((g) => [...g, ""])}
              disabled={gallery.length >= 24}
              className="flex items-center gap-2 px-3 py-1.5 bg-green-500/10 hover:bg-green-500/20 text-green-400 rounded-lg border border-green-500/20 text-sm font-semibold transition-colors disabled:opacity-40"
            >
              <Plus className="w-4 h-4" /> Agregar foto
            </button>
          </div>
          <p className="text-xs text-gray-500 mb-6">
            Fotos de la fundación: se muestran en una cinta en movimiento y en el carrusel de programas.
            Sin fotos, la galería no aparece. Máximo 24.
          </p>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {gallery.map((url, index) => (
              <div key={index} className="relative">
                <ImageUploader
                  label={`Foto ${index + 1}`}
                  value={url}
                  onChange={(v) => setGallery((g) => g.map((u, i) => (i === index ? v : u)))}
                />
                <button
                  type="button"
                  onClick={() => setGallery((g) => g.filter((_, i) => i !== index))}
                  aria-label={`Quitar foto ${index + 1}`}
                  className="absolute top-0 right-0 p-1.5 text-red-400 hover:text-red-300"
                >
                  <Trash2 className="w-4 h-4" />
                </button>
              </div>
            ))}
          </div>
        </section>

        <section className="bg-white/5 border border-white/10 rounded-2xl p-6">
          <h2 className="font-bold text-lg mb-1">Fotos de secciones</h2>
          <p className="text-xs text-gray-500 mb-6">Si quedan vacías se muestra un degradado de marca.</p>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <p className="text-sm font-semibold text-gray-300 mb-3">«La causa» (formato cuadrado)</p>
              <ImageUploader label="" value={config.cause_image} onChange={set("cause_image")} />
            </div>
            <div>
              <p className="text-sm font-semibold text-gray-300 mb-3">Banner final (fondo)</p>
              <ImageUploader label="" value={config.cta_image} onChange={set("cta_image")} />
            </div>
          </div>
        </section>

        {/* Sección de Resultados del Sorteo integrada */}
        <section className="bg-white/5 border border-white/10 rounded-2xl p-6 space-y-6">
          <div className="flex items-center gap-3 border-b border-white/10 pb-3">
            <Trophy className="text-[#a78bfa] w-6 h-6" />
            <h2 className="font-bold text-lg text-white">Resultados del Sorteo (Ganadores)</h2>
          </div>

          <label className="flex items-center gap-3 text-sm text-gray-300 cursor-pointer">
            <input
              type="checkbox"
              checked={config.draw_results_enabled === "true"}
              onChange={(e) =>
                setConfig((c) => ({ ...c, draw_results_enabled: e.target.checked ? "true" : "false" }))
              }
              className="w-5 h-5 accent-neon-blue"
            />
            <span>Mostrar sección de ganadores en la página de inicio (root)</span>
          </label>

          <div>
            <label className="block text-xs text-gray-400 mb-1">Título de la Sección (Grande)</label>
            <input
              type="text"
              value={config.draw_results_title}
              onChange={(e) => setConfig((c) => ({ ...c, draw_results_title: e.target.value }))}
              placeholder="Ganadores del sorteo"
              className="w-full bg-black/40 border border-white/10 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-neon-blue"
            />
          </div>

          <div>
            <label className="block text-xs text-gray-400 mb-2">Foto / Imagen de los Ganadores o Tómbola</label>
            <ImageUploader
              label=""
              value={config.draw_results_image}
              onChange={set("draw_results_image")}
            />
          </div>

          <div>
            <div className="flex items-center justify-between mb-4">
              <p className="text-sm font-semibold text-gray-300">Premios y Códigos Ganadores</p>
              <button
                type="button"
                onClick={addPrizeRow}
                className="flex items-center gap-2 px-3 py-1.5 bg-green-500/10 hover:bg-green-500/20 text-green-400 rounded-lg border border-green-500/20 text-sm font-semibold transition-colors"
              >
                <Plus className="w-4 h-4" /> Agregar Premio
              </button>
            </div>

            <div className="overflow-x-auto border border-white/5 rounded-xl bg-black/20">
              <table className="w-full text-left border-collapse">
                <thead>
                  <tr className="border-b border-white/10 text-xs text-gray-400 uppercase bg-white/2">
                    <th className="py-3 px-2 w-12 text-center">Orden</th>
                    <th className="py-3 px-4">Premio</th>
                    <th className="py-3 px-4">Código Ganador</th>
                    <th className="py-3 px-2 w-20 text-center">Acción</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-white/5">
                  {prizes.map((row, index) => (
                    <tr key={index} className="hover:bg-white/2 transition-colors">
                      <td className="py-3 px-2">
                        <div className="flex items-center justify-center gap-1">
                          <button
                            type="button"
                            disabled={index === 0}
                            onClick={() => movePrizeRow(index, "up")}
                            className="p-1 hover:bg-white/10 rounded text-gray-400 disabled:opacity-30 disabled:hover:bg-transparent"
                            title="Subir"
                          >
                            <ArrowUp className="w-3.5 h-3.5" />
                          </button>
                          <button
                            type="button"
                            disabled={index === prizes.length - 1}
                            onClick={() => movePrizeRow(index, "down")}
                            className="p-1 hover:bg-white/10 rounded text-gray-400 disabled:opacity-30 disabled:hover:bg-transparent"
                            title="Bajar"
                          >
                            <ArrowDown className="w-3.5 h-3.5" />
                          </button>
                        </div>
                      </td>
                      <td className="py-3 px-4">
                        <input
                          type="text"
                          value={row.prize}
                          onChange={(e) => updatePrizeRow(index, "prize", e.target.value)}
                          placeholder="Ej: Scooter o $300.000"
                          className="w-full bg-black/20 border border-white/5 rounded px-3 py-2 text-white focus:outline-none focus:border-neon-blue text-sm"
                        />
                      </td>
                      <td className="py-3 px-4">
                        <input
                          type="text"
                          value={row.code}
                          onChange={(e) => updatePrizeRow(index, "code", e.target.value)}
                          placeholder="Ej: EC-HAUZCMB"
                          className="w-full bg-black/20 border border-white/5 rounded px-3 py-2 text-white font-mono focus:outline-none focus:border-neon-blue text-sm"
                        />
                      </td>
                      <td className="py-3 px-2 text-center">
                        <button
                          type="button"
                          onClick={() => deletePrizeRow(index)}
                          className="p-2 bg-red-500/10 hover:bg-red-500/20 text-red-400 rounded-lg border border-red-500/20 transition-colors"
                          title="Eliminar fila"
                        >
                          <Trash2 className="w-4 h-4" />
                        </button>
                      </td>
                    </tr>
                  ))}
                  {prizes.length === 0 && (
                    <tr>
                      <td colSpan={4} className="py-8 text-center text-gray-500 text-sm">
                        No hay premios agregados. Haz clic en "Agregar Premio" para comenzar.
                      </td>
                    </tr>
                  )}
                </tbody>
              </table>
            </div>
          </div>
        </section>

        {/* Sorteo 2 — acordeón en la home */}
        <section className="bg-white/5 border border-[#0ea5c6]/20 rounded-2xl p-6 space-y-6">
          <div className="flex items-center gap-3 border-b border-white/10 pb-3">
            <Trophy className="text-[#0ea5c6] w-6 h-6" />
            <h2 className="font-bold text-lg text-white">Resultados Sorteo 2 (plegable)</h2>
          </div>

          <label className="flex items-center gap-3 text-sm text-gray-300 cursor-pointer">
            <input
              type="checkbox"
              checked={config.draw_results_2_enabled === "true"}
              onChange={(e) =>
                setConfig((c) => ({
                  ...c,
                  draw_results_2_enabled: e.target.checked ? "true" : "false",
                }))
              }
              className="w-5 h-5 accent-neon-blue"
            />
            <span>Mostrar sección plegable de ganadores del Sorteo 2 (cerrada por defecto en la home)</span>
          </label>

          <div>
            <label className="block text-xs text-gray-400 mb-1">Título de la sección</label>
            <input
              type="text"
              value={config.draw_results_2_title}
              onChange={(e) => setConfig((c) => ({ ...c, draw_results_2_title: e.target.value }))}
              placeholder="GANADORES DEL SORTEO 2"
              className="w-full bg-black/40 border border-white/10 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-neon-blue"
            />
          </div>

          <div>
            <label className="block text-xs text-gray-400 mb-2">Imagen lateral del acordeón</label>
            <ImageUploader
              label=""
              value={config.draw_results_2_image}
              onChange={set("draw_results_2_image")}
            />
          </div>

          <div>
            <div className="flex items-center justify-between mb-4">
              <p className="text-sm font-semibold text-gray-300">Premios y códigos (Sorteo 2)</p>
              <button
                type="button"
                onClick={addPrizeRow2}
                className="flex items-center gap-2 px-3 py-1.5 bg-green-500/10 hover:bg-green-500/20 text-green-400 rounded-lg border border-green-500/20 text-sm font-semibold transition-colors"
              >
                <Plus className="w-4 h-4" /> Agregar Premio
              </button>
            </div>

            <div className="overflow-x-auto border border-white/5 rounded-xl bg-black/20">
              <table className="w-full text-left border-collapse">
                <thead>
                  <tr className="border-b border-white/10 text-xs text-gray-400 uppercase bg-white/2">
                    <th className="py-3 px-2 w-12 text-center">Orden</th>
                    <th className="py-3 px-4">Premio</th>
                    <th className="py-3 px-4">Código Ganador</th>
                    <th className="py-3 px-2 w-20 text-center">Acción</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-white/5">
                  {prizes2.map((row, index) => (
                    <tr key={index} className="hover:bg-white/2 transition-colors">
                      <td className="py-3 px-2">
                        <div className="flex items-center justify-center gap-1">
                          <button
                            type="button"
                            disabled={index === 0}
                            onClick={() => movePrizeRow2(index, "up")}
                            className="p-1 hover:bg-white/10 rounded text-gray-400 disabled:opacity-30"
                            title="Subir"
                          >
                            <ArrowUp className="w-3.5 h-3.5" />
                          </button>
                          <button
                            type="button"
                            disabled={index === prizes2.length - 1}
                            onClick={() => movePrizeRow2(index, "down")}
                            className="p-1 hover:bg-white/10 rounded text-gray-400 disabled:opacity-30"
                            title="Bajar"
                          >
                            <ArrowDown className="w-3.5 h-3.5" />
                          </button>
                        </div>
                      </td>
                      <td className="py-3 px-4">
                        <input
                          type="text"
                          value={row.prize}
                          onChange={(e) => updatePrizeRow2(index, "prize", e.target.value)}
                          placeholder="Ej: Cuatrimoto"
                          className="w-full bg-black/20 border border-white/5 rounded px-3 py-2 text-white focus:outline-none focus:border-neon-blue text-sm"
                        />
                      </td>
                      <td className="py-3 px-4">
                        <input
                          type="text"
                          value={row.code}
                          onChange={(e) => updatePrizeRow2(index, "code", e.target.value)}
                          placeholder="Ej: CCA-A3F9K2B"
                          className="w-full bg-black/20 border border-white/5 rounded px-3 py-2 text-white font-mono focus:outline-none focus:border-neon-blue text-sm"
                        />
                      </td>
                      <td className="py-3 px-2 text-center">
                        <button
                          type="button"
                          onClick={() => deletePrizeRow2(index)}
                          className="p-2 bg-red-500/10 hover:bg-red-500/20 text-red-400 rounded-lg border border-red-500/20"
                          title="Eliminar"
                        >
                          <Trash2 className="w-4 h-4" />
                        </button>
                      </td>
                    </tr>
                  ))}
                  {prizes2.length === 0 && (
                    <tr>
                      <td colSpan={4} className="py-8 text-center text-gray-500 text-sm">
                        Sin ganadores del Sorteo 2. Agrega premios y guarda.
                      </td>
                    </tr>
                  )}
                </tbody>
              </table>
            </div>
            <p className="mt-2 text-xs text-gray-500">
              En la web aparece una barra compacta; el visitante puede expandirla para ver la lista completa.
            </p>
          </div>
        </section>
      </div>
    </div>
  );
}