/* ============================================================
   Oziq AI — UI primitives
   ============================================================ */

const Icon = ({ name, size = 14, stroke = 1.5 }) => {
  const paths = {
    search: 'M11 11l4 4M7 13a6 6 0 1 1 0-12 6 6 0 0 1 0 12Z',
    bell:   'M8 1.5a5 5 0 0 1 5 5v3l1.5 2.5h-13L3 9V6.5a5 5 0 0 1 5-5Zm-2 11.5a2 2 0 0 0 4 0',
    chevron:'M4 6l4 4 4-4',
    plus:   'M8 3v10M3 8h10',
    download:'M8 2v9M4 8l4 4 4-4M2 14h12',
    expand: 'M3 6V3h3M13 6V3h-3M3 10v3h3M13 10v3h-3',
    arrow:  'M3 8h10M9 4l4 4-4 4',
    arrow_up:'M8 13V3M4 7l4-4 4 4',
    arrow_dn:'M8 3v10M4 9l4 4 4-4',
    filter: 'M2 3h12L9 9v4L7 14V9L2 3Z',
    dot:    'M8 9a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z',
    check:  'M3 8l3 3 7-7',
    x:      'M3 3l10 10M13 3L3 13',
    home:   'M2 7l6-5 6 5v6a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7Z',
    inbox:  'M2 8h4l1 2h2l1-2h4M2 8V3h12v5M2 8v5h12V8',
    grid3:  'M2 2h4v4H2zM10 2h4v4h-4zM2 10h4v4H2zM10 10h4v4h-4z',
    user:   'M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM2 14a6 6 0 0 1 12 0',
    map:    'M2 4l4-1 4 1 4-1v9l-4 1-4-1-4 1V4ZM6 3v9M10 4v9',
    cpu:    'M5 5h6v6H5zM3 6h2M3 8h2M3 10h2M11 6h2M11 8h2M11 10h2M6 3v2M8 3v2M10 3v2M6 11v2M8 11v2M10 11v2',
    team:   'M5 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM2 13a3 3 0 0 1 6 0M8 13a3 3 0 0 1 6 0',
    doc:    'M3 2h7l3 3v9H3V2ZM10 2v3h3',
    bell2:  'M8 1.5a5 5 0 0 1 5 5v3l1.5 2.5h-13L3 9V6.5a5 5 0 0 1 5-5Z',
    trend:  'M2 12l4-4 3 3 5-7M10 4h3v3',
    plug:   'M5 2v3M11 2v3M3 5h10v3a5 5 0 0 1-10 0V5ZM8 13v2',
    gear:   'M8 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM8 1v2M8 13v2M3.5 3.5l1.5 1.5M11 11l1.5 1.5M1 8h2M13 8h2M3.5 12.5l1.5-1.5M11 5l1.5-1.5',
    eye:    'M1 8s2.5-5 7-5 7 5 7 5-2.5 5-7 5-7-5-7-5ZM8 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z',
    pulse:  'M1 8h3l2-5 3 10 2-5h4',
    moon:   'M13 9A5 5 0 1 1 7 3a4 4 0 0 0 6 6Z',
    sun:    'M8 4a4 4 0 1 1 0 8 4 4 0 0 1 0-8ZM8 1v1M8 14v1M14 8h1M1 8h1M12 4l1-1M3 13l1-1M12 12l1 1M3 3l1 1',
    star:   'M8 1l2 5 5 .5-4 3.5 1 5L8 12l-4 3 1-5L1 6.5 6 6Z',
    refresh:'M14 4v4h-4M2 12V8h4M3 6a5 5 0 0 1 9-1l2 3M13 10a5 5 0 0 1-9 1l-2-3',
    sparkle:'M8 1v4M8 11v4M1 8h4M11 8h4M3 3l3 3M10 10l3 3M3 13l3-3M10 6l3-3',
  };
  return (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}>
      <path d={paths[name] || ''} />
    </svg>
  );
};

