// Naviyell — clean export shell: no iOS frame, no status bar, no rounded corners.
// Renders the same screens, just without any phone chrome.

const { useEffect: useEffectClean } = React;

const CLEAN_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "view": "prototype",
  "primaryInk": "#2D2B55",
  "accentGold": "#C9A84C",
  "paperBg": "#FAF8F5",
  "density": "comfortable",
  "motifIntensity": "subtle"
}/*EDITMODE-END*/;

if (typeof document !== 'undefined' && !document.getElementById('ac-clean-responsive')) {
  const s = document.createElement('style');
  s.id = 'ac-clean-responsive';
  s.textContent = `
    html.ac-proto-lock, 
html.ac-proto-lock body {
  margin: 0; 
  overflow: hidden; 
  height: 100dvh; 
  overscroll-behavior: none; 
  touch-action: manipulation;
}

.ac-proto-stage {
  position: fixed; 
  inset: 0;
  background: #0f0e1a;
  display: flex; 
  align-items: center; 
  justify-content: center;
  overflow: hidden;
}

.ac-proto-screen {
  width: 100%;
  height: 100%;
  /* Max dimensions for Desktop viewports so it doesn't stretch infinitely */
  max-width: 430px;  /* Raised to 430px to perfectly native-match larger modern phones */
  max-height: 932px; /* Raised to match modern device proportions */
  
  flex: none;
  overflow: hidden; 
  position: relative;
  background: var(--ac-paper, #FAF8F5);
  transform-origin: center center;
}

/* ── THE FIX FOR ODD/LARGE PHONES ──
  If the user is on an actual mobile device (screen width under 480px),
  we completely bypass the desktop restrictions and force it to fill the device.
*/
@media (max-width: 480px) {
  .ac-proto-stage {
    padding: 0; /* Clear padding out on mobile screens */
  }
  .ac-proto-screen {
    max-width: 100% !important;
    max-height: 100% !important;
    width: 100vw !important;
    height: 100dvh !important;
  }
}
  `;
  document.head.appendChild(s);
}

function applyCleanTweaks(t) {
  const root = document.documentElement;
  root.style.setProperty('--ac-ink', t.primaryInk);
  root.style.setProperty('--ac-gold', t.accentGold);
  root.style.setProperty('--ac-paper', t.paperBg);
  root.style.setProperty('--ac-density', t.density === 'compact' ? '0.85' : t.density === 'spacious' ? '1.15' : '1');
  root.style.setProperty('--ac-motif-opacity',
    t.motifIntensity === 'none' ? '0' :
    t.motifIntensity === 'subtle' ? '0.5' :
    t.motifIntensity === 'moderate' ? '1' : '0.5');
}

// Plain rectangular screen container — no rounded corners, no shadow, no status bar.
// In canvas mode it stays a fixed 390×844 frame; in prototype mode the stage
// CSS above sizes it responsively, so we let it inherit (no fixed inline size).
function PlainScreen({ children, fill }) {
  if (fill) {
    return <div className="ac-proto-screen">{children}</div>;
  }
  return (
    <div style={{
      width: 390, height: 844, overflow: 'hidden',
      background: 'var(--ac-paper, #FAF8F5)',
    }}>{children}</div>
  );
}

function CleanPrototypeMode() {
  return (
    <div className="ac-proto-stage">
      <PlainScreen fill>
        <PrototypeShell/>
      </PlainScreen>
    </div>
  );
}

