/* ============================================================
   VLF 2026 · UI KIT — components dùng chung
   Xuất ra window: Icon, Ava, CountryDot, Segmented, DivChips,
   Score, QR, LangCtx, useT, fmtScore
   ============================================================ */
const { useState, useContext, createContext } = React;

/* ---- i18n ---- */
const LangCtx = createContext('vi');
function useT() {
  const lang = useContext(LangCtx);
  const dict = window.VLF.i18n[lang] || window.VLF.i18n.vi;
  return Object.assign((k) => dict[k] || k, { lang });
}

/* ---- icons (stroke đơn giản) ---- */
const PATHS = {
  home: 'M3 11l9-8 9 8M5 10v10h6v-6h2v6h6V10',
  trophy: 'M7 4h10v4a5 5 0 0 1-10 0zM7 6H4v1a3 3 0 0 0 3 3M17 6h3v1a3 3 0 0 1-3 3M9 16h6M12 13v3M8 20h8',
  flag: 'M5 21V4M5 4c3-1.5 6 1.5 9 0s5 .5 5 .5v9s-2-1.5-5 0-6-1.5-9 0',
  ticket: 'M3 8a2 2 0 0 0 2-2h14a2 2 0 0 0 2 2v2a2 2 0 0 0 0 4v2a2 2 0 0 0-2 2H5a2 2 0 0 0-2-2v-2a2 2 0 0 0 0-4z M14 6v12',
  map: 'M9 4 3 6v14l6-2 6 2 6-2V4l-6 2-6-2z M9 4v14 M15 6v14',
  user: 'M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM4 21c0-4 4-6 8-6s8 2 8 6',
  calendar: 'M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v13H4zM4 9h16M8 3v4M16 3v4',
  bell: 'M18.6 14c-.4-.6-.6-1.3-.6-2V9a6 6 0 0 0-12 0v3c0 .7-.2 1.4-.6 2L4 16h16zM10 20a2 2 0 0 0 4 0',
  search: 'M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14zM21 21l-4-4',
  chev: 'M9 6l6 6-6 6',
  chevDown: 'M6 9l6 6 6-6',
  back: 'M15 18l-6-6 6-6',
  star: 'M12 3.5l2.6 5.3 5.9.9-4.2 4.1 1 5.8L12 17.1 6.7 19.6l1-5.8L3.5 9.7l5.9-.9z',
  check: 'M5 12l5 5 9-11',
  qr: 'M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM14 14h3v3h-3zM20 14v6M17 20h3',
  wallet: 'M3 7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zM16 12h3M3 9h18',
  pin: 'M12 21s7-6.3 7-11a7 7 0 0 0-14 0c0 4.7 7 11 7 11zM12 12a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z',
  clock: 'M12 7v5l3 2M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18z',
  gala: 'M5 22h14M7 10a5 5 0 0 0 10 0M7 10V4h10v6M9 22v-3a3 3 0 0 1 6 0v3',
  survey: 'M9 11l2 2 4-4M5 4h14v16l-3-2-2 2-2-2-2 2-3-2z',
  golfer: 'M12 4a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM10 21v-6l-2-3 3-3 3 1 2 3M14 21v-5',
  qrscan: 'M4 7V5a1 1 0 0 1 1-1h2M17 4h2a1 1 0 0 1 1 1v2M20 17v2a1 1 0 0 1-1 1h-2M7 20H5a1 1 0 0 1-1-1v-2M4 12h16',
  globe: 'M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zM3 12h18M12 3c2.5 2.7 2.5 15.3 0 18M12 3c-2.5 2.7-2.5 15.3 0 18',
  arrowR: 'M5 12h14M13 6l6 6-6 6',
  x: 'M6 6l12 12M18 6L6 18',
  apple: 'M16 13c0 3 2 4 2 4-1 2-2 3-3 3s-2-1-3-1-2 1-3 1-2-1-3-3c-1-2-1-5 0-7 1-1 2-2 3-2s2 1 3 1 1-1 3-1c1 0 2 1 3 2-1 1-2 2-2 4zM12 5c0-1 1-2 2-2 0 1-1 2-2 2z',
  info: 'M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zM12 11v5M12 8h.01',
  share: 'M4 12v7a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-7M16 6l-4-4-4 4M12 2v13',
  village: 'M3 21h18M5 21v-9l7-5 7 5v9M9 21v-5h6v5',
  shield: 'M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z',
  locate: 'M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zM12 2v3M12 19v3M2 12h3M19 12h3',
  layers: 'M12 3l9 5-9 5-9-5zM3 13l9 5 9-5',
  plus: 'M12 5v14M5 12h14',
  minus: 'M5 12h14',
  fb: 'M6 3v8a2 2 0 0 0 4 0V3M8 11v10M17 3c-1.6 0-2.6 2-2.6 5s1.1 4 2.6 4 2.6-1 2.6-4-1-5-2.6-5zM17 12v9',
  cup: 'M5 8h11v5a5 5 0 0 1-10 0zM16 9h2a2 2 0 0 1 0 4h-2M5 21h12',
  car: 'M6 16l1-5a2 2 0 0 1 2-1.6h6a2 2 0 0 1 2 1.6l1 5M5 16h14v3H5zM8 19v2M16 19v2M8 13h8',
  medical: 'M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zM12 8v8M8 12h8',
  route: 'M6 19a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM18 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM8 17h6a3 3 0 0 0 0-6H9a3 3 0 0 1 0-6h3'
};
function Icon({ name, size = 22, sw = 1.7, fill = false, style }) {
  const d = PATHS[name] || PATHS.info;
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={fill ? 'currentColor' : 'none'}
    stroke={fill ? 'none' : 'currentColor'} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" style={style}>
      <path d={d} />
    </svg>);

}

