// ─── Icons specific to CRM ─────────────────────────
// Reusan el wrapper Icon de icons.jsx (mismo stroke).

const IconInbox = (p) => (
  <Icon {...p}>
    <polyline points="22 12 16 12 14 15 10 15 8 12 2 12" />
    <path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
  </Icon>
);
const IconLayers = (p) => (
  <Icon {...p}>
    <polygon points="12 2 2 7 12 12 22 7 12 2" />
    <polyline points="2 17 12 22 22 17" />
    <polyline points="2 12 12 17 22 12" />
  </Icon>
);
const IconStar = (p) => (
  <Icon {...p}>
    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
  </Icon>
);
const IconStarFilled = (p) => (
  <Icon {...p} fill="currentColor">
    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
  </Icon>
);
const IconSend = (p) => (
  <Icon {...p}>
    <line x1="22" y1="2" x2="11" y2="13" />
    <polygon points="22 2 15 22 11 13 2 9 22 2" />
  </Icon>
);
const IconArchive = (p) => (
  <Icon {...p}>
    <polyline points="21 8 21 21 3 21 3 8" />
    <rect x="1" y="3" width="22" height="5" />
    <line x1="10" y1="12" x2="14" y2="12" />
  </Icon>
);
const IconReply = (p) => (
  <Icon {...p}>
    <polyline points="9 17 4 12 9 7" />
    <path d="M20 18v-2a4 4 0 0 0-4-4H4" />
  </Icon>
);
const IconReplyAll = (p) => (
  <Icon {...p}>
    <polyline points="7 17 2 12 7 7" />
    <polyline points="12 17 7 12 12 7" />
    <path d="M22 18v-2a4 4 0 0 0-4-4H7" />
  </Icon>
);
const IconForward = (p) => (
  <Icon {...p}>
    <polyline points="15 17 20 12 15 7" />
    <path d="M4 18v-2a4 4 0 0 1 4-4h12" />
  </Icon>
);
const IconPaperclip = (p) => (
  <Icon {...p}>
    <path d="M21.44 11.05L12.25 20.24a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" />
  </Icon>
);
const IconMail = (p) => (
  <Icon {...p}>
    <path d="M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z" />
    <polyline points="22,6 12,13 2,6" />
  </Icon>
);
const IconTag = (p) => (
  <Icon {...p}>
    <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z" />
    <line x1="7" y1="7" x2="7.01" y2="7" />
  </Icon>
);
const IconAt = (p) => (
  <Icon {...p}>
    <circle cx="12" cy="12" r="4" />
    <path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8" />
  </Icon>
);
const IconLink = (p) => (
  <Icon {...p}>
    <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
    <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
  </Icon>
);
const IconSnooze = (p) => (
  <Icon {...p}>
    <circle cx="12" cy="13" r="8" />
    <polyline points="9 9 15 9 9 17 15 17" />
    <path d="M5 3 2 6" />
    <path d="M19 3l3 3" />
  </Icon>
);
const IconBold = (p) => (
  <Icon {...p}>
    <path d="M6 4h8a4 4 0 0 1 0 8H6z" />
    <path d="M6 12h9a4 4 0 0 1 0 8H6z" />
  </Icon>
);
const IconItalic = (p) => (
  <Icon {...p}>
    <line x1="19" y1="4" x2="10" y2="4" />
    <line x1="14" y1="20" x2="5" y2="20" />
    <line x1="15" y1="4" x2="9" y2="20" />
  </Icon>
);
const IconListBullets = (p) => (
  <Icon {...p}>
    <line x1="8" y1="6" x2="21" y2="6" />
    <line x1="8" y1="12" x2="21" y2="12" />
    <line x1="8" y1="18" x2="21" y2="18" />
    <line x1="3" y1="6" x2="3.01" y2="6" />
    <line x1="3" y1="12" x2="3.01" y2="12" />
    <line x1="3" y1="18" x2="3.01" y2="18" />
  </Icon>
);
const IconArrowUp = (p) => (
  <Icon {...p}>
    <line x1="12" y1="19" x2="12" y2="5" />
    <polyline points="5 12 12 5 19 12" />
  </Icon>
);
const IconArrowDown = (p) => (
  <Icon {...p}>
    <line x1="12" y1="5" x2="12" y2="19" />
    <polyline points="19 12 12 19 5 12" />
  </Icon>
);
const IconRefresh = (p) => (
  <Icon {...p}>
    <polyline points="23 4 23 10 17 10" />
    <polyline points="1 20 1 14 7 14" />
    <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10" />
    <path d="M20.49 15a9 9 0 0 1-14.85 3.36L1 14" />
  </Icon>
);
const IconMinimize = (p) => (
  <Icon {...p}>
    <polyline points="4 14 10 14 10 20" />
    <polyline points="20 10 14 10 14 4" />
    <line x1="14" y1="10" x2="21" y2="3" />
    <line x1="3" y1="21" x2="10" y2="14" />
  </Icon>
);
const IconMaximize = (p) => (
  <Icon {...p}>
    <path d="M8 3H5a2 2 0 0 0-2 2v3" />
    <path d="M21 8V5a2 2 0 0 0-2-2h-3" />
    <path d="M3 16v3a2 2 0 0 0 2 2h3" />
    <path d="M16 21h3a2 2 0 0 0 2-2v-3" />
  </Icon>
);
const IconAlertTriangle = (p) => (
  <Icon {...p}>
    <path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
    <line x1="12" y1="9" x2="12" y2="13" />
    <line x1="12" y1="17" x2="12.01" y2="17" />
  </Icon>
);

