import React, { useEffect, useState } from 'react';
import { motion } from 'framer-motion';
import { AlertCircle, CalendarDays, CheckCircle2, Users, X } from 'lucide-react';
import { fetchOrganizationInsights } from '../../api/sysadmin';
import type { OrganizationInsights } from '../../api/sysadmin';

interface OrganizationInsightsModalProps {
  company: any;
  onClose: () => void;
}

const formatDate = (value?: string) => {
  if (!value) return '-';
  return new Intl.DateTimeFormat('es-AR', { dateStyle: 'medium' }).format(new Date(value));
};

const fullName = (owner: OrganizationInsights['owner']) => {
  if (!owner) return '-';
  return [owner.firstName, owner.lastName].filter(Boolean).join(' ') || owner.email || '-';
};

const phone = (owner: OrganizationInsights['owner']) => {
  if (!owner) return '-';
  return [owner.phoneCountryCode, owner.phoneAreaCode, owner.phoneNumber].filter(Boolean).join(' ') || '-';
};

const collaboratorName = (collaborator: OrganizationInsights['collaborators'][number]) => {
  return collaborator.fullName || [collaborator.firstName, collaborator.lastName].filter(Boolean).join(' ') || collaborator.email || collaborator.userId || '-';
};

const StatCard = ({ label, value }: { label: string; value: number }) => (
  <div style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid var(--glass-border)', borderRadius: '12px', padding: '1rem' }}>
    <div style={{ color: 'var(--text-muted)', fontSize: '0.82rem', marginBottom: '0.35rem' }}>{label}</div>
    <div style={{ color: 'var(--text-main)', fontSize: '1.6rem', fontWeight: 700 }}>{value}</div>
  </div>
);