/* ---- avatar initials ---- */
function initials(name) {
  const parts = String(name).trim().split(/\s+/);
  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
}
function Ava({ name, size = 42, style }) {
  return <div className="v-ava" style={{ width: size, height: size, fontSize: size * 0.38, ...style }}>{initials(name)}</div>;
}

/* ---- country dot ---- */
function CountryDot({ cc }) {
  return <span className="v-cc"><i />{cc}</span>;
}

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

}

/* ---- division filter chips ---- */
function DivChips({ value, onChange, includeAll = true, only }) {
  const t = useT();
  const divs = only ? window.VLF.divisions.filter((d) => only.includes(d.id)) : window.VLF.divisions;
  return (
    <div className="v-chips">
      {includeAll &&
      <div className={'v-chip' + (value === 'all' ? ' on' : '')} onClick={() => onChange('all')}>{t('all')}</div>
      }
      {divs.map((d) =>
      <div key={d.id} className={'v-chip' + (value === d.id ? ' on' : '')} onClick={() => onChange(d.id)}>
          <span className="dot" style={{ background: d.accent }} />{d.shortName}
        </div>
      )}
    </div>);

}

/* ---- score formatting ---- */
function fmtScore(n) {
  if (n === 0) return 'E';
  return n > 0 ? '+' + n : '' + n;
}
function Score({ n, className = 'v-lb-col' }) {
  const cls = n < 0 ? 'v-score-under' : n > 0 ? 'v-score-over' : 'v-score-even';
  return <span className={className + ' ' + cls}>{fmtScore(n)}</span>;
}

/* ---- QR code (giả lập deterministic) ---- */
function QR({ seed = 'VLF2026', size = 188 }) {
  const n = 25; // modules
  let h = 0;
  for (let i = 0; i < seed.length; i++) h = h * 31 + seed.charCodeAt(i) >>> 0;
  function rnd(i) {const x = Math.sin(h + i * 12.9898) * 43758.5453;return x - Math.floor(x);}
  const cell = size / n;
  const rects = [];
  for (let y = 0; y < n; y++) {
    for (let x = 0; x < n; x++) {
      // chừa 3 ô finder ở góc
      const inFinder = (fx, fy) => x >= fx && x < fx + 7 && y >= fy && y < fy + 7;
      if (inFinder(0, 0) || inFinder(n - 7, 0) || inFinder(0, n - 7)) continue;
      if (rnd(y * n + x) > 0.52) rects.push(<rect key={x + '-' + y} x={x * cell} y={y * cell} width={cell} height={cell} />);
    }
  }
  function Finder({ fx, fy }) {
    return (
      <g>
        <rect x={fx * cell} y={fy * cell} width={cell * 7} height={cell * 7} rx={cell} />
        <rect x={(fx + 1) * cell} y={(fy + 1) * cell} width={cell * 5} height={cell * 5} rx={cell * 0.7} fill="#fff" />
        <rect x={(fx + 2) * cell} y={(fy + 2) * cell} width={cell * 3} height={cell * 3} rx={cell * 0.4} />
      </g>);

  }
  return (
    <svg className="v-qr-img" width={size} height={size} viewBox={`0 0 ${size} ${size}`} fill="var(--vlf-purple-900)">
      <rect x="0" y="0" width={size} height={size} fill="#fff" />
      {rects}
      <Finder fx={0} fy={0} /><Finder fx={n - 7} fy={0} /><Finder fx={0} fy={n - 7} />
    </svg>);

}

Object.assign(window, { LangCtx, useT, Icon, Ava, CountryDot, Segmented, DivChips, Score, fmtScore, QR, OrgLogos, SponsorBanner });

/* ---- ô chừa logo đơn vị tổ chức / đồng hành (xếp theo tầng) ---- */
function OrgLogos() {
  const org = window.VLF.organizers;
  return (
    <div className="v-tiers">
      {[1, 2].map((row) => {
        const items = org.filter((o) => (o.row || 1) === row);
        if (!items.length) return null;
        return (
          <div className="v-logos" key={row}>
            {items.map((o, i) => <div className="v-logo" key={i}><span>{o.name}</span></div>)}
          </div>);

      })}
    </div>);

}

/* ---- banner nhà tài trợ chạy (phải→trái) · chạm xem chi tiết trong app ---- */
function SponsorBanner({ nav }) {
  const t = useT();
  const loop = window.VLF.sponsors.concat(window.VLF.sponsors);
  return (
    <div className="v-spon">
      <div className="v-spon-lbl">{t('sponsors')}</div>
      <div className="v-spon-mask"><div className="v-spon-track">
        {loop.map((s, i) => <button className="v-spon-item" key={i} onClick={() => nav('sponsor', { id: s.id })}>{s.name}</button>)}
      </div></div>
    </div>);

}