'use client';

import React, { useState, useEffect } from 'react';
import { 
  X,
  RefreshCw,
  Shuffle,
  Trash2,
  DollarSign,
  HelpCircle
} from 'lucide-react';
import { 
  renewPerfil,
  changePerfilPlatform,
  desvincularPerfil,
  fetchPlataformas,
  fetchPlataformaDetalle,
  fetchResumenDesvinculacion
} from '@/services/plataformas';
import { Plataformas, CuentaPlataforma } from '@/types';

interface PerfilData {
  id: number;
  nombre_perfil: string;
  monto_pago?: number | string | null;
  fecha_vencimiento?: string | null;
  plataforma_nombre?: string;
  id_plataforma?: number;
  ciclo_cobro?: number;
  id_catalogo?: number | null;
  duracion_meses?: number | null;
  precio_compra?: number | null;
  dias_restantes?: number | null;
  devolucion?: number | null;
}

interface SubcuentaDestinoDto {
  id: number;
  correo: string;
  fecha_pago: string | null;
  vacias: number;
  llenas: number;
  total: number;
}

interface PerfilAccionesModalesProps {
  renewPerfilId: number | null;
  renewPerfilData: PerfilData | null;
  onCloseRenew: () => void;
  changePerfilId: number | null;
  changePerfilData: PerfilData | null;
  currentPlatformId: number;
  onCloseChange: () => void;
  deletePerfilId: number | null;
  deletePerfilData: PerfilData | null;
  onCloseDelete: () => void;
  onSuccess: () => void;
}

