import { useRef, useState } from 'react';
import { Avatar } from '../../Atoms/Avatar/Avatar';
import { Icon } from '../../Atoms/Icon/Icon';
import { PrimaryActionButton } from '../../Atoms/PrimaryActionButton/PrimaryActionButton';
import { ModalShell } from '../ModalShell/ModalShell';
import { GreenScrollbar } from '../VistaDatos/GreenScrollbar';
import {
  MODAL_SHELL_FOOTER_BUTTON_BASE_STYLE,
  MODAL_SHELL_FOOTER_BUTTON_TEXT_STYLE,
} from '../ModalShell/modalShellStyles';
import {
  MODAL_DETALLE_UNIDAD_DETAIL_LABEL_STYLE,
  MODAL_DETALLE_UNIDAD_DETAIL_VALUE_STYLE,
  MODAL_DETALLE_UNIDAD_HEIGHT_PX,
  MODAL_DETALLE_UNIDAD_MEMBER_CARD_STYLE,
  MODAL_DETALLE_UNIDAD_MEMBERS_TITLE_STYLE,
  MODAL_DETALLE_UNIDAD_RESPONSABLE_CARD_STYLE,
  MODAL_DETALLE_UNIDAD_SECTION_LABEL_STYLE,
  MODAL_DETALLE_UNIDAD_SUBTITLE_STYLE,
  MODAL_DETALLE_UNIDAD_TAB_BADGE_STYLE,
  MODAL_DETALLE_UNIDAD_WIDTH_PX,
} from './modalDetalleUnidadStyles';
import { FONT_FAMILY_SANS } from '../../../designTokens';

const TAB_PERSONAS = 'personas';
const TAB_DETALLE = 'detalle';

const TAB_BUTTON_BASE = {
  border: 'none',
  background: 'transparent',
  padding: '12px 0',
  marginRight: 24,
  cursor: 'pointer',
  fontFamily: FONT_FAMILY_SANS,
  fontWeight: 500,
  fontSize: '14px',
  lineHeight: '21px',
  color: '#6B7280',
  borderBottom: '2px solid transparent',
  display: 'inline-flex',
  alignItems: 'center',
};

function PersonasTabContent({ responsable, miembros = [], emptyMessage = 'Sin personas asignadas' }) {
  const membersWithoutResponsable = miembros.filter((m) => !m.esResponsable);
  const totalMembers = membersWithoutResponsable.length;

  if (!responsable && totalMembers === 0) {
    return (
      <div
        style={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          padding: '48px 16px',
          color: '#9CA3AF',
          textAlign: 'center',
        }}
      >
        <Icon name="UserGroupIcon" variant="24-outline" size={40} style={{ color: '#D1D5DB', marginBottom: 12 }} />
        <p style={{ fontFamily: FONT_FAMILY_SANS, fontSize: 14, lineHeight: '21px', margin: 0 }}>{emptyMessage}</p>
      </div>
    );
  }

  return (
    <div>
      {responsable ? (
        <>
          <p style={MODAL_DETALLE_UNIDAD_MEMBERS_TITLE_STYLE}>Responsable</p>
          <div style={MODAL_DETALLE_UNIDAD_RESPONSABLE_CARD_STYLE}>
            <Avatar src={responsable.avatarSrc} name={responsable.nombre} size="medium" />
            <div style={{ flex: 1, minWidth: 0 }}>
              <p style={{ fontFamily: FONT_FAMILY_SANS, fontWeight: 600, fontSize: 14, lineHeight: '21px', color: '#29474C', margin: 0 }}>
                {responsable.nombre}
              </p>
              <p style={{ fontFamily: FONT_FAMILY_SANS, fontSize: 12, lineHeight: '18px', color: '#38656D', margin: '2px 0 0' }}>
                Responsable de unidad
              </p>
            </div>
            <Icon name="StarIcon" variant="24-solid" size={20} style={{ color: '#38656D', flexShrink: 0 }} />
          </div>
        </>
      ) : null}

      <p style={MODAL_DETALLE_UNIDAD_MEMBERS_TITLE_STYLE}>
        {`Miembros (${totalMembers})`}
      </p>
      {membersWithoutResponsable.length === 0 ? (
        <p style={{ fontFamily: FONT_FAMILY_SANS, fontSize: 14, color: '#9CA3AF', margin: 0 }}>Sin miembros adicionales</p>
      ) : (
        membersWithoutResponsable.map((miembro, index) => (
          <div key={miembro.id ?? index} style={MODAL_DETALLE_UNIDAD_MEMBER_CARD_STYLE}>
            <Avatar src={miembro.avatarSrc} name={miembro.nombre} size="small" />
            <div style={{ flex: 1, minWidth: 0 }}>
              <p style={{ fontFamily: FONT_FAMILY_SANS, fontWeight: 500, fontSize: 14, lineHeight: '21px', color: '#29474C', margin: 0 }}>
                {miembro.nombre}
              </p>
              {miembro.rol ? (
                <p style={{ fontFamily: FONT_FAMILY_SANS, fontSize: 12, lineHeight: '18px', color: '#6B7280', margin: '2px 0 0' }}>
                  {miembro.rol}
                </p>
              ) : null}
            </div>
          </div>
        ))
      )}
    </div>
  );
}

