import React, { useEffect, useRef, useState, type CSSProperties } from 'react';
import {
  useReactTable,
  getCoreRowModel,
  getFilteredRowModel,
  getSortedRowModel,
  flexRender,
  type CellContext
} from '@tanstack/react-table';
import { Tooltip } from 'react-tooltip';
import type { Equipo, Sector, Usuario, HistorialEquipo } from '../types/interfaces';

const SimpleTable = () => {
  const [data, setData] = useState<Equipo[]>([]);
  const [filteredData, setFilteredData] = useState<Equipo[]>([]);
  const [globalFilter, setGlobalFilter] = useState('');
  const [selectedSector, setSelectedSector] = useState('Todos');
  const [modalData, setModalData] = useState<Equipo | null>(null);
  const [sectores, setSectores] = useState<Sector[]>([]);
  const [modalPasswordData, setModalPasswordData] = useState<Usuario | null>(null);
  const [newPassword, setNewPassword] = useState('');
  const [showScrollButton, setShowScrollButton] = useState(false);
  const [selectedEquipo, setSelectedEquipo] = useState<Equipo | null>(null);
  const [historial, setHistorial] = useState<HistorialEquipo[]>([]);
  const [isOnline, setIsOnline] = useState(false);
  const passwordInputRef = useRef<HTMLInputElement>(null);
  const BASE_URL = 'http://localhost:5198/api';

  useEffect(() => {
    const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;

    if (selectedEquipo || modalData || modalPasswordData) {
      document.body.classList.add('scroll-lock');
      document.body.style.paddingRight = `${scrollBarWidth}px`;
    } else {
      document.body.classList.remove('scroll-lock');
      document.body.style.paddingRight = '0';
    }

    return () => {
      document.body.classList.remove('scroll-lock');
      document.body.style.paddingRight = '0';
    };
  }, [selectedEquipo, modalData, modalPasswordData]);

  useEffect(() => {
    let isMounted = true;

    const checkPing = async () => {
      if (!selectedEquipo?.ip) return;

      try {
        const controller = new AbortController();
        const timeoutId = setTimeout(() => controller.abort(), 5000);

        const response = await fetch(`${BASE_URL}/equipos/ping`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ ip: selectedEquipo.ip }),
          signal: controller.signal
        });

        clearTimeout(timeoutId);

        if (!response.ok) throw new Error('Error en la respuesta');

        const data = await response.json();
        if (isMounted) setIsOnline(data.isAlive);

      } catch (error) {
        if (isMounted) setIsOnline(false);
        console.error('Error checking ping:', error);
      }
    };

    checkPing();
    const interval = setInterval(checkPing, 10000);

    return () => {
      isMounted = false;
      clearInterval(interval);
      setIsOnline(false);
    };
  }, [selectedEquipo?.ip]);

  const handleCloseModal = () => {
    setSelectedEquipo(null);
    setIsOnline(false);
  };

  useEffect(() => {
    if (selectedEquipo) {
      fetch(`${BASE_URL}/equipos/${selectedEquipo.hostname}/historial`)
        .then(response => response.json())
        .then(data => setHistorial(data.historial))
        .catch(error => console.error('Error fetching history:', error));
    }
  }, [selectedEquipo]);

  useEffect(() => {
    const handleScroll = () => {
      setShowScrollButton(window.scrollY > 200);
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  useEffect(() => {
    if (modalPasswordData && passwordInputRef.current) {
      passwordInputRef.current.focus();
    }
  }, [modalPasswordData]);

  useEffect(() => {
    fetch(`${BASE_URL}/equipos`)
      .then(response => response.json())
      .then((fetchedData: Equipo[]) => {
        setData(fetchedData);
        setFilteredData(fetchedData);
      });

    fetch(`${BASE_URL}/sectores`)
      .then(response => response.json())
      .then((fetchedSectores: Sector[]) => {
        const sectoresOrdenados = [...fetchedSectores].sort((a, b) =>
          a.nombre.localeCompare(b.nombre, 'es', { sensitivity: 'base' })
        );
        setSectores(sectoresOrdenados);
      });
  }, []);

  const handleSectorChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    const selectedValue = e.target.value;
    setSelectedSector(selectedValue);

    if (selectedValue === 'Todos') {
      setFilteredData(data);
    } else if (selectedValue === 'Asignar') {
      const filtered = data.filter(item => !item.sector);
      setFilteredData(filtered);
    } else {
      const filtered = data.filter(item => item.sector?.nombre === selectedValue);
      setFilteredData(filtered);
    }
  };

  const handleSave = async () => {
    if (!modalData || !modalData.sector) return;

    try {
      const response = await fetch(`${BASE_URL}/equipos/${modalData.id}/sector/${modalData.sector.id}`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' }
      });

      if (!response.ok) throw new Error('Error al asociar el sector');

      // Actualizamos el dato localmente para reflejar el cambio inmediatamente
      const updatedData = data.map(e => e.id === modalData.id ? { ...e, sector: modalData.sector } : e);
      setData(updatedData);
      setFilteredData(updatedData);

      setModalData(null);
    } catch (error) {
      console.error(error);
    }
  };

  const handleSavePassword = async () => {
    if (!modalPasswordData) return;
    try {
      const response = await fetch(`${BASE_URL}/usuarios/${modalPasswordData.id}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ password: newPassword }),
      });

      if (!response.ok) {
        const errorData = await response.json();
        throw new Error(errorData.error || 'Error al actualizar la contraseña');
      }

      const updatedUser = await response.json();

      const updatedData = data.map(equipo => ({
        ...equipo,
        usuarios: equipo.usuarios?.map(user =>
          user.id === updatedUser.id ? { ...user, password: newPassword } : user
        )
      }));

      setData(updatedData);
      setFilteredData(updatedData);
      setModalPasswordData(null);
      setNewPassword('');

    } catch (error) {
      if (error instanceof Error) {
        console.error('Error:', error);
        alert(error.message);
      }
    }
  };

  const handleRemoveUser = async (hostname: string, username: string) => {
    if (!window.confirm(`¿Quitar a ${username} de este equipo?`)) return;

    try {
      const response = await fetch(`${BASE_URL}/equipos/${hostname}/usuarios/${username}`, {
        method: 'DELETE'
      });

      const result = await response.json();
      if (!response.ok) throw new Error(result.error || 'Error al desasociar usuario');

      const updateFunc = (prevData: Equipo[]) => prevData.map(equipo => {
        if (equipo.hostname === hostname) {
          return {
            ...equipo,
            usuarios: equipo.usuarios.filter(u => u.username !== username),
          };
        }
        return equipo;
      });

      setData(updateFunc);
      setFilteredData(updateFunc);

    } catch (error) {
      if (error instanceof Error) {
        console.error('Error:', error);
        alert(error.message);
      }
    }
  };

  const handleDelete = async (id: number) => {
    if (!window.confirm('¿Estás seguro de eliminar este equipo y todas sus relaciones?')) return false;

    try {
      const response = await fetch(`${BASE_URL}/equipos/${id}`, {
        method: 'DELETE'
      });

      if (response.status === 204) {
        setData(prev => prev.filter(equipo => equipo.id !== id));
        setFilteredData(prev => prev.filter(equipo => equipo.id !== id));
        return true;
      }

      const errorText = await response.text();
      throw new Error(errorText);

    } catch (error) {
      if (error instanceof Error) {
        console.error('Error eliminando equipo:', error);
        alert(`Error al eliminar el equipo: ${error.message}`);
      }
      return false;
    }
  };

  const columns = [
    { header: "ID", accessorKey: "id", enableHiding: true },
    {
      header: "Nombre",
      accessorKey: "hostname",
      cell: ({ row }: CellContext<Equipo, any>) => (
        <button
          onClick={() => setSelectedEquipo(row.original)}
          style={{
            background: 'none',
            border: 'none',
            color: '#007bff',
            cursor: 'pointer',
            textDecoration: 'underline',
            padding: 0,
            fontSize: 'inherit'
          }}
        >
          {row.original.hostname}
        </button>
      )
    },
    { header: "IP", accessorKey: "ip" },
    { header: "MAC", accessorKey: "mac", enableHiding: true },
    { header: "Motherboard", accessorKey: "motherboard" },
    { header: "CPU", accessorKey: "cpu" },
    { header: "RAM", accessorKey: "ram_installed" },
    {
      header: "Discos",
      accessorFn: (row: Equipo) => row.discos?.length > 0
        ? row.discos.map(d => `${d.mediatype} ${d.size}GB`).join(" | ")
        : "Sin discos"
    },
    { header: "OS", accessorKey: "os" },
    { header: "Arquitectura", accessorKey: "architecture" },
    {
      header: "Usuarios y Claves",
      cell: ({ row }: CellContext<Equipo, any>) => {
        const usuarios = row.original.usuarios || [];
        return (
          <div style={{ minWidth: "240px" }}>
            {usuarios.map((u: Usuario) => (
              <div
                key={u.id}
                style={{
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "space-between",
                  margin: "4px 0",
                  padding: "6px",
                  backgroundColor: '#f8f9fa',
                  borderRadius: '4px',
                  position: 'relative'
                }}
              >
                <span style={{ color: '#495057' }}>
                  U: {u.username} - C: {u.password || 'N/A'}
                </span>

                <div style={{ display: 'flex', gap: '4px', alignItems: 'center' }}>
                  <button
                    onClick={() => setModalPasswordData(u)}
                    style={tableButtonStyle}
                    data-tooltip-id={`edit-${u.id}`}
                  >
                    ✏️
                    <Tooltip id={`edit-${u.id}`} place="top">
                      Cambiar contraseña
                    </Tooltip>
                  </button>

                  <button
                    onClick={() => handleRemoveUser(row.original.hostname, u.username)}
                    style={deleteUserButtonStyle}
                    data-tooltip-id={`remove-${u.id}`}
                  >
                    ×
                    <Tooltip id={`remove-${u.id}`} place="top">
                      Quitar del equipo
                    </Tooltip>
                  </button>
                </div>
              </div>
            ))}
          </div>
        );
      }
    },
    {
      header: "Sector",
      id: 'sector',
      accessorFn: (row: Equipo) => row.sector?.nombre || 'Asignar',
      cell: ({ row }: CellContext<Equipo, any>) => {
        const sector = row.original.sector;

        return (
          <div style={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            width: '100%',
            gap: '0.5rem'
          }}>
            <span style={{
              color: sector ? '#212529' : '#6c757d',
              fontStyle: sector ? 'normal' : 'italic',
              flex: 1,
              overflow: 'hidden',
              textOverflow: 'ellipsis',
              whiteSpace: 'nowrap'
            }}>
              {sector?.nombre || 'Asignar'}
            </span>

            <button
              onClick={() => setModalData(row.original)}
              style={tableButtonStyle}
              data-tooltip-id={`editSector-${row.id}`}
            >
              ✏️
              <Tooltip id={`editSector-${row.id}`} place="top">
                Cambiar sector
              </Tooltip>
            </button>
          </div>
        );
      }
    }
  ];

  const table = useReactTable({
    data: filteredData,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    getSortedRowModel: getSortedRowModel(),
    initialState: {
      sorting: [
        { id: 'sector', desc: false },
        { id: 'hostname', desc: false }
      ],
      columnVisibility: { id: false, mac: false }
    },
    state: {
      globalFilter,
    },
    onGlobalFilterChange: setGlobalFilter,
  });

  return (
    <div>
      <h2>Equipos</h2>
      <div style={{ display: 'flex', gap: '20px', marginBottom: '10px' }}>
        <input
          type="text"
          placeholder="Buscar..."
          value={globalFilter}
          onChange={(e) => setGlobalFilter(e.target.value)} />
        <b>Selección de sector:</b>
        <select value={selectedSector} onChange={handleSectorChange}>
          <option value="Todos">-Todos-</option>
          <option value="Asignar">-Asignar-</option>
          {sectores.map(sector => (
            <option key={sector.id} value={sector.nombre}>{sector.nombre}</option>
          ))}
        </select>
      </div>
      <hr />
      <table style={tableStyle}>
        <thead>
          {table.getHeaderGroups().map(headerGroup => (
            <tr key={headerGroup.id}>
              {headerGroup.headers.map(header => (
                <th
                  key={header.id}
                  style={headerStyle}
                  onClick={header.column.getToggleSortingHandler()}>
                  {flexRender(header.column.columnDef.header, header.getContext())}
                  {header.column.getIsSorted() && (
                    <span style={{
                      marginLeft: '0.5rem',
                      fontSize: '1.2em',
                      display: 'inline-block',
                      transform: 'translateY(-1px)',
                      color: '#007bff',
                      minWidth: '20px'
                    }}>
                      {header.column.getIsSorted() === 'asc' ? '⇑' : '⇓'}
                    </span>
                  )}
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody>
          {table.getRowModel().rows.map(row => (
            <tr key={row.id} style={rowStyle}>
              {row.getVisibleCells().map(cell => (
                <td key={cell.id} style={cellStyle}>
                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>

      {showScrollButton && (
        <button
          onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
          style={scrollToTopStyle}
          title="Volver arriba"
        >
          ↑
        </button>
      )}

      {modalData && (
        <div style={modalStyle}>
          <h3 style={{ margin: '0 0 1.5rem', color: '#2d3436' }}>Editar Sector</h3>
          <label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: '500' }}>
            Sector:
            <select
              style={inputStyle}
              value={modalData.sector?.id || ""}
              onChange={(e) => {
                const selectedId = e.target.value;
                const nuevoSector = selectedId === "" ? undefined : sectores.find(s => s.id === Number(selectedId));
                setModalData({ ...modalData, sector: nuevoSector });
              }}
            >
              <option value="">Asignar</option>
              {sectores.map(sector => (
                <option key={sector.id} value={sector.id}>{sector.nombre}</option>
              ))}
            </select>
          </label>

          <div style={{ display: 'flex', gap: '10px', marginTop: '1.5rem' }}>
            <button
              style={{ ...buttonStyle.base, ...(modalData.sector ? buttonStyle.primary : buttonStyle.disabled) }}
              onClick={handleSave}
              disabled={!modalData.sector}
            >
              Guardar cambios
            </button>
            <button
              style={{ ...buttonStyle.base, ...buttonStyle.secondary }}
              onClick={() => setModalData(null)}
            >
              Cancelar
            </button>
          </div>
        </div>
      )}
      {modalPasswordData && (
        <div style={modalStyle}>
          <h3 style={{ margin: '0 0 1.5rem', color: '#2d3436' }}>
            Cambiar contraseña para {modalPasswordData.username}
          </h3>
          <label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: '500' }}>
            Nueva contraseña:
            <input
              type="text"
              value={newPassword}
              onChange={(e) => setNewPassword(e.target.value)}
              style={inputStyle}
              placeholder="Ingrese la nueva contraseña"
              ref={passwordInputRef}
            />
          </label>
          <div style={{ display: 'flex', gap: '10px', justifyContent: 'flex-end' }}>
            <button
              style={{ ...buttonStyle.base, ...buttonStyle.primary }}
              onClick={handleSavePassword}
            >
              Guardar
            </button>
            <button
              style={{ ...buttonStyle.base, ...buttonStyle.secondary }}
              onClick={() => { setModalPasswordData(null); setNewPassword(''); }}
            >
              Cancelar
            </button>
          </div>
        </div>
      )}
      {selectedEquipo && (
        <div style={modalGrandeStyle}>
          <button onClick={handleCloseModal} style={closeButtonStyle}>
            ×
          </button>
          <div style={{ maxWidth: '95vw', marginBottom: '10px', width: '100%', padding: '10px' }}>
            <div style={modalHeaderStyle}>
              <h2>Datos del equipo '{selectedEquipo.hostname}'</h2>
            </div>
            <div style={seccionStyle}>
              <h3 style={tituloSeccionStyle}>Datos actuales</h3>
              <div style={gridDatosStyle}>
                {Object.entries(selectedEquipo).map(([key, value]) => {
                  // Omitimos claves que mostraremos de forma personalizada o no son relevantes aquí
                  if (['id', 'usuarios', 'sector', 'discos', 'historial', 'equiposDiscos', 'memoriasRam', 'sector_id'].includes(key)) return null;

                  const formattedValue = (key === 'created_at' || key === 'updated_at')
                    ? new Date(value as string).toLocaleString('es-ES')
                    : (value as any)?.toString() || 'N/A';

                  return (
                    <div key={key} style={datoItemStyle}>
                      <strong style={labelStyle}>{key.replace(/_/g, ' ')}:</strong>
                      <span style={valorStyle}>{formattedValue}</span>
                    </div>
                  );
                })}

                {/* --- CORRECCIÓN 1: Mostrar nombre del sector --- */}
                <div style={datoItemStyle}>
                  <strong style={labelStyle}>Sector:</strong>
                  <span style={valorStyle}>
                    {selectedEquipo.sector?.nombre || 'No asignado'}
                  </span>
                </div>

                <div style={datoItemStyle}>
                  <strong style={labelStyle}>Modulos RAM:</strong>
                  <span style={valorStyle}>
                    {selectedEquipo.memoriasRam?.map(m => `Slot ${m.slot}: ${m.partNumber || 'N/P'} ${m.tamano}GB ${m.velocidad || ''}MHz`).join(' | ') || 'N/A'}
                  </span>
                </div>
                <div style={datoItemStyle}>
                  <strong style={labelStyle}>Discos:</strong>
                  <span style={valorStyle}>
                    {selectedEquipo.discos?.map(d => `${d.mediatype} ${d.size}GB`).join(', ') || 'N/A'}
                  </span>
                </div>
                <div style={datoItemStyle}>
                  <strong style={labelStyle}>Usuarios:</strong>
                  <span style={valorStyle}>
                    {selectedEquipo.usuarios?.map(u => u.username).join(', ') || 'N/A'}
                  </span>
                </div>
                <div style={datoItemStyle}>
                  <strong style={labelStyle}>Estado:</strong>
                  <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                    <div style={{ width: '12px', height: '12px', borderRadius: '50%', backgroundColor: isOnline ? '#28a745' : '#dc3545', boxShadow: `0 0 8px ${isOnline ? '#28a74580' : '#dc354580'}` }} />
                    <span style={valorStyle}>{isOnline ? 'En línea' : 'Sin conexión'}</span>
                  </div>
                </div>
                <div style={datoItemStyle}>
                  <strong style={labelStyle}>Wake On Lan:</strong>
                  <button onClick={async () => {
                    try {
                      await fetch(`${BASE_URL}/equipos/wake-on-lan`, {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({ mac: selectedEquipo.mac, ip: selectedEquipo.ip })
                      });
                      alert('Solicitud de encendido enviada!');
                    } catch (error) {
                      console.error('Error al enviar la solicitud:', error);
                      alert('Error al enviar la solicitud');
                    }
                  }} style={powerButtonStyle} data-tooltip-id="modal-power-tooltip">
                    <img src="./img/power.png" alt="Encender equipo" style={powerIconStyle} />
                    <Tooltip id="modal-power-tooltip" place="top">Encender equipo (WOL)</Tooltip>
                  </button>
                </div>
                <div style={datoItemStyle}>
                  <strong style={labelStyle}>Eliminar Equipo:</strong>
                  <button onClick={async () => {
                    const success = await handleDelete(selectedEquipo.id);
                    if (success) handleCloseModal();
                  }} style={deleteButtonStyle} data-tooltip-id="modal-delete-tooltip">
                    ×
                    <Tooltip id="modal-delete-tooltip" place="top">Eliminar equipo permanentemente</Tooltip>
                  </button>
                </div>
              </div>
            </div>
            <div style={seccionStyle}>
              <h3 style={tituloSeccionStyle}>Historial de cambios</h3>
              <table style={historialTableStyle}>
                <thead>
                  <tr>
                    <th style={historialHeaderStyle}>Fecha</th>
                    <th style={historialHeaderStyle}>Campo modificado</th>
                    <th style={historialHeaderStyle}>Valor anterior</th>
                    <th style={historialHeaderStyle}>Valor nuevo</th>
                  </tr>
                </thead>
                <tbody>
                  {historial
                    .sort((a, b) => new Date(b.fecha_cambio).getTime() - new Date(a.fecha_cambio).getTime())
                    .map((cambio, index) => (
                      <tr key={index} style={index % 2 === 0 ? historialRowStyle : { ...historialRowStyle, backgroundColor: '#f8f9fa' }}>
                        <td style={historialCellStyle}>
                          {new Date(cambio.fecha_cambio).toLocaleString('es-ES', {
                            year: 'numeric', month: '2-digit', day: '2-digit',
                            hour: '2-digit', minute: '2-digit'
                          })}
                        </td>
                        <td style={historialCellStyle}>{cambio.campo_modificado}</td>
                        <td style={historialCellStyle}>{cambio.valor_anterior}</td>
                        <td style={historialCellStyle}>{cambio.valor_nuevo}</td>
                      </tr>
                    ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

// --- ESTILOS ---
const modalStyle: CSSProperties = {
  position: 'fixed', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', backgroundColor: '#ffffff',
  borderRadius: '12px', padding: '2rem', boxShadow: '0px 8px 30px rgba(0, 0, 0, 0.12)', zIndex: 1000,
  minWidth: '400px', maxWidth: '90%', border: '1px solid #e0e0e0', fontFamily: 'Segoe UI, sans-serif'
};
const buttonStyle = {
  base: { padding: '8px 20px', borderRadius: '6px', border: 'none', cursor: 'pointer', transition: 'all 0.2s ease', fontWeight: '500', fontSize: '14px' } as CSSProperties,
  primary: { backgroundColor: '#007bff', color: 'white' } as CSSProperties,
  secondary: { backgroundColor: '#6c757d', color: 'white' } as CSSProperties,
  disabled: { backgroundColor: '#e9ecef', color: '#6c757d', cursor: 'not-allowed' } as CSSProperties
};
const inputStyle: CSSProperties = { padding: '10px', borderRadius: '6px', border: '1px solid #ced4da', width: '100%', boxSizing: 'border-box', margin: '8px 0' };
const tableStyle: CSSProperties = { borderCollapse: 'collapse', fontFamily: 'system-ui, -apple-system, sans-serif', fontSize: '0.875rem', boxShadow: '0 1px 3px rgba(0,0,0,0.08)', tableLayout: 'auto', width: '100%' };
const headerStyle: CSSProperties = { color: '#212529', fontWeight: 600, padding: '0.75rem 1rem', borderBottom: '2px solid #dee2e6', textAlign: 'left', cursor: 'pointer', userSelect: 'none', whiteSpace: 'nowrap', position: 'sticky', top: -1, zIndex: 2, backgroundColor: '#f8f9fa' };
const cellStyle: CSSProperties = { padding: '0.75rem 1rem', borderBottom: '1px solid #e9ecef', color: '#495057', backgroundColor: 'white' };
const rowStyle: CSSProperties = { transition: 'background-color 0.2s ease' };
const tableButtonStyle: CSSProperties = { padding: '0.375rem 0.75rem', borderRadius: '4px', border: '1px solid #dee2e6', backgroundColor: 'transparent', color: '#212529', cursor: 'pointer', transition: 'all 0.2s ease' };
const deleteButtonStyle: CSSProperties = { background: 'none', border: 'none', cursor: 'pointer', color: '#dc3545', fontSize: '1.5em', padding: '0 5px', display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%' };
const deleteUserButtonStyle: CSSProperties = { background: 'none', border: 'none', cursor: 'pointer', color: '#dc3545', fontSize: '1.2em', padding: '0 5px', opacity: 0.7, transition: 'opacity 0.3s ease, color 0.3s ease' };
const scrollToTopStyle: CSSProperties = { position: 'fixed', bottom: '60px', right: '20px', width: '40px', height: '40px', borderRadius: '50%', backgroundColor: '#007bff', color: 'white', border: 'none', cursor: 'pointer', boxShadow: '0 2px 5px rgba(0,0,0,0.2)', fontSize: '20px', display: 'flex', alignItems: 'center', justifyContent: 'center', transition: 'opacity 0.3s, transform 0.3s', zIndex: 1002 };
const powerButtonStyle: CSSProperties = { background: 'none', border: 'none', cursor: 'pointer', padding: '5px', display: 'flex', alignItems: 'center', transition: 'transform 0.2s ease' };
const powerIconStyle: CSSProperties = { width: '24px', height: '24px' };
const modalGrandeStyle: CSSProperties = { position: 'fixed', top: '0', left: '0', width: '100vw', height: '100vh', backgroundColor: 'white', zIndex: 1003, overflowY: 'auto', display: 'flex', flexDirection: 'column', padding: '0px' };
const modalHeaderStyle: CSSProperties = { display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid #ddd', marginBottom: '10px', top: 0, backgroundColor: 'white', zIndex: 1000, paddingTop: '5px' };
const tituloSeccionStyle: CSSProperties = { fontSize: '1rem', margin: '0 0 15px 0', color: '#2d3436', fontWeight: 600 };
const closeButtonStyle: CSSProperties = { background: 'black', color: 'white', border: 'none', borderRadius: '50%', width: '30px', height: '30px', cursor: 'pointer', fontSize: '20px', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1004, boxShadow: '0 2px 5px rgba(0,0,0,0.2)', transition: 'transform 0.2s', position: 'fixed', right: '30px', top: '30px' };
const seccionStyle: CSSProperties = { backgroundColor: '#f8f9fa', borderRadius: '8px', padding: '15px', boxShadow: '0 2px 4px rgba(0,0,0,0.05)', marginBottom: '10px' };
const gridDatosStyle: CSSProperties = { display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: '15px', marginTop: '15px' };
const datoItemStyle: CSSProperties = { display: 'flex', justifyContent: 'space-between', padding: '10px', backgroundColor: 'white', borderRadius: '4px', boxShadow: '0 1px 3px rgba(0,0,0,0.05)' };
const labelStyle: CSSProperties = { color: '#6c757d', textTransform: 'capitalize', fontSize: '1rem', fontWeight: 800, marginRight: '8px' };
const valorStyle: CSSProperties = { color: '#495057', maxWidth: '200px', overflow: 'hidden', textOverflow: 'ellipsis', fontSize: '0.8125rem', lineHeight: '1.4' };
const historialTableStyle: CSSProperties = { width: '100%', borderCollapse: 'collapse', marginTop: '15px' };
const historialHeaderStyle: CSSProperties = { backgroundColor: '#007bff', color: 'white', padding: '12px', textAlign: 'left', fontSize: '0.875rem' };
const historialCellStyle: CSSProperties = { padding: '12px', color: '#495057', fontSize: '0.8125rem' };
const historialRowStyle: CSSProperties = { borderBottom: '1px solid #dee2e6' };

export default SimpleTable;