// Sekce Program hlavní stránky (schváleno 2026-09-21). Klik na oblast otevře modal se
// STRUČNOU verzí (PROGRAM_SHORT z data-program2.jsx). Malý šedý odkaz „Více…" dole
// ve stejném modalu rozbalí současný dlouhý program k dané oblasti — všechny
// příspěvky z PROGRAM[i].articles pod sebou (bez pill-menu).
// Závisí na ProgramSection.jsx (window.ModalClose, window.ProgramArticle).
const BODY2 = { fontFamily: 'var(--font-body)', fontSize: 'var(--fs-body)', lineHeight: 'var(--lh-relaxed)', color: 'var(--text-body)', margin: '0 0 var(--space-4)' };
const EYEBROW2 = { fontFamily: 'var(--font-heading)', fontSize: 'var(--fs-eyebrow)', fontWeight: 600, letterSpacing: 'var(--ls-eyebrow)', textTransform: 'uppercase', color: 'var(--text-muted)', margin: '0 0 var(--space-3)' };

// Podrobná verze (odkaz „Více…" dole v modalu). false = modal ukazuje jen stručnou verzi.
const SHOW_DETAIL = true;

const capFirst = s => s.charAt(0).toUpperCase() + s.slice(1);

// Sdílitelné odkazy (hash): #program · #bydleni · #bydleni-vice (modal s rozbalenými podrobnostmi).
// Klíč = `number` oblasti v PROGRAM_SHORT.
const SLUGS = { 1: 'radnice', 2: 'spolky', 3: 'bydleni', 4: 'majetek', 5: 'krajina' };
function parseHash() {
  const h = decodeURIComponent(window.location.hash.replace(/^#/, ''));
  const vice = /-vice$/.test(h);
  const slug = h.replace(/-vice$/, '');
  const idx = window.PROGRAM_SHORT.findIndex(c => SLUGS[c.number] === slug);
  return { idx: idx >= 0 ? idx : null, vice: idx >= 0 && vice, isProgram: idx >= 0 || h === 'program' };
}
function setHash(h) {
  try { history.replaceState(null, '', h ? '#' + h : window.location.pathname + window.location.search); } catch (e) {}
}

function ProgramSectionV2() {
  const { SectionHeading, ProgramCard } = window.VizeProDamboIceDesignSystem_70ea19;
  const { ModalClose, ProgramArticle } = window;
  const [openIdx, setOpenIdx] = React.useState(null);
  const [detail, setDetail] = React.useState(false);
  const detailRef = React.useRef(null);
  const skipScroll = React.useRef(false); // odkaz #…-vice: podrobnosti rozbalit, ale číst od začátku

  const open = openIdx != null ? window.PROGRAM_SHORT[openIdx] : null;
  // Podrobné texty = příspěvky stejné oblasti v současném programu (párování přes `number`).
  const articles = (open && SHOW_DETAIL) ? ((window.PROGRAM.find(c => c.number === open.number) || {}).articles || []) : [];

  const openChapter = i => { setDetail(false); setOpenIdx(i); setHash(SLUGS[window.PROGRAM_SHORT[i].number]); };
  const close = () => { setOpenIdx(null); setDetail(false); setHash('program'); };

  // Otevření z URL (při načtení i při změně hashe, např. odkaz v menu nebo ručně zadaná adresa)
  React.useEffect(() => {
    const apply = () => {
      const { idx, vice, isProgram } = parseHash();
      if (idx != null) {
        skipScroll.current = vice;
        setOpenIdx(idx); setDetail(vice);
        const el = document.getElementById('program');
        if (el) el.scrollIntoView({ block: 'start' });
      } else {
        setOpenIdx(null); setDetail(false);
        if (isProgram) { const el = document.getElementById('program'); if (el) el.scrollIntoView({ block: 'start' }); }
      }
    };
    apply();
    window.addEventListener('hashchange', apply);
    return () => window.removeEventListener('hashchange', apply);
  }, []);

  // Esc zavírá modal
  React.useEffect(() => {
    if (openIdx == null) return;
    const onKey = e => { if (e.key === 'Escape') close(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [openIdx]);

  // Po rozbalení podrobností odroluj na jejich začátek
  React.useEffect(() => {
    if (!detail) return; // (při prvním renderu je detail ještě false — příznak skipScroll se nesmí spotřebovat dřív)
    if (skipScroll.current) { skipScroll.current = false; return; }
    if (detailRef.current) detailRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }, [detail]);

  return (
    <section id="program" style={{ background: 'var(--surface-section)', padding: 'var(--section-y) 0' }}>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '0 var(--gutter)' }}>
        <SectionHeading eyebrow="Program" title="Pět oblastí, na kterých nám záleží"
          intro="Kliknutím na oblast otevřete stručné shrnutí." />

        <div className="vpd-program-grid" style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--space-6)', marginTop: 'var(--space-8)',
        }}>
          {window.PROGRAM_SHORT.map((c, i) => (
            <ProgramCard key={c.number} number={c.number} title={c.title}
              summary={capFirst(c.bullets.join('\u00a0· '))} status="ready" onOpen={() => openChapter(i)} />
          ))}
        </div>
      </div>

      {open && (
        <div onClick={close} style={{
          position: 'fixed', inset: 0, zIndex: 100, background: 'rgba(27,27,27,0.45)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 'var(--gutter)',
          backdropFilter: 'blur(2px)',
        }}>
          <div onClick={e => e.stopPropagation()} role="dialog" aria-modal="true" aria-label={open.title} style={{
            position: 'relative',
            background: 'var(--surface-card)', borderRadius: 'var(--radius-lg)', maxWidth: 680, width: '100%',
            maxHeight: '90vh', overflowY: 'auto',
            padding: 'clamp(1.75rem,1rem + 2vw,2.5rem)', boxShadow: 'var(--shadow-lg)',
          }}>
            <ModalClose onClick={close} />
            <span style={{ fontFamily: 'var(--font-heading)', fontWeight: 800, fontSize: 26, color: 'var(--green-300)' }}>
              {String(open.number).padStart(2, '0')}
            </span>
            <h3 style={{ fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 'var(--fs-h3)', color: 'var(--text-strong)', margin: '6px 0 var(--space-4)', paddingRight: 48 }}>
              {open.title}
            </h3>

            {/* Stručná verze */}
            {open.text.map((t, i) => <p key={i} style={BODY2}>{t}</p>)}
            <p style={{ ...EYEBROW2, marginTop: 'var(--space-5)' }}>Shrnutí v bodech</p>
            <ul style={{ margin: articles.length > 0 ? '0 0 var(--space-5)' : 0, padding: 0, listStyle: 'none', display: 'grid', gap: 'var(--space-2)' }}>
              {open.bullets.map((b, i) => (
                <li key={i} style={{ ...BODY2, margin: 0, display: 'flex', gap: '10px', alignItems: 'baseline', fontWeight: 600, color: 'var(--text-strong)' }}>
                  <span aria-hidden="true" style={{ color: 'var(--color-primary)', fontWeight: 800 }}>✓</span>
                  {b}
                </li>
              ))}
            </ul>

            {/* Přepínač podrobné verze — záměrně nenápadný malý šedý odkaz (rozhodnutí 2026-09-21) */}
            {articles.length > 0 && (
              <button type="button" className="vpd-more-btn" aria-expanded={detail} onClick={() => { const d = !detail; setDetail(d); setHash(SLUGS[open.number] + (d ? '-vice' : '')); }} style={{
                fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: 'var(--fs-small)', lineHeight: 1.2,
                padding: '4px 0', margin: 0, border: 0, background: 'transparent', cursor: 'pointer',
                color: 'var(--text-muted)', textDecoration: 'underline', textUnderlineOffset: 3,
                textDecorationColor: 'var(--border-subtle)',
              }}>
                {detail ? 'Méně' : 'Více…'}
              </button>
            )}

            {/* Podrobná verze — všechny příspěvky oblasti pod sebou */}
            {detail && (
              <div ref={detailRef} style={{ borderTop: '1px solid var(--border-subtle)', marginTop: 'var(--space-5)', paddingTop: 'var(--space-6)', scrollMarginTop: 'var(--space-4)' }}>
                {articles.map((a, i) => (
                  <div key={i} style={i > 0 ? { borderTop: '1px solid var(--border-subtle)', marginTop: 'var(--space-6)', paddingTop: 'var(--space-6)' } : undefined}>
                    <ProgramArticle article={a} number={i + 1} eyebrow={a.short} />
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>
      )}
    </section>
  );
}
window.ProgramSectionV2 = ProgramSectionV2;