function DetalleTabContent({ detalle = {} }) {
  const fields = [
    { label: 'Nombre', value: detalle.nombre },
    { label: 'Empresa', value: detalle.empresaNombre },
    { label: 'Nodo padre', value: detalle.nodoPadreNombre },
    { label: 'Responsable', value: detalle.responsableNombre },
    { label: 'Descripción', value: detalle.descripcion },
  ].filter((field) => field.value);

  if (fields.length === 0) {
    return (
      <p style={{ fontFamily: FONT_FAMILY_SANS, fontSize: 14, color: '#9CA3AF', margin: 0 }}>
        Sin información de detalle
      </p>
    );
  }

  return (
    <div>
      {fields.map((field) => (
        <div key={field.label}>
          <p style={MODAL_DETALLE_UNIDAD_DETAIL_LABEL_STYLE}>{field.label}</p>
          <p style={MODAL_DETALLE_UNIDAD_DETAIL_VALUE_STYLE}>{field.value}</p>
        </div>
      ))}
    </div>
  );
}

export const ModalDetalleUnidad = ({
  isOpen = false,
  onClose,
  unidad,
  responsable,
  miembros = [],
  detalle,
  activeTab: activeTabProp,
  defaultActiveTab = TAB_PERSONAS,
  onTabChange,
  onDelete,
  onAssignPerson,
  onEditUnit,
  sectionLabel = 'Unidad organizativa',
  emptyPersonasMessage = 'Sin personas asignadas',
  deleteButtonLabel = 'Eliminar unidad',
  assignButtonLabel = 'Asignar persona',
  editButtonLabel = 'Editar unidad',
  width = MODAL_DETALLE_UNIDAD_WIDTH_PX,
  height = MODAL_DETALLE_UNIDAD_HEIGHT_PX,
  closeOnOverlayClick = true,
  zIndex = 1500,
  className = '',
  footer,
  ...props
}) => {
  const scrollRef = useRef(null);
  const [internalTab, setInternalTab] = useState(defaultActiveTab);
  const isControlled = activeTabProp !== undefined && activeTabProp !== null;
  const activeTab = isControlled ? activeTabProp : internalTab;

  const miembrosCount = miembros.length;
  const nombre = unidad?.nombre ?? '—';
  const empresaNombre = unidad?.empresaNombre ?? detalle?.empresaNombre ?? '';

  const setActiveTab = (tab) => {
    if (!isControlled) setInternalTab(tab);
    onTabChange?.(tab);
  };

  const resolvedDetalle = {
    nombre: unidad?.nombre,
    empresaNombre: unidad?.empresaNombre,
    responsableNombre: responsable?.nombre ?? unidad?.responsable?.nombre,
    ...detalle,
  };

  const defaultFooter = (
    <>
      <PrimaryActionButton
        variant="outline"
        onClick={() => onDelete?.(unidad)}
        textStyle={{ ...MODAL_SHELL_FOOTER_BUTTON_TEXT_STYLE, color: '#B30808' }}
        style={{
          ...MODAL_SHELL_FOOTER_BUTTON_BASE_STYLE,
          marginRight: 'auto',
          borderColor: '#B30808',
        }}
      >
        <Icon name="TrashIcon" variant="24-outline" size={18} style={{ color: '#B30808', marginRight: 6 }} />
        {deleteButtonLabel}
      </PrimaryActionButton>
      <PrimaryActionButton
        variant="outline"
        text={assignButtonLabel}
        onClick={() => onAssignPerson?.(unidad)}
        textStyle={MODAL_SHELL_FOOTER_BUTTON_TEXT_STYLE}
        style={MODAL_SHELL_FOOTER_BUTTON_BASE_STYLE}
      />
      <PrimaryActionButton
        variant="primary"
        text={editButtonLabel}
        onClick={() => onEditUnit?.(unidad)}
        textStyle={MODAL_SHELL_FOOTER_BUTTON_TEXT_STYLE}
        style={MODAL_SHELL_FOOTER_BUTTON_BASE_STYLE}
      />
    </>
  );

  return (
    <ModalShell
      isOpen={isOpen}
      onClose={onClose}
      title={nombre}
      width={width}
      height={height}
      maxHeight="calc(100vh - 40px)"
      closeOnOverlayClick={closeOnOverlayClick}
      zIndex={zIndex}
      className={className}
      footer={footer ?? defaultFooter}
      footerStyle={{ justifyContent: 'flex-end' }}
      bodyStyle={{ display: 'flex', flexDirection: 'column', minHeight: 0, padding: 0 }}
      {...props}
    >
      <div style={{ padding: '20px 16px 16px', flexShrink: 0 }}>
        <p style={MODAL_DETALLE_UNIDAD_SECTION_LABEL_STYLE}>{sectionLabel}</p>
        {empresaNombre ? <p style={{ ...MODAL_DETALLE_UNIDAD_SUBTITLE_STYLE, marginTop: 4 }}>{empresaNombre}</p> : null}
      </div>

      <div
        style={{
          padding: '0 16px',
          marginTop: 4,
          borderBottom: '1px solid #E5E7EB',
          flexShrink: 0,
        }}
      >
        <button
          type="button"
          onClick={() => setActiveTab(TAB_PERSONAS)}
          style={{
            ...TAB_BUTTON_BASE,
            color: activeTab === TAB_PERSONAS ? '#29474C' : '#6B7280',
            borderBottomColor: activeTab === TAB_PERSONAS ? '#38656D' : 'transparent',
          }}
        >
          Personas
          <span style={MODAL_DETALLE_UNIDAD_TAB_BADGE_STYLE}>{miembrosCount}</span>
        </button>
        <button
          type="button"
          onClick={() => setActiveTab(TAB_DETALLE)}
          style={{
            ...TAB_BUTTON_BASE,
            color: activeTab === TAB_DETALLE ? '#29474C' : '#6B7280',
            borderBottomColor: activeTab === TAB_DETALLE ? '#38656D' : 'transparent',
          }}
        >
          <Icon
            name="InformationCircleIcon"
            variant="24-outline"
            size={18}
            style={{ marginRight: 6, color: activeTab === TAB_DETALLE ? '#29474C' : '#6B7280' }}
          />
          Detalle
        </button>
      </div>

      <div style={{ position: 'relative', flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
        <div
          ref={scrollRef}
          style={{
            flex: 1,
            minHeight: 0,
            overflowY: 'auto',
            padding: 16,
            scrollbarWidth: 'none',
            msOverflowStyle: 'none',
          }}
        >
          {activeTab === TAB_PERSONAS ? (
            <PersonasTabContent
              responsable={responsable ?? unidad?.responsable}
              miembros={miembros}
              emptyMessage={emptyPersonasMessage}
            />
          ) : (
            <DetalleTabContent detalle={resolvedDetalle} />
          )}
        </div>
        <GreenScrollbar scrollRef={scrollRef} insetRight={0} />
      </div>
    </ModalShell>
  );
};

export const MODAL_DETALLE_UNIDAD_TAB_IDS = {
  personas: TAB_PERSONAS,
  detalle: TAB_DETALLE,
};

export default ModalDetalleUnidad;
