// widgets.jsx — hibank Design System tokens

function StatCard({ label, value, sub, change, up, color, icon, primary }) {
  const SUCCESS = '#74b50c';
  const DANGER  = '#ed3151';
  const TEAL = primary || '#0056D2';
  return (
    <div style={{
      background: '#fff', borderRadius: 15, padding: '24px',
      boxShadow: '0 2px 8px rgba(23,25,25,0.06)',
      border: '1px solid #efefef', flex: 1, minWidth: 0,
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 14 }}>
        <span style={{ fontSize: 13, color: '#515252', fontWeight: 500 }}>{label}</span>
        <div style={{ width: 40, height: 40, borderRadius: '50%', background: `${TEAL}14`, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
          <i className={`bx ${icon}`} style={{ fontSize: 20, color: TEAL }} />
        </div>
      </div>
      <div style={{ fontSize: 28, fontWeight: 700, color: '#171919', letterSpacing: '-0.01em', marginBottom: 6, fontVariantNumeric: 'tabular-nums' }}>{value}</div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <span style={{
          fontSize: 12, fontWeight: 600, borderRadius: 100,
          padding: '2px 9px',
          background: up ? 'rgba(116,181,12,0.12)' : 'rgba(237,49,81,0.10)',
          color: up ? SUCCESS : DANGER,
          display: 'inline-flex', alignItems: 'center', gap: 3
        }}>
          <i className={`bx bx-trending-${up ? 'up' : 'down'}`} style={{ fontSize: 13 }} />
          {change}
        </span>
        <span style={{ fontSize: 12, color: '#a7a8a8' }}>{sub}</span>
      </div>
    </div>
  );
}

function TxRow({ id, name, type, amount, time, status, primary }) {
  const isPos = amount.startsWith('+');
  const TEAL = primary || '#0056D2';
  const s = status === 'success'
    ? { bg: 'rgba(116,181,12,0.10)', color: '#74b50c', label: 'Berhasil' }
    : status === 'pending'
    ? { bg: 'rgba(251,211,48,0.18)', color: '#a18200', label: 'Pending' }
    : { bg: 'rgba(237,49,81,0.10)', color: '#ed3151', label: 'Gagal' };

  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '12px 0', borderBottom: '1px solid #efefef' }}>
      <div style={{ width: 38, height: 38, borderRadius: '50%', background: `${TEAL}14`, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
        <span style={{ fontSize: 14, fontWeight: 700, color: TEAL }}>{name[0]}</span>
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 14, fontWeight: 600, color: '#171919' }}>{name}</div>
        <div style={{ fontSize: 12, color: '#a7a8a8', marginTop: 2 }}>{id} · {type}</div>
      </div>
      <div style={{ textAlign: 'right', marginRight: 12 }}>
        <div style={{ fontSize: 14, fontWeight: 700, color: isPos ? '#74b50c' : '#171919', fontVariantNumeric: 'tabular-nums' }}>{amount}</div>
        <div style={{ fontSize: 11, color: '#a7a8a8', marginTop: 2 }}>{time}</div>
      </div>
      <div style={{ background: s.bg, color: s.color, fontSize: 11, fontWeight: 600, borderRadius: 100, padding: '3px 11px', flexShrink: 0 }}>{s.label}</div>
    </div>
  );
}

function BarChart({ data, labels, color }) {
  const max = Math.max(...data);
  return (
    <div style={{ display: 'flex', alignItems: 'flex-end', gap: 8, height: 88 }}>
      {data.map((v, i) => (
        <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
          <div style={{
            width: '100%', borderRadius: '4px 4px 0 0',
            background: i === data.length - 1 ? color : `${color}44`,
            height: `${Math.max(8, (v / max) * 72)}px`,
            transition: 'height .5s cubic-bezier(0.22,0.61,0.36,1)'
          }} />
          <span style={{ fontSize: 9, color: '#a7a8a8', fontWeight: 600, letterSpacing: '0.02em' }}>{labels[i]}</span>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { StatCard, TxRow, BarChart });