// SK Bandar Tawau · Klasik direction · responsive, className-based.
// Layout/spacing/colors live in styles/klasik.css. This file owns:
//   - data binding (live from /api with a hardcoded fallback from shared.jsx)
//   - interactive state (calendar, news tabs, hover staff, hamburger)
//   - the BM/EN + dark-mode toggles in the chrome
// Theming knobs read by CSS:
//   - `klasik.dark` class on the root
//   - `--accent` inline on the root (so palette swaps are one line)

// Top navigation — mirrors the school's real site sections (BM/EN). Each item
// carries a `key` matching an admin page (so clicking opens that page's blocks).
// `key:'home'` returns to the homepage (used for sections shown on the home page).
const NAV = [
  { bm: 'Utama', en: 'Home', key: 'home' },
  { bm: 'Profil SKBT', en: 'School Profile', key: 'profil-sejarah', sub: [
    { bm: 'Sejarah Sekolah', en: 'School History', key: 'profil-sejarah' },
    { bm: 'Visi & Misi', en: 'Vision & Mission', key: 'profil-visimisi' },
    { bm: 'Piagam Pelanggan', en: 'Client Charter', key: 'profil-piagam' },
    { bm: 'Carta Organisasi', en: 'Organisation Chart', key: 'profil-carta' },
  ] },
  { bm: 'Pengurusan', en: 'Management', key: 'home', sub: [
    { bm: 'Guru & Staf', en: 'Teachers & Staff', key: 'home' },
    { bm: 'Pentadbiran', en: 'Administration', key: 'pengurusan-pentadbiran' },
  ] },
  { bm: 'Kurikulum', en: 'Curriculum', key: 'kurikulum-panitia', sub: [
    { bm: 'Panitia Mata Pelajaran', en: 'Subject Panels', key: 'kurikulum-panitia' },
    { bm: 'Jadual Waktu', en: 'Timetable', key: 'kurikulum-jadual' },
    { bm: 'Peperiksaan & Pentaksiran', en: 'Exams & Assessment', key: 'kurikulum-peperiksaan' },
  ] },
  { bm: 'HEM', en: 'Student Affairs', key: 'hem-bantuan', sub: [
    { bm: 'Bantuan & Biasiswa', en: 'Aid & Scholarships', key: 'hem-bantuan' },
    { bm: 'Disiplin', en: 'Discipline', key: 'hem-disiplin' },
    { bm: 'Kesihatan & 3K', en: 'Health & Safety', key: 'hem-kesihatan' },
  ] },
  { bm: 'KoKurikulum', en: 'Co-curriculum', key: 'home', sub: [
    { bm: 'Kelab & Persatuan', en: 'Clubs & Societies', key: 'home' },
    { bm: 'Sukan & Permainan', en: 'Sports & Games', key: 'koku-sukan' },
    { bm: 'Unit Beruniform', en: 'Uniformed Units', key: 'koku-unit' },
  ] },
  { bm: 'Prasekolah', en: 'Preschool', key: 'prasekolah-info' },
  { bm: 'PIBG SKBT', en: 'PTA', key: 'pibg-ajk', sub: [
    { bm: 'Ahli Jawatankuasa', en: 'Committee', key: 'pibg-ajk' },
    { bm: 'Aktiviti PIBG', en: 'PTA Activities', key: 'pibg-aktiviti' },
  ] },
  { bm: 'Galeri', en: 'Gallery', key: 'home', sub: [
    { bm: 'Galeri Foto', en: 'Photo Gallery', key: 'home' },
    { bm: 'Galeri Video', en: 'Video Gallery', key: 'galeri-video' },
  ] },
  { bm: 'Sumber Digital', en: 'Digital Resources', key: 'sumber-bukuteks', sub: [
    { bm: 'Buku Teks Digital', en: 'Digital Textbooks', key: 'sumber-bukuteks' },
    { bm: 'e-Pembelajaran', en: 'e-Learning', key: 'sumber-elearning' },
    { bm: 'Pautan Rasmi KPM', en: 'Official MOE Links', key: 'sumber-kpm' },
  ] },
  { bm: 'Pautan', en: 'Links', key: 'pautan-berguna' },
];

// Full day names for the auto-updating ribbon date.
const DAYS_FULL = {
  bm: ['Ahad', 'Isnin', 'Selasa', 'Rabu', 'Khamis', 'Jumaat', 'Sabtu'],
  en: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
};

