import { useEffect, useState } from 'react';
import { motion } from 'framer-motion';
import { X, Building } from 'lucide-react';
import { getOrganizationsStatus } from '../../api/sysadmin';

export const OrganizationsModal = ({ user, onClose }: { user: any, onClose: () => void }) => {
  const [data, setData] = useState<{ clientIn: any[], collaboratorIn: any[] } | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    getOrganizationsStatus(user._id).then(res => {
      setData(res);
      setLoading(false);
    }).catch(() => {
      alert('Error cargando organizaciones');
      setLoading(false);
    });
  }, [user]);

  return (
    <div style={{ position: 'fixed', inset: 0, zIndex: 50, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(4px)' }}>
      <motion.div 
        initial={{ scale: 0.9, opacity: 0 }} 
        animate={{ scale: 1, opacity: 1 }} 
        className="glass-panel" 
        style={{ width: '90%', maxWidth: '500px', maxHeight: '80vh', overflowY: 'auto', padding: '2rem', position: 'relative' }}
      >
        <button onClick={onClose} style={{ position: 'absolute', top: '1.5rem', right: '1.5rem', background: 'transparent', color: 'var(--text-muted)' }}>
          <X size={24} />
        </button>
        
        <h2 style={{ fontSize: '1.5rem', marginBottom: '1.5rem', display: 'flex', alignItems: 'center', gap: '10px' }}>
          <Building size={24} color="var(--primary)" />
          Organizaciones Asociadas
        </h2>
        <p style={{ color: 'var(--text-muted)', marginBottom: '1.5rem' }}>Usuario: {user.email}</p>

        {loading ? (
          <p style={{ textAlign: 'center', padding: '2rem' }}>Cargando datos...</p>
        ) : (
          <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
            <div>
              <h3 style={{ fontSize: '1.1rem', color: 'var(--text-main)', marginBottom: '1rem', borderBottom: '1px solid var(--glass-border)', paddingBottom: '0.5rem' }}>Cliente en:</h3>
              {data?.clientIn.length === 0 ? (
                <p style={{ color: 'var(--text-muted)', fontSize: '0.9rem' }}>No es cliente de ninguna organización.</p>
              ) : (
                <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
                  {data?.clientIn.map((org, i) => (
                    <li key={i} style={{ background: 'rgba(255,255,255,0.03)', padding: '0.75rem', borderRadius: '8px', border: '1px solid var(--glass-border)' }}>
                      {org.companyName} <span style={{ color: 'var(--text-muted)', fontSize: '0.8rem', marginLeft: '10px' }}>(ID: {org.companyId})</span>
                    </li>
                  ))}
                </ul>
              )}
            </div>

            <div>
              <h3 style={{ fontSize: '1.1rem', color: 'var(--text-main)', marginBottom: '1rem', borderBottom: '1px solid var(--glass-border)', paddingBottom: '0.5rem' }}>Colaborador en:</h3>
              {data?.collaboratorIn.length === 0 ? (
                <p style={{ color: 'var(--text-muted)', fontSize: '0.9rem' }}>No es colaborador de ninguna organización.</p>
              ) : (
                <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
                  {data?.collaboratorIn.map((org, i) => (
                    <li key={i} style={{ background: 'rgba(139, 92, 246, 0.1)', padding: '0.75rem', borderRadius: '8px', border: '1px solid rgba(139, 92, 246, 0.2)' }}>
                      {org.companyName} <span style={{ color: 'var(--text-muted)', fontSize: '0.8rem', marginLeft: '10px' }}>(ID: {org.companyId})</span>
                    </li>
                  ))}
                </ul>
              )}
            </div>
          </div>
        )}

      </motion.div>
    </div>
  );
};