export default function PerfilAccionesModales({
  renewPerfilId,
  renewPerfilData,
  onCloseRenew,
  changePerfilId,
  changePerfilData,
  currentPlatformId,
  onCloseChange,
  deletePerfilId,
  deletePerfilData,
  onCloseDelete,
  onSuccess
}: PerfilAccionesModalesProps) {
  const [allPlatforms, setAllPlatforms] = useState<Plataformas[]>([]);
  const [selectedDestPlatform, setSelectedDestPlatform] = useState<number>(0);
  const [subcuentasDest, setSubcuentasDest] = useState<SubcuentaDestinoDto[]>([]);
  const [selectedSubcuenta, setSelectedSubcuenta] = useState<number>(0);
  const [renewMonto, setRenewMonto] = useState<number>(0);
  const [cantidadRenovaciones, setCantidadRenovaciones] = useState<number>(1);
  const [eliminarCompleto, setEliminarCompleto] = useState<boolean>(false);
  const [renewing, setRenewing] = useState(false);
  const [changing, setChanging] = useState(false);
  const [deleting, setDeleting] = useState(false);
  const [resumenDesvinculacion, setResumenDesvinculacion] = useState<{
    precio_compra: number;
    dias_restantes: number;
    devolucion: number;
  } | null>(null);
  const [loadingResumen, setLoadingResumen] = useState<boolean>(false);

  useEffect(() => {
    if (changePerfilId) {
      fetchPlataformas()
        .then(res => {
          if (res.success && res.data) {
            const list = res.data.filter((p: Plataformas) => p.id !== currentPlatformId);
            setAllPlatforms(list);
            if (list.length > 0) setSelectedDestPlatform(list[0].id);
          }
        })
        .catch(err => console.error('Error loading platforms:', err));
    }
  }, [changePerfilId, currentPlatformId]);

  useEffect(() => {
    if (selectedDestPlatform) {
      fetchPlataformaDetalle(selectedDestPlatform)
        .then(res => {
          if (res.success && res.data) {
            const list = res.data.subcuentas || [];
            setSubcuentasDest(list);
            setSelectedSubcuenta(list.length > 0 ? list[0].id : 0);
          }
        })
        .catch(err => console.error('Error loading target subaccounts:', err));
    } else {
      setSubcuentasDest([]);
      setSelectedSubcuenta(0);
    }
  }, [selectedDestPlatform]);

  useEffect(() => {
    if (renewPerfilId && renewPerfilData) {
      const isCatalog = renewPerfilData.id_catalogo !== undefined && renewPerfilData.id_catalogo !== null;
      const base = typeof renewPerfilData.monto_pago === 'string' ? parseFloat(renewPerfilData.monto_pago) : (renewPerfilData.monto_pago || 0);
      const isPromo = !isCatalog && renewPerfilData.ciclo_cobro !== undefined && renewPerfilData.ciclo_cobro > 1;
      const ciclo = renewPerfilData.ciclo_cobro || 1;
      
      setCantidadRenovaciones(1);
      if (isPromo) {
        setRenewMonto(base * ciclo);
      } else {
        setRenewMonto(base);
      }
    }
  }, [renewPerfilId, renewPerfilData]);

  useEffect(() => {
    if (renewPerfilId && renewPerfilData) {
      const isCatalog = renewPerfilData.id_catalogo !== undefined && renewPerfilData.id_catalogo !== null;
      const base = typeof renewPerfilData.monto_pago === 'string' ? parseFloat(renewPerfilData.monto_pago) : (renewPerfilData.monto_pago || 0);
      const isPromo = !isCatalog && renewPerfilData.ciclo_cobro !== undefined && renewPerfilData.ciclo_cobro > 1;
      const ciclo = renewPerfilData.ciclo_cobro || 1;
      
      if (isPromo) {
        setRenewMonto(base * ciclo * cantidadRenovaciones);
      } else {
        setRenewMonto(base * cantidadRenovaciones);
      }
    }
  }, [cantidadRenovaciones]);

  useEffect(() => {
    if (deletePerfilId) {
      setEliminarCompleto(false);
      setResumenDesvinculacion(null);
      setLoadingResumen(true);
      fetchResumenDesvinculacion(deletePerfilId)
        .then(res => {
          if (res.success && res.data) {
            setResumenDesvinculacion({
              precio_compra: res.data.precio_compra,
              dias_restantes: res.data.dias_restantes,
              devolucion: res.data.devolucion,
            });
          }
        })
        .catch(err => {
          console.error("Error al cargar resumen de desvinculación:", err);
        })
        .finally(() => {
          setLoadingResumen(false);
        });
    }
  }, [deletePerfilId]);

  const getRemainingDays = (fechaVencimientoStr: string | null | undefined) => {
    if (!fechaVencimientoStr) return 0;
    const vencimiento = new Date(fechaVencimientoStr);
    const hoy = new Date();
    vencimiento.setHours(23, 59, 59, 999);
    hoy.setHours(0, 0, 0, 0);
    const diffTime = vencimiento.getTime() - hoy.getTime();
    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
    return diffDays > 0 ? diffDays : 0;
  };

  const handleConfirmRenew = async () => {
    if (!renewPerfilId) return;
    try {
      setRenewing(true);
      await renewPerfil(renewPerfilId, renewMonto, cantidadRenovaciones);
      onSuccess();
      onCloseRenew();
    } catch (e) {
      const errMsg = e instanceof Error ? e.message : 'Error al renovar el perfil';
      alert(errMsg);
    } finally {
      setRenewing(false);
    }
  };

  const handleConfirmChange = async () => {
    if (!changePerfilId || !selectedDestPlatform) return;

    try {
      setChanging(true);
      await changePerfilPlatform(
        changePerfilId,
        selectedDestPlatform,
        selectedSubcuenta || undefined
      );

      onSuccess();
      onCloseChange();
    } catch (e: unknown) {
      if (e instanceof Error) {
        alert(e.message);
      } else {
        alert('Error al cambiar de plataforma');
      }
    } finally {
      setChanging(false);
    }
  };

  const handleConfirmDelete = async () => {
    if (!deletePerfilId) return;

    try {
      setDeleting(true);
      await desvincularPerfil(deletePerfilId, eliminarCompleto);

      onSuccess();
      onCloseDelete();
    } catch (e: unknown) {
      if (e instanceof Error) {
        alert(e.message);
      } else {
        alert('Error al desvincular el perfil');
      }
    } finally {
      setDeleting(false);
    }
  };

  return (
    <>
      {/* RENEW MODAL */}
      {renewPerfilId && renewPerfilData && (
        <div className="fixed inset-0 z-[200] flex items-center justify-center p-4 bg-black/85 backdrop-blur-sm animate-fadeIn">
          <div className="bg-[#0b0c10] border border-white/5 rounded-2xl w-full max-w-md overflow-hidden shadow-[0_25px_60px_rgba(0,0,0,0.8)] select-none max-h-[95vh] overflow-y-auto custom-scrollbar">
            {/* Header */}
            <div className="bg-[#0b0c10]/95 backdrop-blur-sm border-b border-white/5 px-4 py-3">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2.5">
                  <div className="w-8 h-8 rounded-xl bg-gradient-to-br from-emerald-500/20 to-teal-500/20 border border-emerald-500/20 flex items-center justify-center">
                    <RefreshCw size={15} className="text-emerald-450 animate-spin-slow" />
                  </div>
                  <div>
                    <h3 className="text-xs font-bold uppercase text-white tracking-wider leading-tight">
                      Renovar Perfil
                    </h3>
                    <p className="text-[9px] text-slate-400 font-medium tracking-wider mt-0.5">
                      Extender suscripción de cliente
                    </p>
                  </div>
                </div>
                <button
                  onClick={onCloseRenew}
                  className="text-slate-400 hover:text-white transition-all p-1 rounded-lg hover:bg-white/5"
                >
                  <X size={15} />
                </button>
              </div>
            </div>

            {/* Form body */}
            <div className="p-4 space-y-4">
              {(() => {
                const isCatalog = renewPerfilData.id_catalogo !== undefined && renewPerfilData.id_catalogo !== null;
                const duracionCatalog = renewPerfilData.duracion_meses || 1;
                const ciclo = renewPerfilData.ciclo_cobro || 1;
                const duracionBase = isCatalog ? duracionCatalog : ciclo;
                const isMultiMonth = duracionBase > 1;
                const mesesTotales = duracionBase * cantidadRenovaciones;
                return (
                  <>
                    <div className="bg-white/3 border border-white/5 rounded-xl p-3.5">
                      <p className="text-xs text-slate-350 leading-relaxed">
                        Se extenderá el servicio por{' '}
                        <strong className="text-emerald-400 font-bold">
                          {isMultiMonth 
                            ? `${mesesTotales} meses (${cantidadRenovaciones} ciclo(s) de ${duracionBase} meses)` 
                            : `${mesesTotales} mes(es)`}
                        </strong>{' '}
                        para el cliente <strong className="text-pink-400 font-bold">{renewPerfilData.nombre_perfil}</strong>.
                      </p>
                    </div>

                    <div className="grid grid-cols-2 gap-3">
                      <div>
                        <label className="text-[8px] font-bold uppercase text-slate-400 mb-1 block">
                          Cantidad de Renovaciones
                        </label>
                        <input
                          type="number"
                          min="1"
                          className="w-full h-8 bg-[#050507] border border-white/10 hover:border-pink-500/30 focus:border-pink-500/40 rounded-lg px-3 text-xs text-slate-200 outline-none transition-all"
                          value={cantidadRenovaciones}
                          onChange={(e) => setCantidadRenovaciones(parseInt(e.target.value) || 1)}
                        />
                      </div>

                      <div>
                        <label className="text-[8px] font-bold uppercase text-slate-400 mb-1 block">
                          Ciclo de Cobro
                        </label>
                        <div className="w-full h-8 bg-black/40 border border-white/5 rounded-lg px-3 text-xs text-slate-400 flex items-center">
                          {isCatalog ? `Catálogo (${duracionBase} mes${duracionBase > 1 ? 'es' : ''})` : (isMultiMonth ? `${ciclo} meses` : '1 mes (Sencillo)')}
                        </div>
                      </div>
                    </div>

                    <div>
                      <label className="text-[9px] font-bold uppercase text-slate-400 mb-1 block flex items-center gap-1">
                        <DollarSign size={11} className="text-emerald-400" /> Monto de Pago Total (Renovación)
                      </label>
                      <input
                        type="number"
                        step="0.01"
                        className="w-full h-8 bg-[#050507] border border-white/10 hover:border-pink-500/30 focus:border-pink-500/40 rounded-lg px-3 text-xs font-bold text-pink-400 outline-none transition-all"
                        value={renewMonto}
                        onChange={(e) => setRenewMonto(parseFloat(e.target.value) || 0)}
                      />
                    </div>
                  </>
                );
              })()}
            </div>

            {/* Footer Buttons */}
            <div className="flex gap-2.5 p-4 border-t border-white/5 bg-[#0a0b10]">
              <button
                onClick={onCloseRenew}
                className="flex-1 h-8 border border-white/10 hover:border-white/20 hover:bg-white/5 text-slate-400 hover:text-white font-bold text-[9px] uppercase tracking-wider rounded-lg transition-all flex items-center justify-center gap-1.5 cursor-pointer active:scale-95"
              >
                Cancelar
              </button>
              <button
                onClick={handleConfirmRenew}
                disabled={renewing}
                className="flex-1 h-8 bg-gradient-to-r from-pink-600 to-purple-600 hover:from-pink-500 hover:to-purple-500 text-white font-bold text-[9px] uppercase tracking-wider rounded-lg shadow-sm transition-all flex items-center justify-center gap-1.5 cursor-pointer active:scale-95 disabled:opacity-50"
              >
                {renewing ? 'Procesando...' : 'Confirmar'}
              </button>
            </div>
          </div>
        </div>
      )}

      {/* CHANGE PLATFORM MODAL */}
      {changePerfilId && changePerfilData && (
        <div className="fixed inset-0 z-[200] flex items-center justify-center p-4 bg-black/85 backdrop-blur-sm animate-fadeIn">
          <div className="bg-[#0b0c10] border border-white/5 rounded-2xl w-full max-w-md overflow-hidden shadow-[0_25px_60px_rgba(0,0,0,0.8)] select-none max-h-[95vh] overflow-y-auto custom-scrollbar">
            {/* Header */}
            <div className="bg-[#0b0c10]/95 backdrop-blur-sm border-b border-white/5 px-4 py-3">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2.5">
                  <div className="w-8 h-8 rounded-xl bg-gradient-to-br from-blue-500/20 to-indigo-500/20 border border-blue-500/20 flex items-center justify-center">
                    <Shuffle size={15} className="text-blue-400" />
                  </div>
                  <div>
                    <h3 className="text-xs font-bold uppercase text-white tracking-wider leading-tight">
                      Cambiar Plataforma
                    </h3>
                    <p className="text-[9px] text-slate-400 font-medium tracking-wider mt-0.5">
                      Migrar perfil de cliente
                    </p>
                  </div>
                </div>
                <button
                  onClick={onCloseChange}
                  className="text-slate-400 hover:text-white transition-all p-1 rounded-lg hover:bg-white/5"
                >
                  <X size={15} />
                </button>
              </div>
            </div>

            {/* Form body */}
            <div className="p-4 space-y-4">
              <div className="bg-white/3 border border-white/5 rounded-xl p-3.5 flex justify-between items-center text-xs">
                <span className="text-slate-400">Días vigentes restantes:</span>
                <span className="font-bold text-white font-mono bg-white/5 px-2 py-0.5 rounded-full border border-white/5">
                  {getRemainingDays(changePerfilData.fecha_vencimiento)} días
                </span>
              </div>

              <div className="space-y-3">
                <div>
                  <label className="text-[9px] font-bold uppercase text-slate-400 mb-1 block">Seleccionar Nueva Plataforma</label>
                  <select
                    className="w-full h-8 bg-[#050507] border border-white/10 hover:border-pink-500/30 focus:border-pink-500/40 rounded-lg px-3 text-xs text-slate-200 outline-none transition-all"
                    value={selectedDestPlatform}
                    onChange={(e) => setSelectedDestPlatform(parseInt(e.target.value) || 0)}
                  >
                    {allPlatforms.length === 0 ? (
                      <option value="0">Cargando plataformas...</option>
                    ) : (
                      allPlatforms.map((p) => (
                        <option key={p.id} value={p.id}>{p.nombre_plataforma}</option>
                      ))
                    )}
                  </select>
                </div>

                {selectedDestPlatform > 0 && (
                  <div>
                    <label className="text-[9px] font-bold uppercase text-slate-400 mb-1 block">Seleccionar Cuenta (Correo)</label>
                    <select
                      className="w-full h-8 bg-[#050507] border border-white/10 hover:border-pink-500/30 focus:border-pink-500/40 rounded-lg px-3 text-xs text-slate-200 outline-none transition-all"
                      value={selectedSubcuenta}
                      onChange={(e) => setSelectedSubcuenta(parseInt(e.target.value) || 0)}
                    >
                      {subcuentasDest.length === 0 ? (
                        <option value="0">No hay cuentas activas en esta plataforma</option>
                      ) : (
                        subcuentasDest.map((sub) => (
                          <option key={sub.id} value={sub.id}>
                            {sub.correo} ({sub.llenas}/{sub.total} perfiles)
                          </option>
                        ))
                      )}
                    </select>
                  </div>
                )}

                <div className="bg-white/3 border border-white/5 rounded-xl p-3 flex items-start gap-2">
                  <HelpCircle size={14} className="text-slate-500 mt-0.5 shrink-0" />
                  <p className="text-[9.5px] text-slate-400 leading-relaxed">
                    Se asignará el cliente a la cuenta seleccionada. Si la cuenta no tiene perfiles libres, se creará uno nuevo automáticamente.
                  </p>
                </div>
              </div>
            </div>

            {/* Footer Buttons */}
            <div className="flex gap-2.5 p-4 border-t border-white/5 bg-[#0a0b10]">
              <button
                onClick={onCloseChange}
                className="flex-1 h-8 border border-white/10 hover:border-white/20 hover:bg-white/5 text-slate-400 hover:text-white font-bold text-[9px] uppercase tracking-wider rounded-lg transition-all flex items-center justify-center gap-1.5 cursor-pointer active:scale-95"
              >
                Cancelar
              </button>
              <button
                onClick={handleConfirmChange}
                disabled={changing || allPlatforms.length === 0 || !selectedDestPlatform}
                className="flex-1 h-8 bg-gradient-to-r from-pink-600 to-purple-600 hover:from-pink-500 hover:to-purple-500 text-white font-bold text-[9px] uppercase tracking-wider rounded-lg shadow-sm transition-all flex items-center justify-center gap-1.5 cursor-pointer active:scale-95 disabled:opacity-50"
              >
                {changing ? 'Cambiando...' : 'Confirmar'}
              </button>
            </div>
          </div>
        </div>
      )}

      {/* DELETE MODAL */}
      {deletePerfilId && deletePerfilData && (() => {
        const montoCompra = resumenDesvinculacion?.precio_compra ?? deletePerfilData.precio_compra ?? deletePerfilData.monto_pago ?? 0;
        const diasRestantes = resumenDesvinculacion?.dias_restantes ?? deletePerfilData.dias_restantes ?? 0;
        const devolucionMonto = resumenDesvinculacion?.devolucion ?? deletePerfilData.devolucion ?? 0;

        return (
          <div className="fixed inset-0 z-[200] flex items-center justify-center p-4 bg-black/85 backdrop-blur-sm animate-fadeIn">
            <div className="bg-[#0b0c10] border border-white/5 rounded-2xl w-full max-w-md overflow-hidden shadow-[0_25px_60px_rgba(0,0,0,0.8)] select-none max-h-[95vh] overflow-y-auto custom-scrollbar">
              {/* Header */}
              <div className="bg-[#0b0c10]/95 backdrop-blur-sm border-b border-white/5 px-4 py-3">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2.5">
                    <div className="w-8 h-8 rounded-xl bg-gradient-to-br from-red-500/20 to-orange-500/20 border border-red-500/20 flex items-center justify-center">
                      <Trash2 size={15} className="text-red-400" />
                    </div>
                    <div>
                      <h3 className="text-xs font-bold uppercase text-white tracking-wider leading-tight">
                        Eliminar Perfil
                      </h3>
                      <p className="text-[9px] text-slate-400 font-medium tracking-wider mt-0.5">
                        Eliminación y Desvinculación de cuentas
                      </p>
                    </div>
                  </div>
                  <button
                    onClick={onCloseDelete}
                    className="text-slate-400 hover:text-white transition-all p-1 rounded-lg hover:bg-white/5"
                  >
                    <X size={15} />
                  </button>
                </div>
              </div>

              {/* Form body */}
              <div className="p-4 space-y-4">
                <div className="bg-white/3 border border-white/5 rounded-xl p-3.5">
                  <p className="text-xs text-slate-350">
                    ¿Estás seguro de eliminar el perfil <strong className="text-white font-bold">{deletePerfilData.nombre_perfil}</strong>?
                  </p>
                </div>

                <div className="bg-white/3 border border-white/5 rounded-xl p-3.5 space-y-2">
                  <div className="flex justify-between text-xs">
                    <span className="text-slate-400">Monto pagado original:</span>
                    <span className="font-bold text-slate-200">
                      {loadingResumen ? 'Cargando...' : `S/. ${parseFloat(String(montoCompra)).toFixed(2)}`}
                    </span>
                  </div>
                  <div className="flex justify-between text-xs">
                    <span className="text-slate-400">Días restantes de vigencia:</span>
                    <span className="font-bold text-slate-200">
                      {loadingResumen ? 'Cargando...' : `${diasRestantes} días`}
                    </span>
                  </div>
                  <div className="flex justify-between text-xs pt-2 border-t border-white/5">
                    <span className="font-bold text-red-400">Devolución sugerida:</span>
                    <span className="font-bold text-emerald-400 font-mono text-xs">
                      {loadingResumen ? 'Cargando...' : `S/. ${parseFloat(String(devolucionMonto)).toFixed(2)}`}
                    </span>
                  </div>
                </div>

                {/* Opciones de Eliminación */}
                <div className="bg-[#050507] border border-white/15 rounded-xl p-3.5 space-y-3">
                  <label className="text-[9px] uppercase font-black text-slate-500 block">Acción de Eliminación</label>
                  
                  <label className="flex items-start gap-2.5 text-xs text-slate-300 cursor-pointer">
                    <input
                      type="radio"
                      name="deleteOption"
                      checked={!eliminarCompleto}
                      onChange={() => setEliminarCompleto(false)}
                      className="mt-0.5 text-pink-500 focus:ring-pink-500/50 cursor-pointer"
                    />
                    <div>
                      <span className="font-bold block text-slate-200">No eliminar perfil</span>
                      <span className="text-[9px] text-slate-500">El perfil creado no se elimina solo el cliente</span>
                    </div>
                  </label>
                  
                  <label className="flex items-start gap-2.5 text-xs text-slate-350 cursor-pointer pt-2 border-t border-white/5">
                    <input
                      type="radio"
                      name="deleteOption"
                      checked={eliminarCompleto}
                      onChange={() => setEliminarCompleto(true)}
                      className="mt-0.5 text-red-500 focus:ring-red-500/50 cursor-pointer"
                    />
                    <div>
                      <span className="font-bold block text-red-400">Eliminar perfil completo</span>
                      <span className="text-[9px] text-slate-500">Elimina el perfil creado y el cliente </span>
                    </div>
                  </label>
                </div>
              </div>

              {/* Footer Buttons */}
              <div className="flex gap-2.5 p-4 border-t border-white/5 bg-[#0a0b10]">
                <button
                  onClick={onCloseDelete}
                  className="flex-1 h-8 border border-white/10 hover:border-white/20 hover:bg-white/5 text-slate-400 hover:text-white font-bold text-[9px] uppercase tracking-wider rounded-lg transition-all flex items-center justify-center gap-1.5 cursor-pointer active:scale-95"
                >
                  Cancelar
                </button>
                <button
                  onClick={handleConfirmDelete}
                  disabled={deleting}
                  className="flex-1 h-8 bg-gradient-to-r from-red-600 to-orange-600 hover:from-red-500 hover:to-orange-500 text-white font-bold text-[9px] uppercase tracking-wider rounded-lg shadow-sm transition-all flex items-center justify-center gap-1.5 cursor-pointer active:scale-95 disabled:opacity-50"
                >
                  {deleting ? 'Procesando...' : 'Confirmar'}
                </button>
              </div>
            </div>
          </div>
        );
      })()}
      
      <style jsx>{`
        .animate-fadeIn {
          animation: fadeIn 0.2s ease-in-out;
        }
        .animate-spin-slow {
          animation: spin 3s linear infinite;
        }
        @keyframes fadeIn {
          from {
            opacity: 0;
            transform: scale(0.98);
          }
          to {
            opacity: 1;
            transform: scale(1);
          }
        }
        @keyframes spin {
          from {
            transform: rotate(0deg);
          }
          to {
            transform: rotate(360deg);
          }
        }
      `}</style>
    </>
  );
}