import { useState, useEffect } from 'react';
import toast from 'react-hot-toast';
import styles from './SimpleTable.module.css';

const BASE_URL = 'http://localhost:5198/api';

// Interfaces para los diferentes tipos de datos
interface TextValue {
  valor: string;
  conteo: number;
}
interface RamValue {
  id: number;
  fabricante?: string;
  tamano: number;
  velocidad?: number;
  partNumber?: string;
  conteo: number;
}

const GestionComponentes = () => {
  const [componentType, setComponentType] = useState('os');
  const [valores, setValores] = useState<(TextValue | RamValue)[]>([]); // Estado que acepta ambos tipos
  const [isLoading, setIsLoading] = useState(false);

  const [isModalOpen, setIsModalOpen] = useState(false);
  const [valorAntiguo, setValorAntiguo] = useState('');
  const [valorNuevo, setValorNuevo] = useState('');

  useEffect(() => {
    setIsLoading(true);
    const endpoint = componentType === 'ram' ? `${BASE_URL}/admin/componentes/ram` : `${BASE_URL}/admin/componentes/${componentType}`;

    fetch(endpoint)
      .then(res => res.json())
      .then(data => {
        setValores(data);
      })
      .catch(_err => {
        toast.error(`No se pudieron cargar los datos de ${componentType}.`);
      })
      .finally(() => setIsLoading(false));
  }, [componentType]);

  const handleOpenModal = (valor: string) => {
    setValorAntiguo(valor);
    setValorNuevo(valor);
    setIsModalOpen(true);
  };

  const handleUnificar = async () => {
    const toastId = toast.loading('Unificando valores...');
    try {
      const response = await fetch(`${BASE_URL}/admin/componentes/${componentType}/unificar`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ valorAntiguo, valorNuevo }),
      });

      if (!response.ok) {
        const error = await response.json();
        throw new Error(error.message || 'La unificación falló.');
      }

      // Refrescar la lista para ver el resultado
      const refreshedData = await (await fetch(`${BASE_URL}/admin/componentes/${componentType}`)).json();
      setValores(refreshedData);

      toast.success('Valores unificados correctamente.', { id: toastId });
      setIsModalOpen(false);
    } catch (error) {
      if (error instanceof Error) toast.error(error.message, { id: toastId });
    }
  };

  const handleDeleteRam = async (ramId: number) => {
    if (!window.confirm("¿Estás seguro de eliminar este módulo de RAM de la base de datos maestra? Esta acción es irreversible.")) {
      return;
    }

    const toastId = toast.loading('Eliminando módulo...');
    try {
      const response = await fetch(`${BASE_URL}/admin/componentes/ram/${ramId}`, { method: 'DELETE' });

      if (!response.ok) {
        const error = await response.json();
        throw new Error(error.message || 'No se pudo eliminar.');
      }

      setValores(prev => prev.filter(v => (v as RamValue).id !== ramId));
      toast.success("Módulo de RAM eliminado.", { id: toastId });
    } catch (error) {
      if (error instanceof Error) toast.error(error.message, { id: toastId });
    }
  };

  const handleDeleteTexto = async (valor: string) => {
        if (!window.confirm(`Este valor ya no está en uso. ¿Quieres intentar eliminarlo de la base de datos maestra? (Si no existe una tabla maestra, esta acción solo confirmará que no hay usos)`)) {
            return;
        }

        const toastId = toast.loading('Eliminando valor...');
        try {
            // La API necesita el valor codificado para manejar caracteres especiales como '/'
            const encodedValue = encodeURIComponent(valor);
            const response = await fetch(`${BASE_URL}/admin/componentes/${componentType}/${encodedValue}`, { method: 'DELETE' });

            if (!response.ok) {
                const error = await response.json();
                throw new Error(error.message || 'No se pudo eliminar.');
            }

            setValores(prev => prev.filter(v => (v as TextValue).valor !== valor));
            toast.success("Valor eliminado/confirmado como no existente.", { id: toastId });
        } catch (error) {
            if (error instanceof Error) toast.error(error.message, { id: toastId });
        }
    };

  const renderValor = (item: TextValue | RamValue) => {
    if (componentType === 'ram') {
      const ram = item as RamValue;
      return `${ram.fabricante || ''} ${ram.tamano}GB ${ram.velocidad ? ram.velocidad + 'MHz' : ''} (${ram.partNumber || 'N/P'})`;
    }
    return (item as TextValue).valor;
  };

  return (
        <div>
            <h2>Gestión de Componentes Maestros</h2>
            <p>Unifica valores inconsistentes y elimina registros no utilizados.</p>

            <div style={{ marginBottom: '1.5rem' }}>
                <label><strong>Selecciona un tipo de componente:</strong></label>
                <select value={componentType} onChange={e => setComponentType(e.target.value)} className={styles.sectorSelect} style={{marginLeft: '10px'}}>
                    <option value="os">Sistema Operativo</option>
                    <option value="cpu">CPU</option>
                    <option value="motherboard">Motherboard</option>
                    <option value="architecture">Arquitectura</option>
                    <option value="ram">Memorias RAM</option>
                </select>
            </div>
            
            {isLoading ? (
                <p>Cargando...</p>
            ) : (
                <table className={styles.table}>
                    <thead>
                        <tr>
                            <th className={styles.th}>Valor Registrado</th>
                            <th className={styles.th} style={{width: '150px'}}>Nº de Equipos</th>
                            <th className={styles.th} style={{width: '200px'}}>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        {valores.map((item) => (
                            <tr key={componentType === 'ram' ? (item as RamValue).id : (item as TextValue).valor} className={styles.tr}>
                                <td className={styles.td}>{renderValor(item)}</td>
                                <td className={styles.td}>{item.conteo}</td>
                                <td className={styles.td}>
                                    <div style={{display: 'flex', gap: '5px'}}>
                                        {componentType === 'ram' ? (
                                            // Lógica solo para RAM (no tiene sentido "unificar" un objeto complejo)
                                            <button 
                                                onClick={() => handleDeleteRam((item as RamValue).id)} 
                                                className={styles.deleteUserButton} 
                                                style={{fontSize: '0.9em', border: '1px solid', borderRadius: '4px', padding: '4px 8px', cursor: item.conteo > 0 ? 'not-allowed' : 'pointer', opacity: item.conteo > 0 ? 0.5 : 1}}
                                                disabled={item.conteo > 0}
                                                title={item.conteo > 0 ? `En uso por ${item.conteo} equipo(s)` : 'Eliminar este módulo maestro'}
                                            >
                                                🗑️ Eliminar
                                            </button>
                                        ) : (
                                            // Lógica para todos los demás tipos de componentes (texto)
                                            <>
                                                <button onClick={() => handleOpenModal((item as TextValue).valor)} className={styles.tableButton}>
                                                    ✏️ Unificar
                                                </button>
                                                <button 
                                                    onClick={() => handleDeleteTexto((item as TextValue).valor)} 
                                                    className={styles.deleteUserButton} 
                                                    style={{fontSize: '0.9em', border: '1px solid', borderRadius: '4px', padding: '4px 8px', cursor: item.conteo > 0 ? 'not-allowed' : 'pointer', opacity: item.conteo > 0 ? 0.5 : 1}}
                                                    disabled={item.conteo > 0}
                                                    title={item.conteo > 0 ? `En uso por ${item.conteo} equipo(s). Unifique primero.` : 'Eliminar este valor'}
                                                >
                                                    🗑️ Eliminar
                                                </button>
                                            </>
                                        )}
                                    </div>
                                </td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            )}

            {isModalOpen && (
                <div className={styles.modalOverlay}>
                    <div className={styles.modal}>
                        <h3>Unificar Valor</h3>
                        <p>Se reemplazarán todas las instancias de:</p>
                        <strong style={{ display: 'block', marginBottom: '1rem', background: '#e9ecef', padding: '8px', borderRadius: '4px' }}>{valorAntiguo}</strong>
                        <label>Por el nuevo valor:</label>
                        <input type="text" value={valorNuevo} onChange={e => setValorNuevo(e.target.value)} className={styles.modalInput} />
                        <div className={styles.modalActions}>
                            <button onClick={handleUnificar} className={`${styles.btn} ${styles.btnPrimary}`} disabled={!valorNuevo.trim() || valorNuevo === valorAntiguo}>Unificar</button>
                            <button onClick={() => setIsModalOpen(false)} className={`${styles.btn} ${styles.btnSecondary}`}>Cancelar</button>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
};

export default GestionComponentes;