/* ============================================================
   VLF 2026 · SAU GIẢI (phase 'post') — màn hình
   Results · Gallery · FindPhotos · Highlights · Certificate
   Tất cả là L2/L3 → không footer (router tự ẩn tabbar).
   ============================================================ */

/* ---- placeholder ảnh phối màu brand (chưa có ảnh thật) ---- */
function PhotoTile({ hue = 276, i = 0, label, ratio = '1 / 1', onClick }) {
  const l1 = 26 + (i % 3) * 6, l2 = 14 + (i % 2) * 5;
  const bg = `linear-gradient(${140 + (i % 4) * 14}deg, hsl(${hue} 38% ${l1}%), hsl(${(hue + 26) % 360} 42% ${l2}%))`;
  return (
    <div className="v-photo" style={{ aspectRatio: ratio, background: bg, cursor: onClick ? 'pointer' : 'default' }} onClick={onClick}>
      <span className="v-photo-ic"><Icon name="search" size={16} sw={1.9} /></span>
      {label && <span className="v-photo-cap">{label}</span>}
    </div>
  );
}

/* ============================================================
   KẾT QUẢ & VINH DANH (L2)
   ============================================================ */
function Results({ nav }) {
  const t = useT(); const lang = t.lang; const T = (vi, en) => (lang === 'en' ? en : vi);
  const E = (o, k) => window.VLF.L(lang, o, k);
  const P = window.VLF.post;
  const top3 = window.VLF.leaderboard.legends.slice(0, 3);
  const order = [1, 0, 2]; // 2 - 1 - 3 podium
  const cer = P.ceremony;

  return (
    <div className="v-screen" style={{ paddingBottom: 28 }}>
      {/* hero champion */}
      <div className="v-feat" style={{ height: 188, borderRadius: 0 }}>
        <div className="ov" />
        <div className="tx">
          <span className="v-pill v-pill-gold" style={{ marginBottom: 8 }}><Icon name="trophy" size={13} sw={2} />{T('Legends · Legends', 'Legends · Legends')}</span>
          <h4 style={{ fontSize: 24 }}>{top3[0].name}</h4>
          <p>{T('Vô địch chung cuộc', 'Overall champion')} · <b className="v-num" style={{ color: 'var(--vlf-gold-300)' }}>{top3[0].total < 0 ? top3[0].total : '+' + top3[0].total}</b></p>
        </div>
      </div>

      <div className="v-pad">
        {/* podium top 3 */}
        <div className="v-podium">
          {order.map((idx) => {
            const p = top3[idx]; const rank = p.pos;
            return (
              <div key={rank} className={'v-pod v-pod-' + rank} onClick={() => nav('golfer', { name: p.name })}>
                <Ava name={p.name} size={rank === 1 ? 54 : 44} style={rank === 1 ? { boxShadow: '0 0 0 3px var(--vlf-gold-500)' } : {}} />
                <div className="rk v-num">{rank}</div>
                <div className="nm">{p.name}</div>
                <Score n={p.total} className="v-num" />
                <div className="bar" />
              </div>
            );
          })}
        </div>

        {/* vô địch 8 bảng */}
        <div className="v-sect"><h3>{t('allDivisions')}</h3></div>
        <div className="v-card">
          {P.champions.map((c) => {
            const d = window.VLF.divById(c.div);
            return (
              <div className="v-row" key={c.div}>
                <div className="ic" style={{ width: 40, height: 40, borderRadius: 11, display: 'flex', alignItems: 'center', justifyContent: 'center', background: d.accent + '22', color: d.accent, flex: '0 0 auto' }}><Icon name="trophy" size={19} sw={1.7} /></div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div className="t">{c.name}</div>
                  <div className="s">{d.shortName} · {E(c, 'sub')}</div>
                </div>
                <span className="v-num" style={{ fontWeight: 800, color: 'var(--vlf-purple-700)', fontSize: 17 }}>{c.score}</span>
              </div>
            );
          })}
        </div>

        {/* giải đặc biệt */}
        <div className="v-sect"><h3>{t('specialAwards')}</h3></div>
        <div className="v-stats">
          {P.specialAwards.map((a, i) => (
            <div className="v-stat" key={i} style={{ textAlign: 'left' }}>
              <Icon name={a.ic} size={20} sw={1.7} style={{ color: 'var(--vlf-gold-600)' }} />
              <div className="k" style={{ marginTop: 6 }}>{E(a, 't')}</div>
              <div className="s">{a.who}</div>
            </div>
          ))}
        </div>

        {/* charity + ceremony */}
        <div className="v-card v-charity" style={{ marginTop: 18 }}>
          <div className="v-qr-head" style={{ background: 'linear-gradient(135deg,var(--vlf-gold-600),var(--vlf-gold-500))' }}>
            <div><div className="t">{t('charityRaised')}</div><div className="s">{E(cer, 'charityNote')}</div></div>
            <div className="v-num" style={{ fontSize: 26, fontWeight: 800, color: 'var(--vlf-purple-900)' }}>{lang === 'en' ? cer.charityEn : cer.charity}</div>
          </div>
          <div style={{ padding: '13px 15px', display: 'flex', gap: 10, alignItems: 'center' }}>
            <Icon name="gala" size={18} sw={1.7} style={{ color: 'var(--vlf-purple-600)', flex: '0 0 auto' }} />
            <div className="v-muted" style={{ fontSize: 12.5, lineHeight: 1.5 }}>{cer.date} · {E(cer, 'venue')} — {E(cer, 'note')}</div>
          </div>
        </div>

        <div className="v-2btn" style={{ marginTop: 16 }}>
          <button className="v-btn v-btn-ghost" onClick={() => nav('gallery')}><Icon name="search" size={17} sw={2} />{t('gallery')}</button>
          <button className="v-btn v-btn-ghost" onClick={() => nav('highlights')}><Icon name="arrowR" size={17} sw={2} />{t('highlightsTitle')}</button>
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   THƯ VIỆN ẢNH (L2) + lối vào "Tìm ảnh của tôi"
   ============================================================ */
function Gallery({ nav, backRef }) {
  const t = useT(); const lang = t.lang; const T = (vi, en) => (lang === 'en' ? en : vi);
  const E = (o, k) => window.VLF.L(lang, o, k);
  const P = window.VLF.post;
  const [filt, setFilt] = useState('all');
  const [open, setOpen] = useState(null); // album đang mở
  /* header back đóng album trước khi thoát màn */
  React.useEffect(() => {
    if (!backRef) return;
    backRef.current = () => { if (open) { setOpen(null); return true; } return false; };
    return () => { backRef.current = null; };
  }, [open]);
  const albums = P.albums.filter((a) => filt === 'all' || a.kind === filt);

  if (open) {
    const a = P.albums.find((x) => x.id === open);
    return (
      <div className="v-screen" style={{ paddingBottom: 28 }}>
        <div className="v-pad">
          <div className="v-sect" style={{ marginTop: 6 }}><h3 style={{ fontSize: 16 }}>{E(a, 'name')}</h3><span className="v-muted v-num" style={{ fontSize: 12 }}>{a.count} {T('ảnh', 'photos')}</span></div>
          <div className="v-photo-grid">
            {Array.from({ length: 12 }).map((_, i) => <PhotoTile key={i} hue={a.hue} i={i} />)}
          </div>
          <button className="v-btn v-btn-ghost" style={{ marginTop: 16 }}><Icon name="search" size={17} sw={2} />{T('Xem tất cả', 'View all')} {a.count} {T('ảnh', 'photos')}</button>
        </div>
      </div>
    );
  }

  return (
    <div className="v-screen" style={{ paddingBottom: 28 }}>
      <div className="v-pad">
        <div className="v-post-intro">
          <div className="ic"><Icon name="search" size={22} sw={1.7} /></div>
          <div><div className="t">{t('gallery')}</div>
            <div className="s">{T('12.400+ ảnh chính thức — tìm ảnh có bạn hoặc lướt theo ngày & khu.', '12,400+ official photos — find photos of you or browse by day & zone.')}</div></div>
        </div>
        {/* tìm ảnh của tôi */}
        <div className="v-find" onClick={() => nav('findphotos')}>
          <div className="ic"><Icon name="user" size={22} sw={1.8} /></div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div className="t">{t('findMyPhotos')}</div>
            <div className="s">{T('Quét khuôn mặt hoặc lọc theo bảng đấu — tìm đúng ảnh có bạn', 'Scan your face or filter by division — find photos of you')}</div>
          </div>
          <Icon name="chev" size={20} style={{ color: '#fff', opacity: .8 }} />
        </div>

        <div className="v-sect"><h3>{t('gallery')}</h3><span className="v-muted v-num" style={{ fontSize: 12 }}>{P.galleryTotal} {T('ảnh', 'photos')}</span></div>
        <div className="v-seg" style={{ marginBottom: 14 }}>
          {[['all', T('Tất cả', 'All')], ['day', T('Theo ngày', 'By day')], ['zone', T('Theo khu', 'By zone')]].map(([id, lb]) => (
            <button key={id} className={filt === id ? 'on' : ''} onClick={() => setFilt(id)}>{lb}</button>
          ))}
        </div>
        <div className="v-album-grid">
          {albums.map((a, i) => (
            <div className="v-album" key={a.id} onClick={() => setOpen(a.id)}>
              <div className="cover" style={{ background: `linear-gradient(150deg, hsl(${a.hue} 40% 30%), hsl(${(a.hue + 24) % 360} 44% 16%))` }}>
                <span className="cnt v-num">{a.count}</span>
              </div>
              <div className="nm">{E(a, 'name')}</div>
              <div className="dt v-num">{E(a, 'date')}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   TÌM ẢNH CỦA TÔI (L3 task) — quét selfie + lọc
   ============================================================ */
function FindPhotos({ nav, persona }) {
  const t = useT(); const lang = t.lang; const T = (vi, en) => (lang === 'en' ? en : vi);
  const E = (o, k) => window.VLF.L(lang, o, k);
  const mine = window.VLF.post.myPhotos[persona] || window.VLF.post.myPhotos.spectator;
  const [stage, setStage] = useState('idle'); // idle | scanning | done
  const [div, setDiv] = useState('all');
  // bộ lọc thực: mỗi nhóm có số ảnh & tông màu riêng
  const FILTERS = [['all', t('all'), 276, 1], ['legends', 'Legends', 264, 0.5], ['gala', 'Gala', 44, 0.32], ['village', 'Village', 30, 0.22]];
  const curF = FILTERS.find((f) => f[0] === div) || FILTERS[0];
  const shown = div === 'all' ? mine.count : Math.max(2, Math.round(mine.count * curF[3]));

  React.useEffect(() => {
    if (stage !== 'scanning') return;
    const id = setTimeout(() => setStage('done'), 2200);
    return () => clearTimeout(id);
  }, [stage]);

  if (stage !== 'done') {
    const scanning = stage === 'scanning';
    return (
      <div className="v-screen" style={{ display: 'flex', flexDirection: 'column', minHeight: '100%', paddingBottom: 96 }}>
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center', padding: '0 32px' }}>
          <div className={'v-scan' + (scanning ? ' on' : '')}>
            <Icon name="user" size={56} sw={1.4} />
            {scanning && <span className="v-scan-line" />}
          </div>
          <h3 className="v-serif" style={{ fontSize: 21, margin: '22px 0 8px' }}>{scanning ? T('Đang quét khuôn mặt…', 'Scanning your face…') : T('Tìm ảnh có bạn', 'Find photos of you')}</h3>
          <p className="v-muted" style={{ fontSize: 13.5, lineHeight: 1.55, maxWidth: '30ch' }}>
            {scanning ? T('Đối chiếu với 12.400+ ảnh sự kiện', 'Matching against 12,400+ event photos')
              : T('Chụp một ảnh selfie để hệ thống tự nhận diện và gom ảnh có mặt bạn. Ảnh selfie chỉ dùng để đối chiếu.', 'Take a selfie so we can recognise and gather photos featuring you. The selfie is used only for matching.')}
          </p>
          {!scanning && (
            <div className="v-chip-row" style={{ marginTop: 18 }}>
              <span className="v-pill v-pill-purple"><Icon name="ticket" size={12} sw={2} />{T('Đã liên kết mã vé', 'Ticket linked')}</span>
              <span className="v-pill v-pill-purple"><Icon name="shield" size={12} sw={2} />{T('Riêng tư', 'Private')}</span>
            </div>
          )}
        </div>
        <div className="v-cta">
          <button className="v-btn v-btn-primary" disabled={scanning} onClick={() => setStage('scanning')}>
            <Icon name="qrscan" size={18} sw={2} />{scanning ? T('Đang xử lý…', 'Processing…') : t('scanFace')}
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="v-screen" style={{ paddingBottom: 28 }}>
      <div className="v-pad">
        <div className="v-found">
          <div className="big v-num">{mine.count}</div>
          <div>
            <div className="t">{T('Đã tìm thấy', 'Found')} {mine.count} {t('myPhotosFound')}</div>
            <div className="s">{E(mine, 'where')}</div>
          </div>
          <Icon name="check" size={22} sw={2.4} style={{ color: '#1F8A5B', flex: '0 0 auto' }} />
        </div>

        <div className="v-chips" style={{ marginTop: 14 }}>
          {FILTERS.map(([id, lb]) => (
            <div key={id} className={'v-chip' + (div === id ? ' on' : '')} onClick={() => setDiv(id)}>{lb}</div>
          ))}
        </div>
        <div className="v-muted" style={{ fontSize: 11.5, margin: '10px 2px 0' }}>{T('Hiển thị', 'Showing')} {Math.min(shown, 9)} / {shown} {T('ảnh', 'photos')}{div !== 'all' ? ' · ' + curF[1] : ''}</div>

        <div className="v-photo-grid" style={{ marginTop: 10 }}>
          {Array.from({ length: Math.min(shown, 9) }).map((_, i) => (
            <div className="v-photo-wrap" key={i}>
              <PhotoTile hue={curF[2]} i={i} />
              <button className="v-photo-dl" aria-label="download"><Icon name="share" size={14} sw={2} /></button>
            </div>
          ))}
        </div>
      </div>
      <div className="v-cta">
        <div className="v-2btn">
          <button className="v-btn v-btn-ghost"><Icon name="share" size={17} sw={2} />{t('shareZalo')}</button>
          <button className="v-btn v-btn-primary"><Icon name="wallet" size={17} sw={2} />{T('Tải tất cả', 'Download all')}</button>
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   HIGHLIGHTS & REPLAY (L2)
   ============================================================ */
function Highlights({ nav }) {
  const t = useT(); const lang = t.lang; const T = (vi, en) => (lang === 'en' ? en : vi);
  const E = (o, k) => window.VLF.L(lang, o, k);
  const P = window.VLF.post;
  const clips = P.clips;
  return (
    <div className="v-screen" style={{ paddingBottom: 28 }}>
      {/* replay feature */}
      <div className="v-feat" style={{ height: 176, borderRadius: 0 }}>
        <div className="ov" />
        <div className="v-play"><Icon name="arrowR" size={24} sw={2} style={{ marginLeft: 2 }} /></div>
        <div className="tx">
          <span className="v-pill v-pill-gold" style={{ marginBottom: 8 }}>{T('Toàn cảnh', 'Full broadcast')}</span>
          <h4 style={{ fontSize: 20 }}>{E(P.replay, 'title')}</h4>
          <p className="v-num">{P.replay.dur} · {P.replay.views} {T('lượt xem', 'views')}</p>
        </div>
      </div>
      <div className="v-pad">
        <div className="v-sect"><h3>{t('highlightsTitle')}</h3></div>
        <div className="v-clips">
          {clips.map((c, i) => {
            const d = window.VLF.divById(c.tag);
            return (
              <div className="v-clip" key={i}>
                <div className="thumb" style={{ background: `linear-gradient(150deg, hsl(${276 - i * 12} 40% 28%), #1F0D26)` }}>
                  <span className="v-play sm"><Icon name="arrowR" size={16} sw={2.2} style={{ marginLeft: 1 }} /></span>
                  <span className="dur v-num">{c.dur}</span>
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div className="t">{E(c, 'title')}</div>
                  <div className="s" style={{ color: d ? d.accent : 'var(--vlf-ink-500)' }}>{d ? d.shortName : 'VLF'}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   CHỨNG NHẬN ĐIỆN TỬ (L2) — theo persona
   ============================================================ */
function Certificate({ nav, persona }) {
  const t = useT(); const lang = t.lang; const T = (vi, en) => (lang === 'en' ? en : vi);
  const E = (o, k) => window.VLF.L(lang, o, k);
  const P = window.VLF.post;
  const me = window.VLF.personas[persona].me;
  const c = P.cert[persona] || P.cert.spectator;
  const isGolfer = persona === 'golfer' || persona === 'golfer_intl';
  // suy thẳng từ bảng điểm — chính xác theo từng golfer (Quinn vs Bảo)
  const meLb = isGolfer ? window.VLF.leaderboard.legends.find((p) => p.name === me.name) : null;
  const rounds = meLb ? meLb.r : P.scorecard.rounds;
  const total = rounds.reduce((a, b) => a + b, 0);
  const finish = meLb ? (meLb.pos === 1 ? '1' : 'T' + meLb.pos) : P.scorecard.finish;
  const toPar = meLb ? fmtScore(meLb.total) : P.scorecard.toPar;

  return (
    <div className="v-screen" style={{ paddingBottom: 28 }}>
      <div className="v-pad">
        <div className="v-post-intro">
          <div className="ic"><Icon name="shield" size={22} sw={1.7} /></div>
          <div><div className="t">{t('certificate')}</div>
            <div className="s">{E(c, 'badge')} · {T('lưu vào máy hoặc chia sẻ Zalo', 'save to device or share to Zalo')}</div></div>
        </div>
        <div className="v-cert">
          <div className="v-cert-edge" />
          <div className="v-cert-in">
            <VLFLogo />
            <div className="ev">Vietnam Legends Festival 2026</div>
            <div className="badge">{E(c, 'badge')}</div>
            <div className="nm v-serif">{me.name}</div>
            <div className="line">{E(c, 'line')}</div>
            <div className="meta v-num">Montgomerie Links · Đà Nẵng · 22–27/09/2026</div>
            {isGolfer && (
              <div className="v-cert-score">
                <div><b className="v-num">{finish}</b><span>{T('Hạng', 'Finish')}</span></div>
                <div><b className="v-num">{toPar}</b><span>{T('Tổng', 'Total')}</span></div>
                <div><b className="v-num">Legends</b><span>{T('Bảng', 'Division')}</span></div>
              </div>
            )}
            <div className="seal"><Icon name="trophy" size={20} sw={1.7} /></div>
          </div>
        </div>

        {isGolfer && (
          <>
            <div className="v-sect"><h3>{t('scorecard')}</h3></div>
            <div className="v-card" style={{ padding: '6px 4px' }}>
              <div className="v-scrow head">
                <span>{T('Vòng', 'Round')}</span><span>R1</span><span>R2</span><span>R3</span><span>{T('Tổng', 'Total')}</span>
              </div>
              <div className="v-scrow">
                <span>{T('Gậy', 'Strokes')}</span>
                {rounds.map((r, i) => <span key={i} className="v-num">{r}</span>)}
                <span className="v-num" style={{ fontWeight: 800, color: 'var(--vlf-purple-700)' }}>{total}</span>
              </div>
            </div>
          </>
        )}

        <div className="v-2btn" style={{ marginTop: 18 }}>
          <button className="v-btn v-btn-ghost"><Icon name="share" size={17} sw={2} />{t('shareZalo')}</button>
          <button className="v-btn v-btn-primary"><Icon name="wallet" size={17} sw={2} />{T('Tải PDF', 'Download PDF')}</button>
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   (PostReport đã chuyển sang App Đội vận hành riêng — không thuộc app này)
   ============================================================ */

Object.assign(window, { Results, Gallery, FindPhotos, Highlights, Certificate, PhotoTile });