// App shell — navigation + tweaks panel + palette/type CSS variables

const PALETTES = {
  'stone-navy': { bg: '#F2F0EB', bg2: '#EAE6DD', paper: '#FAF8F3', ink: '#1A1A1A', ink2: '#3A3A3A', ink3: '#6B6760', line: '#D8D2C5', line2: '#C4BCA9', navy: '#2C3E50', taupe: '#8B7355', accent: '#2C3E50', label: 'Stone & Navy' },
  'bone-claret': { bg: '#FFFBF5', bg2: '#F6EFE3', paper: '#FFFDF8', ink: '#1A1614', ink2: '#3A2E28', ink3: '#766860', line: '#E8DCC8', line2: '#D4C2A6', navy: '#6B2737', taupe: '#A88654', accent: '#6B2737', label: 'Bone & Claret' },
  'parchment-pine': { bg: '#FAF7F2', bg2: '#F0EBDF', paper: '#FFFCF6', ink: '#1F1D18', ink2: '#3D3A33', ink3: '#6E6960', line: '#DDD4BE', line2: '#C5BAA0', navy: '#3D5A4A', taupe: '#8E7344', accent: '#3D5A4A', label: 'Parchment & Pine' },
  'linen-walnut': { bg: '#F5EFE4', bg2: '#EAE2D2', paper: '#FBF6EB', ink: '#231C12', ink2: '#3D3022', ink3: '#6F5F46', line: '#D8C9AE', line2: '#BFAC8B', navy: '#1F3A5F', taupe: '#7A4A2B', accent: '#7A4A2B', label: 'Linen & Walnut' },
  'coral-sky': { bg: '#FFF4E6', bg2: '#FFE8CC', paper: '#FFFBF5', ink: '#1A1614', ink2: '#3A2E28', ink3: '#6B5A4E', line: '#FFD9B3', line2: '#FFC88A', navy: '#0066CC', taupe: '#FF6B4A', accent: '#FF6B4A', label: 'Coral & Sky' },
  'mint-plum': { bg: '#E8F9F0', bg2: '#D4F3E3', paper: '#F5FDF9', ink: '#1A1614', ink2: '#2E3A33', ink3: '#5A6B60', line: '#B8E6CF', line2: '#9DDCBB', navy: '#7B2D8E', taupe: '#2EA56F', accent: '#7B2D8E', label: 'Mint & Plum' },
  'sunshine-indigo': { bg: '#FFFAED', bg2: '#FFF0CC', paper: '#FFFEF8', ink: '#1A1614', ink2: '#3A2E1F', ink3: '#6B5A3E', line: '#FFE399', line2: '#FFD966', navy: '#4338CA', taupe: '#F59E0B', accent: '#F59E0B', label: 'Sunshine & Indigo' },
  'rose-sage': { bg: '#FFF0F3', bg2: '#FFE0E8', paper: '#FFF8FA', ink: '#1A1614', ink2: '#3A282E', ink3: '#6B5A60', line: '#FFD0DC', line2: '#FFB8C9', navy: '#4B7C5C', taupe: '#E84A7A', accent: '#E84A7A', label: 'Rose & Sage' },
};

const TYPE_PAIRS = {
  'serif-led': { display: "'Cormorant Garamond', serif", body: "'Inter', sans-serif", label: 'Serif-led (Cormorant + Inter)' },
  'sans-led': { display: "'Inter', sans-serif", body: "'Inter', sans-serif", label: 'Sans-led (Inter only)' },
  'classical': { display: "'Cormorant Garamond', serif", body: "'Cormorant Garamond', serif", label: 'Fully serif (Cormorant)' },
};

