// shared.jsx — shared UI primitives for Absensi MOTOART
const STATUS_LABEL = { hadir: 'Hadir', telat: 'Telat', izin: 'Izin', absen: 'Tidak Hadir', belum: 'Belum Absen' };

function StatusChip({ status, sm }) {
  return (
    <span className={`chip ${status}`} style={sm ? { padding: '3px 9px', fontSize: 11.5 } : null}>
      <span className="dot"></span>{STATUS_LABEL[status] || status}
    </span>
  );
}

function Avatar({ init, size = 44, fs }) {
  return (
    <div className="avatar" style={{ width: size, height: size, fontSize: fs || size * 0.36 }}>{init}</div>
  );
}

// animated donut ring
function Ring({ value, size = 132, sw = 13, label, sub, color = 'var(--accent)' }) {
  const r = (size - sw) / 2;
  const circ = 2 * Math.PI * r;
  const off = circ * (1 - value / 100);
  return (
    <div style={{ position: 'relative', width: size, height: size }}>
      <svg width={size} height={size} style={{ transform: 'rotate(-90deg)' }}>
        <circle cx={size/2} cy={size/2} r={r} fill="none" stroke="var(--surface-3)" strokeWidth={sw} />
        <circle cx={size/2} cy={size/2} r={r} fill="none" stroke={color} strokeWidth={sw}
          strokeLinecap="round" strokeDasharray={circ} strokeDashoffset={off}
          style={{ '--circ': circ + 'px', animation: 'ringDraw 1.1s cubic-bezier(.2,.8,.2,1)', transition: 'stroke-dashoffset .9s cubic-bezier(.2,.8,.2,1)' }} />
      </svg>
      <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
        <div className="display tnum" style={{ fontWeight: 800, fontSize: size * 0.27, lineHeight: 1, color: 'var(--text)' }}>{label}</div>
        {sub && <div style={{ fontSize: 12, color: 'var(--text-dim)', fontWeight: 600, marginTop: 4 }}>{sub}</div>}
      </div>
    </div>
  );
}

function ProgressBar({ value, color = 'var(--accent)' }) {
  return <div className="bar"><i style={{ width: value + '%', background: color }}></i></div>;
}

// stylized "map" with abstract streets + pulsing pin
function MiniMap({ height = 132, pinLabel }) {
  return (
    <div style={{ position: 'relative', height, borderRadius: 16, overflow: 'hidden', background: 'linear-gradient(135deg, var(--surface-2), var(--surface-3))', border: '1px solid var(--border)' }}>
      <svg width="100%" height="100%" viewBox="0 0 320 140" preserveAspectRatio="xMidYMid slice" style={{ position: 'absolute', inset: 0 }}>
        <rect width="320" height="140" fill="none"/>
        <g stroke="var(--border-2)" strokeWidth="9" fill="none" opacity="0.9">
          <path d="M-10 40 H330"/><path d="M-10 105 H330"/>
          <path d="M70 -10 V150"/><path d="M210 -10 V150"/>
        </g>
        <g stroke="var(--border)" strokeWidth="3" fill="none">
          <path d="M-10 72 H330"/><path d="M140 -10 V150"/><path d="M270 -10 V150"/>
        </g>
        <g fill="var(--surface)" opacity="0.6">
          <rect x="14" y="50" width="44" height="42" rx="3"/>
          <rect x="82" y="50" width="44" height="42" rx="3"/>
          <rect x="222" y="50" width="40" height="42" rx="3"/>
          <rect x="82" y="14" width="44" height="14" rx="3"/>
        </g>
      </svg>
      <div style={{ position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%,-100%)', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
        <div style={{ position: 'relative', width: 30, height: 30 }}>
          <div className="gps-pulse" style={{ position: 'absolute', inset: 9 }}></div>
          <svg width="30" height="38" viewBox="0 0 24 30" style={{ position: 'relative', filter: 'drop-shadow(0 4px 6px rgba(0,0,0,.3))' }}>
            <path d="M12 29s9-7.5 9-17A9 9 0 1 0 3 12c0 9.5 9 17 9 17Z" fill="var(--accent)"/>
            <circle cx="12" cy="11" r="3.4" fill="#fff"/>
          </svg>
        </div>
      </div>
      {pinLabel && (
        <div style={{ position: 'absolute', left: 10, bottom: 10, right: 10, background: 'color-mix(in srgb, var(--surface) 92%, transparent)', backdropFilter: 'blur(6px)', borderRadius: 11, padding: '8px 11px', display: 'flex', alignItems: 'center', gap: 8, boxShadow: 'var(--shadow-sm)' }}>
          <Icon name="pin" size={16} stroke="var(--accent)" />
          <span style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--text)' }}>{pinLabel}</span>
        </div>
      )}
    </div>
  );
}