// YouTube id from common URL shapes (watch, youtu.be, embed, shorts).
function ytId(url) {
  const m = String(url || '').match(/(?:youtu\.be\/|youtube\.com\/(?:watch\?v=|embed\/|shorts\/))([\w-]{11})/);
  return m ? m[1] : null;
}

// Render one content block (built in the admin) on a public inner page.
function renderBlock(b, lang) {
  const title = b['title_' + lang] || b.title_bm || b.title_en || '';
  const body = b['body_' + lang] || b.body_bm || b.body_en || '';
  if (b.type === 'image')
    return <figure className="k-blk-img">{b.url && <img src={b.url} alt={title} />}{title && <figcaption>{title}</figcaption>}</figure>;
  if (b.type === 'video') {
    const id = ytId(b.url);
    return <div className="k-blk-vid">{title && <h3>{title}</h3>}
      {id ? <div className="k-embed"><iframe src={`https://www.youtube.com/embed/${id}`} title={title || 'video'} allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen /></div>
          : (b.url ? <a href={b.url} target="_blank" rel="noopener">{b.url}</a> : null)}</div>;
  }
  if (b.type === 'pdf')
    return <div className="k-blk-file">{title && <span className="t">{title}</span>}<a href={b.url} target="_blank" rel="noopener">{lang === 'bm' ? 'Buka / Muat turun PDF' : 'Open / Download PDF'} →</a></div>;
  if (b.type === 'link')
    return <a className="k-blk-link" href={b.url} target="_blank" rel="noopener"><span className="t">{title || b.url}</span>{body && <span className="d">{body}</span>}</a>;
  return <div className="k-blk-text">{title && <h3>{title}</h3>}{body && body.split('\n').map((p, i) => (p.trim() ? <p key={i}>{p}</p> : null))}</div>;
}

// A public inner page: title + the stack of blocks for this page_key.
function PageView({ pageKey, pages, lang, onBack }) {
  const pg = (pages || []).find((p) => p.page_key === pageKey);
  let blocks = [];
  try { blocks = pg && pg.blocks ? JSON.parse(pg.blocks) : []; } catch (e) { blocks = []; }
  const title = (pg && (pg['title_' + lang] || pg.title_bm)) || '';
  return (
    <div className="k-main">
      <section className="k-page">
        <button className="k-page-back" onClick={onBack}>← {lang === 'bm' ? 'Kembali ke Utama' : 'Back to Home'}</button>
        <h1 className="k-page-title">{title || (lang === 'bm' ? 'Halaman' : 'Page')}</h1>
        {blocks.length === 0
          ? <p className="k-page-empty">{lang === 'bm' ? 'Kandungan akan dikemas kini tidak lama lagi.' : 'Content will be updated soon.'}</p>
          : <div className="k-blocks">{blocks.map((b, i) => <div key={i} className="k-block">{renderBlock(b, lang)}</div>)}</div>}
      </section>
    </div>
  );
}

