/* YeYe Portal — UI primitives (React + Babel) */
const { useState, useEffect, useLayoutEffect, useRef, useMemo } = React;

/* ---------- Icon (Lucide) ---------- */
const _pascal = (n) => n.replace(/(^|-)([a-z0-9])/g, (_, __, c) => c.toUpperCase());
const NS = 'http://www.w3.org/2000/svg';
function addShapes(svg, node) {
  if (!Array.isArray(node)) return;
  if (typeof node[0] === 'string') {
    const tag = node[0];
    const attrs = (node[1] && typeof node[1] === 'object') ? node[1] : {};
    const el = document.createElementNS(NS, tag);
    for (const k in attrs) el.setAttribute(k, attrs[k]);
    svg.appendChild(el);
    if (Array.isArray(node[2])) node[2].forEach((c) => addShapes(el, c));
  } else {
    node.forEach((c) => addShapes(svg, c));
  }
}
function buildIcon(node, size, stroke) {
  const svg = document.createElementNS(NS, 'svg');
  const set = (a, b) => svg.setAttribute(a, b);
  set('viewBox', '0 0 24 24'); set('width', size); set('height', size);
  set('fill', 'none'); set('stroke', 'currentColor'); set('stroke-width', stroke);
  set('stroke-linecap', 'round'); set('stroke-linejoin', 'round');
  addShapes(svg, node);
  return svg;
}
function Icon({ name, size = 18, stroke = 2, className = '', style }) {
  const ref = useRef(null);
  useLayoutEffect(() => {
    const host = ref.current; if (!host) return;
    const L = window.lucide; let node = null;
    if (L && L.icons) node = L.icons[_pascal(name)] || L.icons[name];
    host.innerHTML = '';
    if (node) host.appendChild(buildIcon(node, size, stroke));
  }, [name, size, stroke]);
  return <span ref={ref} className={'ic ' + className} style={{ display: 'inline-flex', width: size, height: size, ...style }} />;
}

/* ---------- Button ---------- */
function Btn({ variant = 'ghost', size, icon, iconR, children, className = '', ...p }) {
  const cls = ['btn', 'btn-' + variant, size === 'sm' ? 'btn-sm' : size === 'lg' ? 'btn-lg' : '', className].join(' ');
  return (
    <button className={cls} {...p}>
      {icon && <Icon name={icon} size={size === 'sm' ? 14 : 16} />}
      {children}
      {iconR && <Icon name={iconR} size={size === 'sm' ? 14 : 16} />}
    </button>
  );
}
function IconBtn({ name, className = '', dot, ...p }) {
  return <button className={'icon-btn ' + className} {...p}><Icon name={name} size={19} />{dot && <i className="dot" />}</button>;
}

/* ---------- Card ---------- */
function Card({ children, className = '', ...p }) { return <div className={'card ' + className} {...p}>{children}</div>; }
function CardHead({ icon, title, sub, action }) {
  return (
    <div className="card-hd">
      {icon && <div className="hd-ic"><Icon name={icon} size={17} /></div>}
      <div className="hd-tx"><div className="t">{title}</div>{sub && <div className="s">{sub}</div>}</div>
      {action}
    </div>
  );
}

/* ---------- Badge ---------- */
const STMAP = { ok: 'b-ok', warn: 'b-warn', bad: 'b-bad', info: 'b-info', neut: 'b-neut', brand: 'b-brand' };
function Badge({ tone = 'neut', dot, children }) {
  return <span className={'badge ' + (STMAP[tone] || 'b-neut')}>{dot && <i className="bdot" />}{children}</span>;
}

/* ---------- Segmented ---------- */
function Seg({ items, value, onChange }) {
  return (
    <div className="seg">
      {items.map((it) => (
        <button key={it.value} className={value === it.value ? 'on' : ''} onClick={() => onChange(it.value)}>
          {it.label}
        </button>
      ))}
    </div>
  );
}