function BottomNav({ tabs, active, onChange }) {
  return (
    <div className="tabbar">
      {tabs.map(t => (
        <button key={t.id} className={active === t.id ? 'on' : ''} onClick={() => onChange(t.id)}>
          <span className="ind"></span>
          <Icon name={t.icon} size={23} sw={active === t.id ? 2 : 1.7} />
          <span>{t.label}</span>
        </button>
      ))}
    </div>
  );
}

function AppHeader({ title, sub, right, avatar }) {
  return (
    <div className="appbar">
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        {avatar && <Avatar init={avatar} size={42} />}
        <div>
          <div className="appbar-title">{title}</div>
          {sub && <div className="appbar-sub">{sub}</div>}
        </div>
      </div>
      {right}
    </div>
  );
}

function IconBtn({ name, onClick, badge }) {
  return (
    <button onClick={onClick} style={{ position: 'relative', width: 42, height: 42, borderRadius: 13, background: 'var(--surface)', border: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: 'var(--shadow-sm)' }}>
      <Icon name={name} size={20} stroke="var(--text-dim)" />
      {badge && <span style={{ position: 'absolute', top: 9, right: 10, width: 7, height: 7, borderRadius: 5, background: 'var(--danger)', border: '2px solid var(--surface)' }}></span>}
    </button>
  );
}

function Logo({ h = 28, chip = true, pad = 6, radius = 11 }) {
  const img = <img src="assets/motoart-logo.png" alt="MOTOART" style={{ height: h, width: 'auto', display: 'block' }} />;
  if (!chip) return img;
  return (
    <div style={{ background: '#fff', borderRadius: radius, padding: `${pad}px ${pad + 3}px`, display: 'inline-flex', alignItems: 'center', boxShadow: '0 2px 8px rgba(16,26,48,.14)' }}>{img}</div>
  );
}

function Toast({ children, icon = 'checkCircle' }) {
  return <div className="toast"><Icon name={icon} size={18} stroke="#5bd98a" />{children}</div>;
}

function StatCard({ label, value, unit, icon, tone = 'accent', delta }) {
  const toneColor = { accent: 'var(--accent)', success: 'var(--success)', warn: 'var(--warn)', danger: 'var(--danger)' }[tone];
  const toneWeak = { accent: 'var(--accent-weak)', success: 'var(--success-weak)', warn: 'var(--warn-weak)', danger: 'var(--danger-weak)' }[tone];
  return (
    <div className="card card-pad" style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
        <div style={{ width: 38, height: 38, borderRadius: 11, background: toneWeak, color: toneColor, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Icon name={icon} size={20} stroke={toneColor} />
        </div>
        {delta && <span className="tnum" style={{ fontSize: 12, fontWeight: 700, color: 'var(--success)', display: 'flex', alignItems: 'center', gap: 2 }}><Icon name="arrowUp" size={13} stroke="var(--success)" />{delta}</span>}
      </div>
      <div>
        <div className="display tnum" style={{ fontWeight: 800, fontSize: 26, lineHeight: 1, color: 'var(--text)' }}>
          {value}{unit && <span style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-mute)', marginLeft: 3 }}>{unit}</span>}
        </div>
        <div style={{ fontSize: 12.5, color: 'var(--text-dim)', fontWeight: 600, marginTop: 5 }}>{label}</div>
      </div>
    </div>
  );
}

Object.assign(window, { STATUS_LABEL, StatusChip, Avatar, Ring, ProgressBar, MiniMap, BottomNav, AppHeader, IconBtn, Logo, Toast, StatCard });