const App = () => {
  const { TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakSelect } = window;
  const defaults = JSON.parse(document.getElementById('tweak-defaults').textContent.replace(/\/\*EDITMODE-(BEGIN|END)\*\//g, ''));
  const [tweaks, setTweak] = useTweaks(defaults);
  const [view, setView] = React.useState('welcome');
  const [profileId, setProfileId] = React.useState(1);

  // Apply palette + type to CSS variables
  React.useEffect(() => {
    const p = PALETTES[tweaks.palette] || PALETTES['stone-navy'];
    const t = TYPE_PAIRS[tweaks.typePairing] || TYPE_PAIRS['serif-led'];
    const r = document.documentElement.style;
    r.setProperty('--bg', p.bg); r.setProperty('--bg-2', p.bg2);
    r.setProperty('--paper', p.paper);
    r.setProperty('--ink', p.ink); r.setProperty('--ink-2', p.ink2); r.setProperty('--ink-3', p.ink3);
    r.setProperty('--line', p.line); r.setProperty('--line-2', p.line2);
    r.setProperty('--navy', p.navy); r.setProperty('--taupe', p.taupe);
    r.setProperty('--accent', p.accent);
    r.setProperty('--serif', t.display);
    r.setProperty('--sans', t.body);
  }, [tweaks.palette, tweaks.typePairing]);

  const navigate = (v, id) => {
    setView(v);
    if (id !== undefined) setProfileId(id);
    window.scrollTo(0, 0);
  };
  const setRole = (r) => setTweak('role', r);
  React.useEffect(() => { window.__setRole = setRole; }, [setRole]);

  const VIEWS = {
    'welcome': window.Welcome,
    'landing': window.Landing,
    'welcome': window.Welcome,
    'churches': window.Churches,
    'apply': window.Apply,
    'signup': window.Signup,
    'signup-done': window.SignupDone,
    'church': window.Church,
    'vouch': window.Vouch,
    'reference': window.Reference,
    'browse': window.Browse,
    'profile': window.Profile,
    'signin': window.Signin,
    'member-home': window.MemberHome,
    'member-browse': window.Browse,
    'member-inbox': window.MemberInbox,
    'member-thread': window.MemberThread,
    'member-profile-edit': window.MemberProfileEdit,
    'member-settings': window.MemberSettings,
    'member-notifications': window.MemberNotifications,
    'member-pause': window.MemberPause,
    'member-matches': window.MemberMatches,
    'elder-home': window.ElderHome,
    'elder-vouch-inbox': window.ElderVouchInbox,
    'elder-members': window.ElderMembers,
    'elder-member-detail': window.ElderMemberDetail,
    'elder-reports': window.ElderReports,
    'elder-notifications': window.ElderNotifications,
    'admin-home': window.AdminHome,
    'admin-churches': window.AdminChurches,
    'admin-moderation': window.AdminModeration,
  };
  const Current = VIEWS[view] || window.Landing;

  return (
    <>
      <Current tweaks={tweaks} navigate={navigate} setRole={setRole} memberId={profileId} threadId={profileId} />

      {view !== 'welcome' && (
        <a href={window.FEEDBACK_FORM_URL || 'https://forms.gle/ttNdZbQVUAcwBVF8A'} target="_blank" rel="noopener noreferrer"
          style={{
            position: 'fixed', left: 20, bottom: 20, zIndex: 2147483640,
            display: 'inline-flex', alignItems: 'center', gap: 8,
            background: 'var(--ink)', color: 'var(--paper)', textDecoration: 'none',
            fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase',
            padding: '10px 16px', borderRadius: 999, boxShadow: '0 4px 16px rgba(0,0,0,0.18)'
          }}>
          <span style={{ width: 7, height: 7, borderRadius: 99, background: 'var(--taupe)' }}></span>
          Prototype · Share feedback
        </a>
      )}

      <TweaksPanel title="Tweaks">
        <TweakSection title="Sign in as">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 6 }}>
            {[
              ['guest', 'Guest', 'landing'],
              ['member', 'Member', 'member-home'],
              ['elder', 'Elder', 'elder-home'],
              ['admin', 'Admin', 'admin-home'],
            ].map(([v, l, dest]) => (
              <button key={v} onClick={() => { setTweak('role', v); navigate(dest); }} style={{
                padding: '8px 10px', fontSize: 12, fontFamily: 'inherit',
                background: tweaks.role === v ? '#1a1a1a' : 'transparent',
                color: tweaks.role === v ? '#fff' : '#333',
                border: '1px solid ' + (tweaks.role === v ? '#1a1a1a' : '#d0c8b8'),
                borderRadius: 2, cursor: 'pointer', textAlign: 'left'
              }}>{l}</button>
            ))}
          </div>
        </TweakSection>

        <TweakSection title="Navigate">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 6 }}>
            {(() => {
              const role = tweaks.role || 'guest';
              const all = {
                guest: [['welcome','Welcome (intro)'],['landing','Landing'],['churches','Partner Churches'],['apply','Apply'],['signup','Signup (member)'],['church','Church onboarding'],['vouch','Commendation form'],['reference','Reference form'],['signin','Sign in']],
                member: [['member-home','Home'],['member-browse','Directory'],['member-inbox','Inbox'],['member-thread','Thread'],['member-matches','Mutual'],['member-profile-edit','Edit profile'],['member-settings','Account'],['member-notifications','Notifications'],['member-pause','Pause']],
                elder: [['elder-home','Dashboard'],['elder-vouch-inbox','Commendations'],['elder-members','Members'],['elder-member-detail','Member detail'],['elder-reports','Reports'],['elder-notifications','Notifications'],['vouch','Commendation form']],
                admin: [['admin-home','Overview'],['admin-churches','Churches'],['admin-moderation','Moderation']],
              };
              return all[role].map(([v, l]) => (
                <button key={v} onClick={() => navigate(v)} style={{
                  padding: '8px 10px', fontSize: 12, fontFamily: 'inherit',
                  background: view === v ? '#1a1a1a' : 'transparent',
                  color: view === v ? '#fff' : '#333',
                  border: '1px solid ' + (view === v ? '#1a1a1a' : '#d0c8b8'),
                  borderRadius: 2, cursor: 'pointer', textAlign: 'left'
                }}>{l}</button>
              ));
            })()}
          </div>
        </TweakSection>

        <TweakSection title="Palette">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8 }}>
            {Object.entries(PALETTES).map(([k, p]) => (
              <button key={k} onClick={() => setTweak('palette', k)} style={{
                padding: 10, background: '#fff', cursor: 'pointer',
                border: '1px solid ' + (tweaks.palette === k ? '#1a1a1a' : '#d0c8b8'),
                borderRadius: 2, textAlign: 'left'
              }}>
                <div style={{ display: 'flex', gap: 4, marginBottom: 8 }}>
                  <div style={{ flex: 1, height: 24, background: p.bg, border: '1px solid #00000010' }}></div>
                  <div style={{ flex: 1, height: 24, background: p.navy }}></div>
                  <div style={{ flex: 1, height: 24, background: p.taupe }}></div>
                  <div style={{ flex: 1, height: 24, background: p.ink }}></div>
                </div>
                <div style={{ fontSize: 11, fontFamily: 'inherit', color: '#333' }}>{p.label}</div>
              </button>
            ))}
          </div>
        </TweakSection>

        <TweakSection title="Type pairing">
          <TweakRadio value={tweaks.typePairing} onChange={v => setTweak('typePairing', v)}
            options={[
              { value: 'serif-led', label: 'Serif' },
              { value: 'sans-led', label: 'Sans' },
              { value: 'classical', label: 'Classical' },
            ]}/>
        </TweakSection>

        <TweakSection title="Wordmark">
          <TweakRadio value={tweaks.wordmark} onChange={v => setTweak('wordmark', v)}
            options={[
              { value: 'monogram', label: 'Monogram' },
              { value: 'wordmark', label: 'Wordmark' },
              { value: 'stamp', label: 'Stamp' },
            ]}/>
        </TweakSection>

        <TweakSection title="Hero layout">
          <TweakRadio value={tweaks.heroLayout} onChange={v => setTweak('heroLayout', v)}
            options={[
              { value: 'editorial', label: 'Editorial' },
              { value: 'centered', label: 'Centered' },
              { value: 'split', label: 'Split' },
            ]}/>
        </TweakSection>

        <TweakSection title="Tone of copy">
          <TweakRadio value={tweaks.tone} onChange={v => setTweak('tone', v)}
            options={[
              { value: 'warm', label: 'Warm' },
              { value: 'formal', label: 'Formal' },
            ]}/>
        </TweakSection>
      </TweaksPanel>
    </>
  );
};

ReactDOM.createRoot(document.getElementById('app')).render(<App />);