/**
 * Empty state genérico: card centrada con icono, texto parametrizable y botón de acción.
 * Figma: 1088x762 (adaptable), borde #C4C4C4, radius 16px. Responsive.
 */
import { Icon } from '../../Atoms/Icon/Icon';
import { FONT_FAMILY_SANS } from '../../../designTokens';

const DEFAULT_MESSAGE = 'Por el momento no hay empresas cargadas.\nCree su primer empresa.';
const DEFAULT_BUTTON_LABEL = 'Crear empresa';

/** Estilo aplicado al icono principal (Heroicon vía `Icon`). */
const iconWrapperStyle = {
  boxSizing: 'border-box',
  flexShrink: 0,
};

export const VistaSinDatos = ({
  message = DEFAULT_MESSAGE,
  buttonLabel = DEFAULT_BUTTON_LABEL,
  /** Callback al hacer clic (ej. navegación SPA: () => navigate('/crear-empresa')). El proyecto consumidor lo define. */
  onCrearEmpresa,
  /** Ruta de destino (ej. '/crear-empresa-2a'). Si se pasa, el botón se renderiza como <a href>. Opcional si usas onCrearEmpresa para navegar. */
  crearEmpresaTo,
  /** Nombre del icono Heroicons (24 outline), igual que en `Icon` (ej. 'BuildingOffice2Icon', 'UserGroupIcon'). */
  iconName = 'BuildingOffice2Icon',
  /**
   * Si true: el bloque de mensaje usa todo el ancho disponible y, desde ~640px de viewport,
   * cada línea del mensaje intenta no partirse (una sola línea mientras quepa).
   */
  messagePreferSingleLine = false,
  className = '',
  style = {},
  ...props
}) => {
  const lines = typeof message === 'string' ? message.split('\n') : [message];
  const showButton = onCrearEmpresa || crearEmpresaTo;

  const buttonContent = (
    <>
      <Icon
        name="PlusCircleIcon"
        size={20}
        style={{ width: 20, height: 20, color: '#FFFFFF', flexShrink: 0 }}
      />
      <span
        style={{
          fontFamily: FONT_FAMILY_SANS,
          fontWeight: 400,
          fontSize: '16px',
          lineHeight: '24px',
          letterSpacing: '0%',
          color: 'var(--color-white-solid, #FFFFFF)',
          verticalAlign: 'middle',
        }}
      >
        {buttonLabel}
      </span>
    </>
  );

  const commonStyle = {
    marginTop: '24px',
    width: 'auto',
    minWidth: '166px',
    height: '48px',
    padding: '12px 16px',
    gap: '8px',
    borderRadius: '12px',
    background: 'var(--color-cyan-32, #38656D)',
    border: 'none',
    cursor: 'pointer',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    boxSizing: 'border-box',
    textDecoration: 'none',
  };

  return (
    <div
      className={className}
      style={{
        width: '100%',
        maxWidth: '100%',
        minHeight: 'clamp(320px, 70vh, 762px)',
        padding: 'clamp(24px, 5vw, 48px)',
        boxSizing: 'border-box',
        borderRadius: '16px',
        border: '1px solid #C4C4C4',
        background: 'var(--color-white-solid, #FFFFFF)',
        opacity: 1,
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        ...style,
      }}
      {...props}
    >
      {messagePreferSingleLine ? (
        <style>{`
          .vistasindatos__message-line--prefer-single {
            white-space: normal;
          }
          @media (min-width: 640px) {
            .vistasindatos__message-line--prefer-single {
              white-space: nowrap;
            }
          }
        `}</style>
      ) : null}
      <div
        style={{
          width: '100%',
          maxWidth: messagePreferSingleLine ? '100%' : '469px',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          gap: '12px',
        }}
      >
        <Icon
          name={iconName}
          variant="24-outline"
          size={97.5}
          style={{ ...iconWrapperStyle, color: '#9EB5B9' }}
          aria-hidden
        />
        <div
          style={{
            width: '100%',
            maxWidth: messagePreferSingleLine ? '100%' : '469px',
            minHeight: '72px',
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
            gap: '4px',
          }}
        >
          {lines.map((line, i) => (
            <p
              key={i}
              className={messagePreferSingleLine ? 'vistasindatos__message-line--prefer-single' : undefined}
              style={{
                margin: 0,
                fontFamily: FONT_FAMILY_SANS,
                fontWeight: 400,
                fontStyle: 'normal',
                fontSize: 'clamp(18px, 4vw, 24px)',
                lineHeight: '36px',
                letterSpacing: '0px',
                textAlign: 'center',
                color: 'var(--color-main-800)',
                width: '100%',
                maxWidth: messagePreferSingleLine ? '100%' : undefined,
              }}
            >
              {line.trim()}
            </p>
          ))}
        </div>
      </div>

      {showButton &&
        (crearEmpresaTo ? (
          <a
            href={crearEmpresaTo}
            style={commonStyle}
            aria-label={buttonLabel}
            onClick={
              onCrearEmpresa
                ? (e) => {
                    e.preventDefault();
                    onCrearEmpresa(e);
                  }
                : undefined
            }
          >
            {buttonContent}
          </a>
        ) : (
          <button
            type="button"
            onClick={onCrearEmpresa}
            style={commonStyle}
            aria-label={buttonLabel}
          >
            {buttonContent}
          </button>
        ))}
    </div>
  );
};

export default VistaSinDatos;