function DirKlasik({ lang = 'bm', dark = false, accent = '#0b3b7a',
                    onLangChange, onDarkChange, data = null }) {
  const [calMonth, setCalMonth] = React.useState(4); // May (0-indexed)
  const [pickedDay, setPickedDay] = React.useState(21);
  const [activeNews, setActiveNews] = React.useState(0);
  const [navOpen, setNavOpen] = React.useState(false);
  // Mobile staff "tap to reveal quote" — a single open card at a time.
  const [openStaff, setOpenStaff] = React.useState(null);
  const [page, setPage] = React.useState(() => {
    const h = (typeof location !== 'undefined' ? (location.hash || '') : '').replace(/^#\/?/, '');
    return h && h !== 'home' ? h : null;
  }); // current inner page_key, or null = homepage

  // Live data from the API when present; otherwise the built-in content from
  // shared.jsx, so the page is never blank (first paint / offline / API down).
  const arr = (k, fb) => (data && Array.isArray(data[k]) && data[k].length) ? data[k] : fb;
  const news = arr('news', NEWS);
  const events = arr('events', EVENTS);
  const stats = arr('stats', STATS);
  const staff = arr('staff', STAFF);
  const pages = (data && Array.isArray(data.pages)) ? data.pages : [];
  const settings = (data && Array.isArray(data.settings) && data.settings[0]) || {};
  const sv = (k, fb) => (settings[k] != null && settings[k] !== '') ? settings[k] : fb;
  const _now = new Date();
  const dateStr = `${DAYS_FULL[lang][_now.getDay()]}, ${_now.getDate()} ${MONTH_NAMES[lang][_now.getMonth()]} ${_now.getFullYear()}`;
  const go = (key) => {
    const p = (!key || key === 'home') ? null : key;
    setPage(p);
    try { if (p) location.hash = p; else history.replaceState(null, '', location.pathname + location.search); } catch (e) {}
    setNavOpen(false); window.scrollTo({ top: 0 });
  };
  React.useEffect(() => {
    const onHash = () => { const h = (location.hash || '').replace(/^#\/?/, ''); setPage(h && h !== 'home' ? h : null); };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  const cells = makeMonth(2026, calMonth);
  const eventByDay = {};
  events.forEach((e) => { if (e.mo - 1 === calMonth) eventByDay[e.day] = e; });
  const pickedEvent = eventByDay[pickedDay];

  // Tone for each news card's placeholder image. Cycles so categories stay
  // visually distinct without us picking a colour per category.
  const toneByIndex = ['blue', 'red', 'yellow', 'light'];
  // Featured item, clamped in case the live list is shorter than the index.
  const feat = news[activeNews] || news[0];

  return (
    <div className={`klasik${dark ? ' dark' : ''}`} style={{ '--accent': accent }}>
      {/* ── Top ribbon (gov-style banner) ── */}
      <div className="k-ribbon">
        <div className="k-ribbon-left">
          <FlagMark w={20} />
          <span>{sv('ribbon_' + lang, lang === 'bm'
            ? 'Laman Rasmi Sekolah · Kementerian Pendidikan Malaysia'
            : 'Official School Website · Ministry of Education Malaysia')}</span>
        </div>
        <div className="k-ribbon-right">
          <span>Kod: {sv('school_code', SCHOOL.code)}</span>
          <span className="k-ribbon-sep" />
          <span>{dateStr}</span>
          <span className="k-ribbon-sep" />
          <button className="k-ribbon-toggle"
                  aria-pressed={lang === 'en'}
                  onClick={() => onLangChange && onLangChange(lang === 'bm' ? 'en' : 'bm')}>
            {lang === 'bm' ? 'EN' : 'BM'}
          </button>
          <button className="k-ribbon-toggle"
                  aria-pressed={dark}
                  onClick={() => onDarkChange && onDarkChange(!dark)}
                  aria-label={lang === 'bm' ? 'Tukar mod gelap' : 'Toggle dark mode'}>
            {dark ? '☼' : '☾'}
          </button>
        </div>
      </div>

      {/* ── Masthead ── */}
      <header className="k-masthead">
        <img src="assets/skbt-logo.png" alt="SK Bandar Tawau" className="k-masthead-logo" />
        <div className="k-masthead-text">
          <div className="k-masthead-eyebrow">
            {(lang === 'bm' ? 'Sejak ' : 'Since ') + sv('established', SCHOOL.established)} · {t('hero.welcome', lang)}
          </div>
          <h1 className="k-masthead-title">{sv('school_name_' + lang, SCHOOL.fullName[lang])}</h1>
          <div className="k-masthead-meta">
            {sv('district_' + lang, SCHOOL.district[lang])} · <i>“{sv('motto_' + lang, SCHOOL.motto[lang])}”</i>
          </div>
        </div>
        <div className="k-masthead-cta">
          {sv('cta_url', '')
            ? <a className="k-btn-primary" style={{ display: 'inline-block', textDecoration: 'none' }} href={sv('cta_url', '#')} target="_blank" rel="noopener">{sv('cta_label_' + lang, t('hero.parents', lang))}</a>
            : <button className="k-btn-primary">{sv('cta_label_' + lang, t('hero.parents', lang))}</button>}
        </div>
      </header>

      {/* ── Main nav ── */}
      <nav className="k-nav">
        <button className="k-hamburger"
                aria-label={lang === 'bm' ? 'Buka menu' : 'Open menu'}
                aria-expanded={navOpen}
                onClick={() => setNavOpen(!navOpen)}>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            {navOpen
              ? <><line x1="6" y1="6" x2="18" y2="18"/><line x1="6" y1="18" x2="18" y2="6"/></>
              : <><line x1="4" y1="7" x2="20" y2="7"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="17" x2="20" y2="17"/></>}
          </svg>
        </button>
        <ul className={`k-nav-items${navOpen ? ' open' : ''}`}>
          {NAV.map((item, i) => (
            <li key={i} className="k-nav-li">
              <a className={(!page && i === 0) ? 'active' : ''} style={{ cursor: 'pointer' }}
                 onClick={() => go(item.key)}>
                {item[lang]}{item.sub ? <span className="k-caret">▾</span> : null}
              </a>
              {item.sub ? (
                <ul className="k-nav-drop">
                  {item.sub.map((s, j) => <li key={j}><a style={{ cursor: 'pointer' }} onClick={() => go(s.key)}>{s[lang]}</a></li>)}
                </ul>
              ) : null}
            </li>
          ))}
        </ul>
        <span className="k-nav-status">
          {lang === 'bm' ? 'Sesi 2026 sedang berjalan' : 'Session 2026 in progress'}
        </span>
      </nav>

      {page ? (
        <PageView pageKey={page} pages={pages} lang={lang} onBack={() => go('home')} />
      ) : (
      <React.Fragment>
      <div className="k-main">
        {/* ── Hero ── */}
        <section className="k-hero">
          <div className="k-hero-img">
            <ImgPlaceholder
              label={lang === 'bm' ? 'foto perhimpunan rasmi sekolah' : 'school assembly photo'}
              tone={dark ? 'navy' : 'blue'}
            />
            <div className="k-hero-overlay">
              <span className="k-tag">{lang === 'bm' ? 'Sorotan' : 'Featured'}</span>
              <h2 className="k-hero-headline">{news[0].title[lang]}</h2>
              <p className="k-hero-blurb">{news[0].blurb[lang]}</p>
            </div>
          </div>
          <aside className="k-aside">
            <div className="k-aside-eyebrow">{t('sections.visiMisi', lang)}</div>
            <div>
              <div className="k-aside-h">{t('sections.visiTitle', lang)}</div>
              <p className="visi">{SCHOOL.visi[lang]}</p>
            </div>
            <div className="k-aside-sep" />
            <div>
              <div className="k-aside-h">{t('sections.misiTitle', lang)}</div>
              <p className="misi">{SCHOOL.misi[lang]}</p>
            </div>
            <div className="k-aside-foot">
              <div>
                <div className="k-aside-h" style={{ marginBottom: 2 }}>
                  {lang === 'bm' ? 'Guru Besar' : 'Headmistress'}
                </div>
                <div className="name">{SCHOOL.hm[lang]}</div>
              </div>
              <a>{t('cta.readMore', lang)} →</a>
            </div>
          </aside>
        </section>
      </div>

      {/* ── Stats strip (full bleed within main) ── */}
      <div className="k-main">
        <section className="k-stats">
          {stats.map((s, i) => (
            <div key={s.id || i}>
              <div className="k-stat-n">{s.n}</div>
              <div className="k-stat-l">{s.label[lang]}</div>
            </div>
          ))}
        </section>
      </div>

      <div className="k-main">
        <section className="k-news-cal">
          {/* News column */}
          <div>
            <div className="k-secthead">
              <h2>{t('sections.latestNews', lang)}</h2>
              <div className="rule" />
              <a className="action">{t('cta.seeAll', lang)} →</a>
            </div>
            <div className="k-news-tabs">
              {news.map((n, i) => (
                <button key={n.id || i}
                        className={`k-news-tab${i === activeNews ? ' active' : ''}`}
                        onClick={() => setActiveNews(i)}>
                  {n.cat[lang]}
                </button>
              ))}
            </div>
            <article className="k-news-feat">
              <ImgPlaceholder
                label={feat.cat[lang].toLowerCase()}
                tone={toneByIndex[activeNews % toneByIndex.length]}
              />
              <div className="k-news-feat-body">
                <div className="k-news-feat-date">{feat.date[lang]}</div>
                <h3 className="k-news-feat-title">{feat.title[lang]}</h3>
                <p className="k-news-feat-blurb">{feat.blurb[lang]}</p>
                <a className="k-news-feat-more">{t('cta.readMore', lang)} →</a>
              </div>
            </article>
            <div className="k-news-sub">
              {news.slice(1, 3).map((n, i) => (
                <div key={n.id || i} className="k-news-sub-card">
                  <div className="k-news-sub-meta">{n.cat[lang]} · {n.date[lang]}</div>
                  <h4 className="k-news-sub-title">{n.title[lang]}</h4>
                </div>
              ))}
            </div>
          </div>

          {/* Calendar column */}
          <div>
            <div className="k-secthead">
              <h2>{t('sections.upcoming', lang)}</h2>
              <div className="rule" />
            </div>
            <div className="k-cal-wrap">
              <div className="k-cal-head">
                <button onClick={() => setCalMonth((m) => (m + 11) % 12)} aria-label={lang === 'bm' ? 'Bulan sebelum' : 'Previous month'}>‹</button>
                <div className="k-cal-month">{MONTH_NAMES[lang][calMonth]} 2026</div>
                <button onClick={() => setCalMonth((m) => (m + 1) % 12)} aria-label={lang === 'bm' ? 'Bulan seterusnya' : 'Next month'}>›</button>
              </div>
              <div className="k-cal-dow">
                {DOW[lang].map((d, i) => <div key={i}>{d}</div>)}
              </div>
              <div className="k-cal-grid">
                {cells.map((d, i) => {
                  const e = d && eventByDay[d];
                  const isPicked = d === pickedDay;
                  const colorVar = e && ({ blue: 'var(--accent)', red: 'var(--red)', yellow: 'var(--yellow)' })[e.color];
                  return (
                    <button key={i}
                            disabled={!d}
                            onClick={() => d && setPickedDay(d)}
                            className={`k-cal-cell${e ? ' has-event' : ''}${isPicked ? ' picked' : ''}`}
                            style={e && !isPicked ? { background: `color-mix(in srgb, ${colorVar} 13%, transparent)`, color: colorVar } : null}>
                      {d || ''}
                      {e && !isPicked && <span className="dot" style={{ background: colorVar }} />}
                    </button>
                  );
                })}
              </div>
              {pickedEvent ? (
                <div className="k-cal-detail"
                     style={{ borderLeftColor: ({ blue: 'var(--accent)', red: 'var(--red)', yellow: 'var(--yellow)' })[pickedEvent.color] }}>
                  <div className="k-cal-detail-date">{MONTH_NAMES[lang][calMonth]} {pickedDay}</div>
                  <div className="k-cal-detail-label">{pickedEvent.label[lang]}</div>
                </div>
              ) : pickedDay ? (
                <div className="k-cal-detail no-event">
                  {lang === 'bm' ? 'Tiada acara pada hari ini.' : 'No events on this day.'}
                </div>
              ) : null}
            </div>
          </div>
        </section>
      </div>

      {/* ── Staff ── */}
      <div className="k-main">
        <section className="k-staff">
          <div className="k-secthead">
            <h2>{t('sections.ourTeachers', lang)}</h2>
            <div className="rule" />
            <a className="action">{t('cta.seeAll', lang)} →</a>
          </div>
          <div className="k-staff-grid">
            {staff.map((s, i) => {
              const isOpen = openStaff === i;
              const initials = s.name.split(' ').filter(p => p[0] && p[0].match(/[A-Z]/)).slice(-2).map(p => p[0]).join('');
              return (
                <div key={s.id || i}
                     className={`k-staff-card${isOpen ? ' show-quote' : ''}`}
                     tabIndex={0}
                     onClick={() => setOpenStaff(isOpen ? null : i)}
                     onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setOpenStaff(isOpen ? null : i); } }}>
                  <div className="k-staff-avatar"
                       style={{ background: `oklch(0.85 0.05 ${s.hue})`, color: `oklch(0.3 0.08 ${s.hue})` }}>
                    {initials}
                  </div>
                  <div className="k-staff-name">{s.name}</div>
                  <div className="k-staff-role">{s.role[lang]}</div>
                  <div className="k-staff-subj">{s.subject[lang]}</div>
                  <div className="k-staff-quote">{s.quote[lang]}</div>
                </div>
              );
            })}
          </div>
        </section>
      </div>

      </React.Fragment>
      )}

      {/* ── Footer ── */}
      <footer className="k-footer">
        <div className="k-footer-row">
          <div className="k-footer-brand">
            <div className="k-footer-brand-logo">
              <img src="assets/skbt-logo.png" alt="" />
            </div>
            <div>
              <div className="k-footer-name">{sv('school_name_' + lang, SCHOOL.fullName[lang])}</div>
              <div className="k-footer-addr">{sv('address_' + lang, 'Jalan Sekolah, 91000 Tawau, Sabah')} · {sv('phone', '+60 89-XXX XXX')}</div>
            </div>
          </div>
          <div className="k-footer-copy">
            © 2026 {SCHOOL.shortName}. {lang === 'bm' ? 'Hak Cipta Terpelihara.' : 'All Rights Reserved.'}
          </div>
        </div>
      </footer>
    </div>
  );
}

Object.assign(window, { DirKlasik });