export const OrganizationInsightsModal: React.FC<OrganizationInsightsModalProps> = ({ company, onClose }) => {
  const [insights, setInsights] = useState<OrganizationInsights | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  useEffect(() => {
    const loadInsights = async () => {
      setLoading(true);
      setError('');
      try {
        const result = await fetchOrganizationInsights(company.id || company._id);
        setInsights(result);
      } catch (e) {
        console.error(e);
        setError('No se pudo cargar el detalle de la organización.');
      } finally {
        setLoading(false);
      }
    };

    loadInsights();
  }, [company]);

  return (
    <div className="modal-overlay" style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(4px)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 100 }}>
      <motion.div
        initial={{ scale: 0.95, opacity: 0 }}
        animate={{ scale: 1, opacity: 1 }}
        className="glass-panel"
        style={{ width: '92%', maxWidth: '900px', padding: '2rem', position: 'relative', display: 'flex', flexDirection: 'column', maxHeight: '85vh', overflow: 'auto' }}
      >
        <button onClick={onClose} style={{ position: 'absolute', top: '1rem', right: '1rem', background: 'transparent', color: 'var(--text-muted)' }}>
          <X size={24} />
        </button>

        <h2 style={{ fontSize: '1.5rem', marginBottom: '0.35rem', fontWeight: 'bold' }}>Detalle de {company.name}</h2>
        <p style={{ color: 'var(--text-muted)', marginBottom: '1.5rem' }}>Vista de solo lectura para SysAdmin.</p>

        {loading ? (
          <div style={{ padding: '2rem', textAlign: 'center', color: 'var(--text-muted)' }}>Cargando detalle...</div>
        ) : error ? (
          <div style={{ display: 'flex', alignItems: 'center', gap: '0.6rem', color: 'var(--danger)', padding: '1rem', border: '1px solid rgba(255,0,0,0.25)', borderRadius: '12px' }}>
            <AlertCircle size={18} /> {error}
          </div>
        ) : !insights ? (
          <div style={{ padding: '2rem', textAlign: 'center', color: 'var(--text-muted)' }}>No hay información disponible.</div>
        ) : (
          <div style={{ display: 'grid', gap: '1rem' }}>
            <section style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: '1rem' }}>
              <StatCard label="Colaboradores" value={insights.stats.employeesCount} />
              <StatCard label="Colaboradores activos" value={insights.stats.activeEmployeesCount} />
              <StatCard label="Servicios" value={insights.stats.servicesCount} />
              <StatCard label="Servicios activos" value={insights.stats.activeServicesCount} />
              <StatCard label="Clientes" value={insights.stats.clientsCount} />
              <StatCard label="Clientes activos" value={insights.stats.activeClientsCount} />
              <StatCard label="Reservas últimos 30 días" value={insights.stats.reservationsLast30Days} />
            </section>

            <section style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: '1rem' }}>
              <div style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid var(--glass-border)', borderRadius: '12px', padding: '1rem' }}>
                <h3 style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '1rem', marginBottom: '1rem' }}><CheckCircle2 size={18} /> Organización</h3>
                <p><strong>Nombre:</strong> {insights.organization.name}</p>
                <p><strong>Slug:</strong> {insights.organization.slug || '-'}</p>
                <p><strong>Estado:</strong> {insights.organization.banned ? 'Baneada' : 'Activa'}</p>
                <p><strong>Publicación:</strong> {insights.organization.published || '-'}</p>
                <p><strong>Onboarding:</strong> {insights.organization.onboardingCompleted ? 'Completo' : `Paso ${insights.organization.onboardingStep || 0}`}</p>
              </div>

              <div style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid var(--glass-border)', borderRadius: '12px', padding: '1rem' }}>
                <h3 style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '1rem', marginBottom: '1rem' }}><Users size={18} /> Dueño</h3>
                <p><strong>Nombre:</strong> {fullName(insights.owner)}</p>
                <p><strong>Email:</strong> {insights.owner?.email || '-'}</p>
                <p><strong>Teléfono:</strong> {phone(insights.owner)}</p>
                <p><strong>Verificado:</strong> {insights.owner?.verificated ? 'Sí' : 'No'}</p>
              </div>

              <div style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid var(--glass-border)', borderRadius: '12px', padding: '1rem' }}>
                <h3 style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '1rem', marginBottom: '1rem' }}><CalendarDays size={18} /> Plan</h3>
                {insights.subscription ? (
                  <>
                    <p><strong>Plan:</strong> {insights.subscription.plan?.name || 'Sin plan asociado'}</p>
                    <p><strong>Código:</strong> {insights.subscription.plan?.code || '-'}</p>
                    <p><strong>Estado:</strong> {insights.subscription.mpStatus || (insights.subscription.isActive ? 'active' : 'inactive')}</p>
                    <p><strong>Inicio:</strong> {formatDate(insights.subscription.startDate)}</p>
                    <p><strong>Fin:</strong> {formatDate(insights.subscription.endDate)}</p>
                  </>
                ) : (
                  <p style={{ color: 'var(--text-muted)' }}>No se encontró suscripción.</p>
                )}
              </div>
            </section>

            <section style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid var(--glass-border)', borderRadius: '12px', padding: '1rem' }}>
              <h3 style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '1rem', marginBottom: '1rem' }}><Users size={18} /> Colaboradores</h3>
              {insights.collaborators.length === 0 ? (
                <p style={{ color: 'var(--text-muted)' }}>No hay colaboradores asociados.</p>
              ) : (
                <div style={{ display: 'grid', gap: '0.75rem' }}>
                  {insights.collaborators.map((collaborator) => (
                    <div key={collaborator.id} style={{ display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: '0.75rem', alignItems: 'center', padding: '0.75rem', border: '1px solid var(--glass-border)', borderRadius: '10px' }}>
                      <div style={{ width: '36px', height: '36px', borderRadius: '999px', overflow: 'hidden', background: 'rgba(255,255,255,0.08)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--text-muted)', fontWeight: 700 }}>
                        {collaborator.avatar ? <img src={collaborator.avatar} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> : collaboratorName(collaborator).charAt(0).toUpperCase()}
                      </div>
                      <div>
                        <div style={{ color: 'var(--text-main)', fontWeight: 600 }}>{collaboratorName(collaborator)}</div>
                        <div style={{ color: 'var(--text-muted)', fontSize: '0.85rem' }}>{collaborator.email || 'Sin email disponible'}</div>
                        <div style={{ color: 'var(--text-muted)', fontSize: '0.78rem' }}>Roles: {collaborator.roles?.join(', ') || '-'}</div>
                      </div>
                      <span style={{ color: collaborator.active ? 'var(--success)' : 'var(--text-muted)', fontSize: '0.82rem', fontWeight: 700 }}>
                        {collaborator.active ? 'Activo' : 'Removido'}
                      </span>
                    </div>
                  ))}
                </div>
              )}
            </section>
          </div>
        )}
      </motion.div>
    </div>
  );
};