import { useState, useEffect } from "react";
import { useSearchParams, useNavigate } from "react-router-dom";
import { AvisosService } from "../services/avisos.service";
import { AdsV2Service } from "../services/ads.v2.service";

import type { DatosAvisoDto } from "../types/aviso.types";
import FormularioAviso from "../components/FormularioAviso";
import { useAuth } from "../context/AuthContext";
import LoginModal from "../components/LoginModal";

const TAREAS_DISPONIBLES = [
  {
    id: "EAUTOS",
    label: "Automóviles",
    icon: "🚗",
    description: "Venta de Autos, Camionetas y Utilitarios",
  },
  {
    id: "EMOTOS",
    label: "Motos",
    icon: "🏍️",
    description: "Venta de Motos, Cuatriciclos y Náutica",
  },
];

export default function PublicarAvisoPage() {
  const [searchParams] = useSearchParams();
  const navigate = useNavigate(); // Hook de navegación
  const editId = searchParams.get("edit");

  const [categorySelection, setCategorySelection] = useState<string>("");
  const [tarifas, setTarifas] = useState<DatosAvisoDto[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [planSeleccionado, setPlanSeleccionado] =
    useState<DatosAvisoDto | null>(null);
  const [fixedCategory, setFixedCategory] = useState<string | null>(null);
  const [showLoginModal, setShowLoginModal] = useState(false);
  const { user, login } = useAuth();

  useEffect(() => {
    if (editId) {
      cargarAvisoParaEdicion(parseInt(editId));
    }
  }, [editId]);

  useEffect(() => {
    if (planSeleccionado) {
      window.scrollTo({ top: 0, behavior: "instant" });
    }
  }, [planSeleccionado]);

  const cargarAvisoParaEdicion = async (id: number) => {
    setLoading(true);
    try {
      const ad = await AdsV2Service.getById(id);

      // Determinamos la categoría para cargar las tarifas correspondientes
      const categoryCode = ad.vehicleTypeID === 1 ? "EAUTOS" : "EMOTOS";
      setCategorySelection(categoryCode);

      // Bloquear el cambio de categoría
      setFixedCategory(categoryCode);

      /**
       * LÓGICA DE EDICIÓN DIRECTA:
       * Si el aviso está en un estado que implica que ya fue procesado o rechazado,
       * saltamos la selección de planes y cargamos el plan correspondiente.
       * Status: 4 (Activo), 5 (Rechazado), 6 (Pausado), 7 (Vendido), 10 (Reservado)
       * El estado 1 (Borrador) y 8 (Vencido) NO entran aquí para permitir re-selección/pago.
       */
      const statusesEdicionDirecta = [4, 5, 6, 7, 10];

      if (statusesEdicionDirecta.includes(ad.statusID)) {
        // Obtenemos la configuración de tarifa que coincide con el estado del aviso (Destacado o no)
        const paqueteId = ad.isFeatured ? 1 : 0;
        const tarifasData = await AvisosService.obtenerConfiguracion(
          "EMOTORES",
          paqueteId,
        );
        const tarifaReal = tarifasData[0];

        if (tarifaReal) {
          const vehicleTypeId = categoryCode === "EAUTOS" ? 1 : 2;
          const nombrePlanAmigable = ad.isFeatured
            ? "PLAN DESTACADO"
            : "PLAN ESTÁNDAR";

          setPlanSeleccionado({
            ...tarifaReal,
            idRubro: vehicleTypeId,
            nomavi: nombrePlanAmigable,
          });
        }
      }
    } catch (err) {
      console.error("Error cargando aviso para edición:", err);
      setError("Error al cargar el aviso.");
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    if (!categorySelection) return;

    const cargarTarifas = async () => {
      setLoading(true);
      setError(null);
      try {
        const [simple, destacado] = await Promise.all([
          AvisosService.obtenerConfiguracion("EMOTORES", 0),
          AvisosService.obtenerConfiguracion("EMOTORES", 1),
        ]);

        const planes = [...simple, ...destacado];
        planes.sort((a, b) => a.importeTotsiniva - b.importeTotsiniva);

        setTarifas(planes);
      } catch (err) {
        setError("Error al cargar tarifas.");
        console.error(err);
      } finally {
        setLoading(false);
      }
    };
    cargarTarifas();
  }, [categorySelection]);

  const handleSelectPlan = (plan: DatosAvisoDto) => {
    const vehicleTypeId = categorySelection === "EAUTOS" ? 1 : 2;
    const nombrePlanAmigable =
      plan.paquete === 1 ? "PLAN DESTACADO" : "PLAN ESTÁNDAR";

    setPlanSeleccionado({
      ...plan,
      idRubro: vehicleTypeId,
      nomavi: nombrePlanAmigable,
    });
  };

  // Manejador centralizado de éxito
  const handleSuccess = (adId: number, isAdminAction: boolean = false) => {
    const status = isAdminAction ? "admin_created" : "approved";
    navigate(`/pago-confirmado?status=${status}&adId=${adId}`);
  };

  if (!user) {
    return (
      <div className="container mx-auto px-6 py-24 text-center animate-fade-in-up">
        <div className="bg-[#111318]/90 backdrop-blur-3xl p-12 rounded-[3rem] max-w-2xl mx-auto border border-white/5 shadow-2xl">
          <span className="text-7xl mb-8 block">🔒</span>
          <h2 className="text-5xl font-black mb-4 uppercase tracking-tighter">
            Registrate o Inicia Sesión
          </h2>
          <p className="text-gray-400 mb-10 text-lg italic">
            Para publicar tus avisos, primero debes registrarte o iniciar sesión.
          </p>
          <div className="flex flex-col md:flex-row gap-4 justify-center">
            <button
              onClick={() => setShowLoginModal(true)}
              className="bg-blue-600 hover:bg-blue-500 text-white px-12 py-5 rounded-[2rem] font-bold uppercase tracking-widest transition-all inline-block shadow-lg shadow-blue-600/20"
            >
              Registrarse
            </button>
          </div>
        </div>

        {showLoginModal && (
          <div className="fixed inset-0 z-[200] flex items-center justify-center bg-black/80 backdrop-blur-xl animate-fade-in p-4">
            <div className="relative w-full max-w-md">
              <LoginModal
                initialMode="REGISTER"
                onSuccess={(u) => {
                  login(u);
                  setShowLoginModal(false);
                }}
                onClose={() => setShowLoginModal(false)}
              />
            </div>
          </div>
        )}
      </div>
    );
  }

  if (planSeleccionado) {
    return (
      <div className="max-w-6xl mx-auto py-8 px-6">
        <header className="flex justify-between items-center mb-10">
          <button
            onClick={() => setPlanSeleccionado(null)}
            className="text-gray-500 hover:text-white uppercase text-[10px] font-black tracking-widest flex items-center gap-2 transition-colors"
          >
            ← Volver a Planes
          </button>
          <div className="glass px-4 py-2 rounded-xl text-xs border border-white/5">
            Publicando como:{" "}
            <span className="text-blue-400 font-bold">{user.username}</span>
          </div>
        </header>
        <FormularioAviso
          plan={planSeleccionado}
          onCancel={() => setPlanSeleccionado(null)}
          onSuccess={handleSuccess} // Usamos la redirección
          editId={editId ? parseInt(editId) : null}
        />
      </div>
    );
  }

  return (
    <div className="max-w-6xl mx-auto px-4 md:px-6 py-8 md:py-12">
      <header className="mb-8 md:mb-16 text-center md:text-left">
        <h2 className="text-3xl md:text-6xl font-black tracking-tighter uppercase mb-2">
          Comienza a <span className="text-gradient">Vender</span>
        </h2>
        <p className="text-gray-500 text-sm md:text-lg italic">
          Selecciona una categoría para ver los planes de publicación.
        </p>
      </header>

      {/* SECCIÓN DE CATEGORÍA */}
      <section className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-8 mb-10 md:mb-20 text-white">
        {TAREAS_DISPONIBLES.map((t) => {
          // Lógica de bloqueo
          const isDisabled = fixedCategory && fixedCategory !== t.id;

          return (
            <button
              key={t.id}
              onClick={() => !isDisabled && setCategorySelection(t.id)}
              disabled={!!isDisabled} // Deshabilitar botón
              className={`
                    glass-card p-6 md:p-10 rounded-[2rem] md:rounded-[2.5rem] flex items-center justify-between group transition-all text-left
                    ${categorySelection === t.id ? "border-blue-500 scale-[1.02] shadow-2xl shadow-blue-600/10 bg-white/5" : "hover:bg-white/5"}
                    ${isDisabled ? "opacity-30 cursor-not-allowed grayscale" : "cursor-pointer"} 
                `}
            >
              <div>
                <span className="text-[10px] md:text-xs font-black uppercase tracking-widest text-blue-400 mb-1 md:mb-2 block">
                  Categoría
                </span>
                <h3 className="text-2xl md:text-4xl font-bold mb-1 md:mb-2 uppercase tracking-tight">
                  {t.label}
                </h3>
                <p className="text-gray-500 font-light text-xs md:text-sm">
                  {t.description}
                </p>
              </div>
              <span className="text-4xl md:text-6xl group-hover:scale-110 transition-transform duration-300">
                {t.icon}
              </span>
            </button>
          );
        })}
      </section>

      {/* LISTA DE PLANES */}
      {categorySelection && (
        <section className="animate-fade-in-up">
          <div className="flex justify-between items-end mb-10 border-b border-white/5 pb-4">
            <div>
              <h3 className="text-3xl font-black uppercase tracking-tighter">
                Planes <span className="text-blue-400">Disponibles</span>
              </h3>
              <p className="text-gray-500 text-xs mt-1 uppercase tracking-widest">
                Para {categorySelection === "EAUTOS" ? "Automóviles" : "Motos"}
              </p>
            </div>
            <span className="text-gray-600 text-[10px] font-bold uppercase tracking-widest">
              Precios finales (IVA Incluido)
            </span>
          </div>

          {error && (
            <div className="bg-red-500/10 text-red-400 p-6 rounded-[2rem] border border-red-500/20 mb-10 text-center">
              <p className="font-bold uppercase tracking-widest text-xs mb-2">
                Error de Conexión
              </p>
              <p className="italic text-sm">{error}</p>
            </div>
          )}

          {loading ? (
            <div className="flex justify-center p-20">
              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
            </div>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
              {tarifas.map((tarifa, idx) => {
                const precioRaw =
                  tarifa.importeTotsiniva > 0
                    ? tarifa.importeTotsiniva * 1.105
                    : tarifa.importeSiniva * 1.105;
                const precioFinal = Math.round(precioRaw);
                const esDestacado = tarifa.paquete === 1;
                const tituloPlan = esDestacado ? "DESTACADO" : "ESTÁNDAR";
                const descripcionPlan = esDestacado
                  ? "Máxima visibilidad. Tu aviso aparecerá en el carrusel de inicio y primeros lugares de búsqueda."
                  : "Presencia esencial. Tu aviso aparecerá en el listado general de búsqueda.";

                return (
                  <div
                    key={idx}
                    onClick={() => handleSelectPlan(tarifa)}
                    className={`glass-card p-8 rounded-[2.5rem] flex flex-col group cursor-pointer relative overflow-hidden transition-all hover:-translate-y-2 hover:shadow-2xl ${esDestacado ? "border-blue-500/30 hover:border-blue-500 hover:shadow-blue-900/20" : "hover:border-white/30"}`}
                  >
                    <div
                      className={`absolute top-0 right-0 text-white text-[9px] font-black px-6 py-2 rounded-bl-3xl uppercase tracking-widest shadow-lg ${esDestacado ? "bg-gradient-to-bl from-blue-600 to-cyan-500 animate-glow" : "bg-white/10 text-gray-400"}`}
                    >
                      {esDestacado ? "RECOMENDADO" : "BÁSICO"}
                    </div>

                    <h4
                      className={`text-3xl font-black uppercase tracking-tighter mb-4 mt-4 ${esDestacado ? "text-blue-400" : "text-white"}`}
                    >
                      {tituloPlan}
                    </h4>

                    <div className="space-y-4 mb-10 flex-1">
                      <p className="text-gray-400 text-sm leading-relaxed border-b border-white/5 pb-4 min-h-[60px]">
                        {descripcionPlan}
                      </p>

                      <ul className="space-y-3">
                        <li className="flex justify-between text-xs text-gray-300 items-center">
                          <span className="text-gray-500 uppercase tracking-wider font-bold text-[10px]">
                            Plataforma
                          </span>
                          <span className="font-bold bg-white/5 px-2 py-1 rounded text-[10px]">
                            SOLO WEB
                          </span>
                        </li>
                        <li className="flex justify-between text-xs text-gray-300 items-center">
                          <span className="text-gray-500 uppercase tracking-wider font-bold text-[10px]">
                            Duración
                          </span>
                          <span className="font-bold">
                            {tarifa.cantidadDias} Días
                          </span>
                        </li>
                        <li className="flex justify-between text-xs text-gray-300 items-center">
                          <span className="text-gray-500 uppercase tracking-wider font-bold text-[10px]">
                            Fotos
                          </span>
                          <span className="font-bold text-green-400">
                            Hasta 5
                          </span>
                        </li>
                        <li className="flex justify-between text-xs text-gray-300 items-center">
                          <span className="text-gray-500 uppercase tracking-wider font-bold text-[10px]">
                            Visibilidad
                          </span>
                          <span
                            className={`font-bold ${esDestacado ? "text-blue-400" : "text-gray-300"}`}
                          >
                            {esDestacado ? "ALTA ⭐" : "NORMAL"}
                          </span>
                        </li>
                      </ul>
                    </div>

                    <div className="mt-auto pt-6 border-t border-white/5">
                      <span className="text-gray-500 text-[10px] font-black uppercase tracking-widest block mb-1">
                        Precio Final
                      </span>
                      <div className="flex items-baseline gap-1">
                        <span className="text-4xl font-black tracking-tighter text-white">
                          $
                          {precioFinal.toLocaleString("es-AR", {
                            minimumFractionDigits: 0,
                            maximumFractionDigits: 0,
                          })}
                        </span>
                        <span className="text-xs font-bold text-gray-500">
                          ARS
                        </span>
                      </div>
                      <button
                        className={`w-full mt-6 text-white py-4 rounded-xl font-bold uppercase text-xs tracking-widest transition-all shadow-lg ${esDestacado ? "bg-blue-600 hover:bg-blue-500 shadow-blue-600/20" : "bg-white/5 hover:bg-white/10"}`}
                      >
                        Seleccionar
                      </button>
                    </div>
                  </div>
                );
              })}
            </div>
          )}
        </section>
      )}
    </div>
  );
}