function CleanCanvasMode() {
  const w = 390;
  const h = 844;
  const wrap = (Comp, extraProps = {}) => (
    <PlainScreen><Comp {...extraProps}/></PlainScreen>
  );
  return (
    <DesignCanvas
      title="Naviyell — User App"
      subtitle="占いを入口に、意思決定と行動継続を支援するプラットフォーム"
    >
      <DCSection id="intro" title="01 · イントロ" subtitle="Splash / Onboarding / Auth">
        <DCArtboard id="splash" label="A-01 · Splash" width={w} height={h}>{wrap(A01Splash)}</DCArtboard>
        <DCArtboard id="onb-1" label="A-02 · Onboarding 1/3" width={w} height={h}>{wrap(A02Onboarding, { slide: 0 })}</DCArtboard>
        <DCArtboard id="onb-2" label="A-02 · Onboarding 2/3" width={w} height={h}>{wrap(A02Onboarding, { slide: 1 })}</DCArtboard>
        <DCArtboard id="onb-3" label="A-02 · Onboarding 3/3" width={w} height={h}>{wrap(A02Onboarding, { slide: 2 })}</DCArtboard>
        <DCArtboard id="login" label="A-03 · Login / Register" width={w} height={h}>{wrap(A03Login)}</DCArtboard>
      </DCSection>

      <DCSection id="onboard-q" title="02 · オンボーディング診断" subtitle="Initial hearing + Inner Type Guide">
        <DCArtboard id="hearing" label="A-04 · Initial Hearing" width={w} height={h}>{wrap(A04Hearing, { step: 1 })}</DCArtboard>
        <DCArtboard id="birthday" label="A-04b · 生年月日入力" width={w} height={h}>{wrap(A04Birthday)}</DCArtboard>
        <DCArtboard id="diagnosis" label="A-05 · 30問の診断" width={w} height={h}>{wrap(A05Diagnosis)}</DCArtboard>
        <DCArtboard id="result" label="A-05 · 結果（Born × Now）" width={w} height={h}>{wrap(A05Result)}</DCArtboard>
      </DCSection>

      <DCSection id="core" title="03 · コアループ" subtitle="Home / Browse / Detail / Booking">
        <DCArtboard id="home" label="A-06 · Home" width={w} height={h}>{wrap(A06Home)}</DCArtboard>
        <DCArtboard id="browse" label="A-07 · Browse Tickets" width={w} height={h}>{wrap(A07Browse)}</DCArtboard>
        <DCArtboard id="detail" label="A-08 · Ticket Detail" width={w} height={h}>{wrap(A08TicketDetail)}</DCArtboard>
        <DCArtboard id="anchors" label="A-09 · Anchor List" width={w} height={h}>{wrap(A09AnchorList)}</DCArtboard>
        <DCArtboard id="anchor-detail" label="A-09 · Anchor Profile" width={w} height={h}>{wrap(A09AnchorDetail)}</DCArtboard>
        <DCArtboard id="booking" label="A-10 · Booking" width={w} height={h}>{wrap(A10Booking)}</DCArtboard>
        <DCArtboard id="status" label="A-11 · Reservation Status" width={w} height={h}>{wrap(A11Status)}</DCArtboard>
      </DCSection>

      <DCSection id="session" title="04 · セッション" subtitle="Chat-based session + post-session record">
        <DCArtboard id="session-room" label="A-12 · Session Room" width={w} height={h}>{wrap(A12Session)}</DCArtboard>
        <DCArtboard id="record" label="A-13 · Session Record" width={w} height={h}>{wrap(A13Record)}</DCArtboard>
        <DCArtboard id="tracker" label="A-14 · Action Tracker ★" width={w} height={h}>{wrap(A14Tracker)}</DCArtboard>
      </DCSection>

      <DCSection id="utility" title="05 · ユーティリティ" subtitle="Messages / Payments / Notifications / My Page">
        <DCArtboard id="messages" label="A-15 · Messages" width={w} height={h}>{wrap(A15Messages)}</DCArtboard>
        <DCArtboard id="payments" label="A-16 · Payment History" width={w} height={h}>{wrap(A16Payments)}</DCArtboard>
        <DCArtboard id="notifications" label="A-17 · Notifications" width={w} height={h}>{wrap(A17Notifications)}</DCArtboard>
        <DCArtboard id="mypage" label="A-18 · My Page" width={w} height={h}>{wrap(A18MyPage)}</DCArtboard>
      </DCSection>
    </DesignCanvas>
  );
}

function CleanApp() {
  const [tweaks, setTweak] = useTweaks(CLEAN_TWEAK_DEFAULTS);
  useEffectClean(() => { applyCleanTweaks(tweaks); }, [tweaks]);
  // Lock page scroll in prototype mode so the screen behaves like a native app;
  // release it in canvas mode where the design canvas needs to pan/scroll.
  useEffectClean(() => {
    const root = document.documentElement;
    if (tweaks.view === 'prototype') root.classList.add('ac-proto-lock');
    else root.classList.remove('ac-proto-lock');
    return () => root.classList.remove('ac-proto-lock');
  }, [tweaks.view]);

  return (
    <NavProvider initial="splash">
      {tweaks.view === 'prototype' ? <CleanPrototypeMode/> : <CleanCanvasMode/>}

      <TweaksPanel title="Tweaks">
        <TweakSection title="View">
          <TweakRadio value={tweaks.view} onChange={v => setTweak('view', v)}
            options={[
              { value: 'prototype', label: 'Prototype' },
              { value: 'canvas', label: 'All screens' },
            ]}/>
        </TweakSection>
        <TweakSection title="Quick jump">
          <QuickJumpClean/>
        </TweakSection>
        <TweakSection title="Color">
          <TweakColor label="Primary ink" value={tweaks.primaryInk} onChange={v => setTweak('primaryInk', v)}/>
          <TweakColor label="Accent gold" value={tweaks.accentGold} onChange={v => setTweak('accentGold', v)}/>
          <TweakColor label="Paper bg" value={tweaks.paperBg} onChange={v => setTweak('paperBg', v)}/>
        </TweakSection>
        <TweakSection title="Density">
          <TweakRadio value={tweaks.density} onChange={v => setTweak('density', v)}
            options={[
              { value: 'compact', label: 'Compact' },
              { value: 'comfortable', label: 'Comfort' },
              { value: 'spacious', label: 'Spacious' },
            ]}/>
        </TweakSection>
        <TweakSection title="Celestial motifs">
          <TweakRadio value={tweaks.motifIntensity} onChange={v => setTweak('motifIntensity', v)}
            options={[
              { value: 'none', label: 'Off' },
              { value: 'subtle', label: 'Subtle' },
              { value: 'moderate', label: 'Moderate' },
            ]}/>
        </TweakSection>
      </TweaksPanel>
    </NavProvider>
  );
}

function QuickJumpClean() {
  const nav = useNav();
  if (!nav) return null;
  const targets = [
    { id: 'splash', label: 'Splash' },
    { id: 'login', label: 'Login' },
    { id: 'hearing', label: 'Hearing' },
    { id: 'home', label: 'Home' },
    { id: 'browse', label: 'Browse' },
    { id: 'session', label: 'Session' },
    { id: 'tracker', label: 'Tracker' },
    { id: 'mypage', label: 'My Page' },
  ];
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 6 }}>
      {targets.map(t => (
        <button key={t.id} onClick={() => nav.tab(t.id)} style={{
          padding: '8px 10px', borderRadius: 8, border: '1px solid #E8E5DD',
          background: nav.current === t.id ? '#F4EAD0' : '#fff',
          color: nav.current === t.id ? '#9A7E2C' : '#2D2B55',
          fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit',
          textAlign: 'left',
        }}>{t.label}</button>
      ))}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<CleanApp/>);