/* ---------- Avatar ---------- */
function Avatar({ children, size = 'md', tone, src }) {
  const st = tone ? { background: tone.bg, color: tone.fg } : undefined;
  return <div className={'avatar a-' + size} style={st}>{src ? <img src={src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> : children}</div>;
}

/* ---------- Progress ---------- */
function Progress({ value, thin }) {
  return <div className={'prog ' + (thin ? 'thin' : '')}><span style={{ width: Math.max(2, value) + '%' }} /></div>;
}

/* ---------- Steps (horizontal) ---------- */
function Steps({ steps }) {
  return (
    <div className="steps">
      {steps.map((s, i) => (
        <div key={i} className={'step ' + s.state}>
          <div className="sline" />
          <div className="snode">{s.state === 'done' ? <Icon name="check" size={15} stroke={3} /> : i + 1}</div>
          <div className="slab">{s.label}</div>
        </div>
      ))}
    </div>
  );
}

/* ---------- Stat tile ---------- */
function Stat({ icon, tone = '', value, label, trend, trendDir }) {
  return (
    <div className="stat">
      <div className="st-top">
        <div className={'st-ic ' + tone}><Icon name={icon} size={18} /></div>
        {trend && <span className={'trend ' + (trendDir || 'up')}><Icon name={trendDir === 'down' ? 'trending-down' : 'trending-up'} size={14} stroke={2.4} />{trend}</span>}
      </div>
      <div><div className="st-val tnum">{value}</div><div className="st-lab">{label}</div></div>
    </div>
  );
}

/* ---------- Alert ---------- */
function Alert({ tone = 'info', icon, title, children, action }) {
  const ic = icon || (tone === 'bad' ? 'octagon-alert' : tone === 'warn' ? 'triangle-alert' : tone === 'ok' ? 'check' : 'info');
  return (
    <div className={'alert ' + tone}>
      <div className="a-ic"><Icon name={ic} size={16} /></div>
      <div className="grow"><div className="a-t">{title}</div>{children && <div className="a-s">{children}</div>}</div>
      {action}
    </div>
  );
}

/* ---------- Toggle ---------- */
function Toggle({ on, onChange }) { return <button className={'toggle ' + (on ? 'on' : '')} onClick={() => onChange(!on)} aria-pressed={on} />; }

/* ---------- Field ---------- */
function Field({ label, children }) { return <label className="field">{label && <span>{label}</span>}{children}</label>; }

/* ---------- Modal ---------- */
function Modal({ title, icon, sub, onClose, children, footer, wide }) {
  useEffect(() => {
    const h = (e) => e.key === 'Escape' && onClose();
    window.addEventListener('keydown', h); return () => window.removeEventListener('keydown', h);
  }, [onClose]);
  return (
    <div className="overlay" onMouseDown={(e) => e.target === e.currentTarget && onClose()}>
      <div className={'modal ' + (wide ? 'wide' : '')}>
        <div className="modal-hd">
          {icon && <div className="hd-ic"><Icon name={icon} size={18} /></div>}
          <div className="grow"><div className="h3">{title}</div>{sub && <div className="muted" style={{ fontSize: 12.5 }}>{sub}</div>}</div>
          <IconBtn name="x" onClick={onClose} />
        </div>
        <div className="modal-bd">{children}</div>
        {footer && <div className="modal-ft">{footer}</div>}
      </div>
    </div>
  );
}

/* ---------- Right panel ---------- */
function Panel({ title, onClose, children, footer }) {
  return (
    <>
      <div className="scrim show" onClick={onClose} style={{ zIndex: 89 }} />
      <div className="panel">
        <div className="modal-hd"><div className="grow"><div className="h3">{title}</div></div><IconBtn name="x" onClick={onClose} /></div>
        <div className="modal-bd grow" style={{ flex: 1 }}>{children}</div>
        {footer && <div className="modal-ft">{footer}</div>}
      </div>
    </>
  );
}

/* ---------- Brand logo ---------- */
function BrandLogo({ mini }) {
  return (
    <div className="brand">
      {mini
        ? <img src="assets/yeye-mark.png" alt="YeYe" style={{ height: 30, width: 'auto', display: 'block' }} />
        : <img src="assets/yeye-logo.png" alt="YeYe Expat Centre" style={{ height: 30, width: 'auto', display: 'block' }} />}
      {!mini && <span style={{ fontSize: 9.5, fontWeight: 700, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--ink-400)', marginLeft: 2, alignSelf: 'flex-end', paddingBottom: 3 }}>Expat Centre</span>}
    </div>
  );
}

/* ---------- i18n context ---------- */
const LangCtx = React.createContext(null);
function useT() {
  const c = React.useContext(LangCtx);
  if (c) return c;
  return { lang: 'en', t: (k) => (window.I18N.en[k] || k), dict: window.I18N.en };
}

/* ---------- Language menu ---------- */
function LangMenu({ lang, onChange }) {
  const [open, setOpen] = useState(false);
  const ref = useRef(null);
  useEffect(() => {
    const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', h); return () => document.removeEventListener('mousedown', h);
  }, []);
  const order = ['en', 'tr', 'cs'];
  return (
    <div ref={ref} style={{ position: 'relative' }}>
      <button className="icon-btn" onClick={() => setOpen((o) => !o)} title="Language"
        style={{ width: 'auto', padding: '0 10px', gap: 6, border: '1px solid var(--line)' }}>
        <Icon name="languages" size={17} />
        <span style={{ fontSize: 12.5, fontWeight: 700 }}>{window.I18N[lang].code}</span>
        <Icon name="chevron-down" size={14} />
      </button>
      {open && (
        <div style={{ position: 'absolute', top: 44, right: 0, background: '#fff', border: '1px solid var(--line)', borderRadius: 'var(--r-md)', boxShadow: 'var(--sh-lg)', padding: 6, width: 168, zIndex: 60 }}>
          {order.map((lk) => (
            <button key={lk} onClick={() => { onChange(lk); setOpen(false); }}
              className="flex ac jb" style={{ width: '100%', border: 'none', background: lang === lk ? 'var(--brand-50)' : 'transparent', borderRadius: 8, padding: '9px 11px', cursor: 'pointer' }}>
              <span className="flex ac gap-8" style={{ fontSize: 13.5, fontWeight: lang === lk ? 700 : 500, color: lang === lk ? 'var(--brand-700)' : 'var(--ink-700)' }}>
                <span className="mono" style={{ fontSize: 11, color: 'var(--ink-400)', width: 20 }}>{window.I18N[lk].code}</span>
                {window.I18N[lk].name}
              </span>
              {lang === lk && <Icon name="check" size={15} stroke={2.6} />}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

Object.assign(window, {
  Icon, Btn, IconBtn, Card, CardHead, Badge, Seg, Avatar, Progress, Steps, Stat,
  Alert, Toggle, Field, Modal, Panel, BrandLogo, LangCtx, useT, LangMenu,
  useState, useEffect, useRef, useMemo, useLayoutEffect,
});