// Helper: render label pill with the SAME look as the ERP status pills
// (.pill base + pill-* tone classes). Falls back to inline colours for the
// tones the ERP doesn't define (destructive / neutral).
function LabelPill({ id, size = 'sm' }) {
  const cfg = CRM_LABELS[id];
  if (!cfg) return null;
  const toneClass = {
    presupuesto: 'pill-presupuesto',
    remito:      'pill-remito',
    'doc-medica':'pill-doc-medica',
    recibo:      'pill-recibo',
    oc:          'pill-oc',
    factura:     'pill-factura',
    iniciado:    'pill-iniciado',
  }[cfg.tone];
  const fallback = !toneClass
    ? (cfg.tone === 'destructive'
        ? { background: 'rgba(220, 38, 38, 0.10)', color: 'var(--danger)' }
        : { background: 'color-mix(in oklab, var(--muted-foreground) 14%, transparent)', color: 'var(--muted-foreground)' })
    : {};
  // Mirror the ERP StatusPill sizing (sm = 4px 12px / 10.5px); xs is a touch
  // tighter for dense inbox rows but keeps the same pill silhouette.
  const sizing = size === 'xs'
    ? { padding: '3px 11px', fontSize: '10px' }
    : { padding: '4px 12px', fontSize: '10.5px' };
  return (
    <span className={`pill ${toneClass || ''}`} style={{ ...sizing, ...fallback, whiteSpace: 'nowrap' }}>
      {cfg.label}
    </span>
  );
}

// Helper: avatar (initials)
function CrmAvatar({ name, email, size = 36, color }) {
  const initials = (name || email || '?').trim().split(/\s+/).slice(0, 2).map(s => s[0] || '').join('').toUpperCase();
  // deterministic color from name
  const hue = name
    ? [...name].reduce((s, c) => s + c.charCodeAt(0), 0) % 360
    : 200;
  const bg = color || `oklch(0.72 0.13 ${hue})`;
  return (
    <div style={{
      width: size, height: size,
      borderRadius: 999,
      background: bg,
      color: '#fff',
      display: 'inline-flex',
      alignItems: 'center',
      justifyContent: 'center',
      fontWeight: 800,
      fontSize: size * 0.36,
      letterSpacing: '0.02em',
      flexShrink: 0,
      boxShadow: '0 1px 2px rgba(0,0,0,0.08)',
    }}>
      {initials}
    </div>
  );
}

// Helper: relative time formatter
function relTime(iso) {
  const diff = Date.now() - new Date(iso).getTime();
  const mins = Math.round(diff / 60000);
  if (mins < 60) return `${Math.max(1, mins)} min`;
  const hours = Math.round(mins / 60);
  if (hours < 24) return `${hours} h`;
  const days = Math.round(hours / 24);
  if (days < 7) return `${days} d`;
  const date = new Date(iso);
  return date.toLocaleDateString('es-AR', { day: '2-digit', month: 'short' });
}

Object.assign(window, {
  IconInbox, IconLayers, IconStar, IconStarFilled, IconSend, IconArchive,
  IconReply, IconReplyAll, IconForward, IconPaperclip, IconMail,
  IconTag, IconAt, IconLink, IconSnooze, IconBold, IconItalic,
  IconListBullets, IconArrowUp, IconArrowDown, IconRefresh,
  IconMinimize, IconMaximize, IconAlertTriangle,
  LabelPill, CrmAvatar, relTime,
});