// Panel scaffold
function Panel({ title, sub, num, actions, children, body = true, className = '', style }) {
  return (
    <div className={`panel ${className}`} style={style}>
      {(title || actions) && (
        <div className="panel-head">
          <div className="panel-title">
            {num && <span className="num">{num}</span>}
            <span>{title}</span>
            {sub && <span className="panel-sub">· {sub}</span>}
          </div>
          {actions !== false && (
            <div className="panel-actions">
              {actions || (
                <>
                  <button className="btn btn-ghost btn-sm" title="Yuklab olish"><Icon name="download" size={12} /></button>
                  <button className="btn btn-ghost btn-sm" title="Kengaytirish"><Icon name="expand" size={12} /></button>
                </>
              )}
            </div>
          )}
        </div>
      )}
      {body ? <div className="panel-body">{children}</div> : children}
    </div>
  );
}

// KPI tile
function KpiTile({ k, onClick }) {
  const isUp = k.trend === 'up';
  const positive = (isUp && k.id !== 'open' && k.id !== 'urgent') || (!isUp && (k.id === 'rt' || k.id === 'open' || k.id === 'urgent'));
  const deltaColor = positive ? 'delta-up' : 'delta-down';
  const arrow = isUp ? '↑' : '↓';
  return (
    <div className="kpi" onClick={onClick}>
      <div className="kpi-label">{k.uz}</div>
      <div className="kpi-value">
        {formatNum(k.value)}
        {k.unit && <span className="unit">{k.unit}</span>}
      </div>
      <div className={`kpi-delta ${deltaColor}`}>
        {arrow} {Math.abs(k.delta).toFixed(1)}% <span style={{ color: 'var(--ink-4)', marginLeft: 4 }}>· 24s</span>
      </div>
      <div className="kpi-spark">
        <Sparkline data={k.spark} width={72} height={22} color={`var(--${positive ? 'jade' : 'rose'})`} fill dot />
      </div>
    </div>
  );
}

// Priority chip
function PriorityChip({ p }) {
  const map = {
    urgent: { uz: 'Shoshilinch', cls: 'chip-rose' },
    high:   { uz: 'Yuqori',      cls: 'chip-amber' },
    medium: { uz: 'Oʻrtacha',    cls: 'chip-' },
    low:    { uz: 'Past',        cls: 'chip-' },
  };
  return <span className={`chip ${map[p].cls}`}>{map[p].uz}</span>;
}

// Status chip
function StatusChip({ s }) {
  const map = {
    new:        { uz: 'Yangi',         cls: 'chip-accent' },
    classified: { uz: 'Tasniflandi',   cls: 'chip-plum' },
    routed:     { uz: 'Yoʻnaltirildi', cls: 'chip-amber' },
    answered:   { uz: 'Javob berildi', cls: 'chip-' },
    resolved:   { uz: 'Hal etildi',    cls: 'chip-jade' },
  };
  return <span className={`chip ${map[s].cls}`}>{map[s].uz}</span>;
}

// Avatar
function Avatar({ name, size = 22, color }) {
  const ini = initials(name);
  // deterministic color from name
  const h = (name.charCodeAt(0) * 53 + name.charCodeAt(1) * 17) % 360;
  return (
    <span style={{
      width: size, height: size, borderRadius: '50%',
      background: color || `oklch(0.70 0.07 ${h})`,
      color: 'oklch(0.22 0.05 ' + h + ')',
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      fontSize: size * 0.42, fontWeight: 600,
      fontFamily: 'var(--font-sans)',
      flexShrink: 0,
    }}>{ini}</span>
  );
}

// Generic segmented control
function Seg({ options, value, onChange }) {
  return (
    <div className="seg">
      {options.map(o => (
        <button key={o.value} className={value === o.value ? 'on' : ''} onClick={() => onChange(o.value)}>{o.label}</button>
      ))}
    </div>
  );
}

function SimpleKpi({ label, value, hint, trend, delta, mono = true, inverse }) {
  return (
    <div className="kpi">
      <div className="kpi-label">{label}</div>
      <div className={mono ? 'kpi-value' : ''} style={!mono ? { fontSize: 16, fontFamily: 'var(--font-sans)', fontWeight: 500, marginTop: 4 } : {}}>{value}</div>
      <div style={{ fontSize: 10.5, color: 'var(--ink-3)' }}>{hint}</div>
      {trend && (
        <div className={`kpi-delta ${(inverse ? trend === 'down' : trend === 'up') ? 'delta-up' : 'delta-down'}`} style={{ marginTop: 'auto' }}>
          {trend === 'up' ? '↑' : '↓'} {delta}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { Icon, Panel, KpiTile, PriorityChip, StatusChip, Avatar, Seg, SimpleKpi });