// App shell — top nav, route switching, footer, tweaks panel

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "trust",
  "primary": "#2563eb",
  "density": "regular",
  "radius": "default",
  "fontHeadline": "pretendard"
}/*EDITMODE-END*/;

const THEME_NAMES = { trust: "Trust (기본)", soft: "Soft (Ivory)", bold: "Bold (Dark)" };
const FONT_STACKS = {
  pretendard: '"Pretendard", "Pretendard Variable", -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", sans-serif',
  serif: '"Source Serif Pro", "Noto Serif KR", "Iowan Old Style", Georgia, serif',
  display: '"Inter Display", "Inter", "Pretendard", sans-serif',
};
const RADIUS_MAP = {
  default: { sm: "8px", md: "12px", lg: "18px" },
  square: { sm: "4px", md: "6px", lg: "8px" },
  round:  { sm: "12px", md: "18px", lg: "28px" },
};

function Nav({ route, navigate, t }) {
  const [user, setUser] = React.useState(null);
  const [authReady, setAuthReady] = React.useState(false);

  React.useEffect(() => {
    let unsub = null;
    let cancelled = false;
    const start = () => {
      if (cancelled) return;
      if (!window.firebaseAuth || !window.firebaseOnAuthStateChanged) {
        setTimeout(start, 50);
        return;
      }
      unsub = window.firebaseOnAuthStateChanged(window.firebaseAuth, (u) => {
        setUser(u);
        setAuthReady(true);
      });
    };
    start();
    return () => { cancelled = true; if (unsub) unsub(); };
  }, []);

  const handleLogout = async () => {
    try {
      await window.firebaseSignOut(window.firebaseAuth);
    } catch (e) {
      console.error('logout failed', e);
    }
  };

  return (
    <header className="nav">
      <div className="nav-inner">
        <a className="logo" href="#" onClick={e => { e.preventDefault(); navigate('home'); }}>
          <img src="/solveit_logo.svg" alt="솔브잇" style={{ height: 22, width: "auto", display: "block" }}/>
        </a>
        <nav className="nav-links">
          <a href="#" className={`nav-link ${route === 'home' ? 'active' : ''}`}
             onClick={e => { e.preventDefault(); navigate('home'); }}>홈</a>
          <a href="#" className={`nav-link ${route === 'track' ? 'active' : ''}`}
             onClick={e => { e.preventDefault(); navigate('track'); }}>택배 조회</a>
          <a href="#" className={`nav-link ${route === 'reserve' || route === 'reserve-home' || route === 'reserve-store' ? 'active' : ''}`}
             onClick={e => { e.preventDefault(); navigate('reserve'); }}>택배 예약</a>
          <a href="#" className={`nav-link ${route === 'my' ? 'active' : ''}`}
             onClick={e => { e.preventDefault(); navigate('my'); }}>예약 내역</a>
          <a href="#" className={`nav-link ${route === 'pricing' ? 'active' : ''}`}
             onClick={e => { e.preventDefault(); navigate('pricing'); }}>요금 안내</a>
          <a href="#" className={`nav-link ${route === 'support' ? 'active' : ''}`}
             onClick={e => { e.preventDefault(); navigate('support'); }}>고객센터</a>
        </nav>
        <div className="nav-spacer"></div>
        <div className="nav-cta">
          {authReady && (user
            ? <button className="btn btn-primary btn-sm" onClick={handleLogout}>로그아웃</button>
            : <button className="btn btn-primary btn-sm" onClick={() => navigate('login')}>로그인</button>
          )}
        </div>
      </div>
    </header>
  );
}

function Footer({ t }) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-inner">
          <div className="footer-col">
            <div className="logo" style={{ marginBottom: 12 }}>
              <img src="/solveit_logo.svg" alt="솔브잇" style={{ height: 20, width: "auto", display: "block" }}/>
            </div>
            <p style={{ color: "var(--muted)", fontSize: 13, lineHeight: 1.6, margin: 0, maxWidth: 320 }}>
              택배 서비스를 가장 단순하게.<br/>
              조회와 예약을 한 곳에서 끝내는 솔브잇.
            </p>
          </div>
          <div className="footer-col">
            <h4>서비스</h4>
            <a href="#" onClick={e => { e.preventDefault(); window.__navigate?.('track'); }}>택배 조회</a>
            <a href="#" onClick={e => { e.preventDefault(); window.__navigate?.('reserve'); }}>택배 예약</a>
            <a href="#" onClick={e => { e.preventDefault(); window.__navigate?.('pricing'); }}>요금 안내</a>
            <a href="/refund.html">환불 정책</a>
          </div>
          <div className="footer-col">
            <h4>회사</h4>
            <a href="#" onClick={e => { e.preventDefault(); window.__navigate?.('about'); }}>소개</a>
            <a href="#" onClick={e => { e.preventDefault(); window.__navigate?.('notices'); }}>공지사항</a>
            <a href="#" onClick={e => { e.preventDefault(); window.__navigate?.('partnership'); }}>제휴 문의</a>
            <a href="mailto:jungjae0213@naver.com">이메일 문의</a>
          </div>
          <div className="footer-col">
            <h4>도움말</h4>
            <a href="#" onClick={e => { e.preventDefault(); window.__navigate?.('support'); }}>자주 묻는 질문</a>
            <a href="#" onClick={e => { e.preventDefault(); window.__navigate?.('chat'); }}>1:1 채팅 문의</a>
            <a href="#" onClick={e => { e.preventDefault(); window.__navigate?.('support'); }}>분실·파손 신청</a>
            <a href="#" onClick={e => { e.preventDefault(); window.__navigate?.('support'); }}>고객센터</a>
          </div>
        </div>
        <div className="footer-meta">
          <span>© 2026 솔브잇 · 대표 현정재 · 사업자등록번호 419-53-00928 · 경기도 시흥시 매화로 145</span>
          <span>
            <a href="#" onClick={e => { e.preventDefault(); window.__navigate?.('terms'); }}
               style={{ color: "inherit" }}>이용약관</a>
            {" · "}
            <a href="#" onClick={e => { e.preventDefault(); window.__navigate?.('privacy'); }}
               style={{ color: "inherit" }}>개인정보처리방침</a>
          </span>
        </div>
      </div>
    </footer>
  );
}

// ─────────── Tweaks panel ───────────
function TweaksUI({ t, setTweak }) {
  return (
    <TweaksPanel>
      <TweakSection label="비주얼 방향" />
      <TweakSelect
        label="테마"
        value={t.theme}
        options={[
          { value: "trust", label: "Trust — 신뢰감 (기본)" },
          { value: "soft", label: "Soft — 따뜻한 아이보리" },
          { value: "bold", label: "Bold — 다크 모드" },
        ]}
        onChange={(v) => setTweak('theme', v)}
      />
      <TweakColor
        label="브랜드 컬러"
        value={t.primary}
        options={["#2563eb", "#0ea5e9", "#4f46e5", "#0f766e", "#dc2626", "#ea580c"]}
        onChange={(v) => setTweak('primary', v)}
      />

      <TweakSection label="레이아웃" />
      <TweakRadio
        label="여백"
        value={t.density}
        options={["compact", "regular", "comfy"]}
        onChange={(v) => setTweak('density', v)}
      />
      <TweakRadio
        label="모서리"
        value={t.radius}
        options={["square", "default", "round"]}
        onChange={(v) => setTweak('radius', v)}
      />

      <TweakSection label="타이포그래피" />
      <TweakSelect
        label="헤드라인 글꼴"
        value={t.fontHeadline}
        options={[
          { value: "pretendard", label: "Pretendard (산세리프)" },
          { value: "serif", label: "Source Serif (세리프)" },
          { value: "display", label: "Inter Display" },
        ]}
        onChange={(v) => setTweak('fontHeadline', v)}
      />
    </TweaksPanel>
  );
}

// ─────────── App ───────────
const PATH_TO_ROUTE = {
  '/track': 'track',
  '/reserve': 'reserve',
  '/pricing': 'pricing',
  '/support': 'support',
  '/chat': 'chat',
  '/about': 'about',
  '/notices': 'notices',
  '/partnership': 'partnership',
  '/terms': 'terms',
  '/privacy': 'privacy',
  '/my': 'my',
  '/addresses': 'addresses',
  '/reserve-home': 'reserve-home',
  '/reserve-store': 'reserve-store',
};
const ROUTE_TO_PATH = Object.fromEntries(
  Object.entries(PATH_TO_ROUTE).map(([k, v]) => [v, k])
);

function getInitialRoute() {
  const p = window.location.pathname.replace(/\/$/, '');
  return PATH_TO_ROUTE[p] || 'track';
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = React.useState(getInitialRoute());
  const [trackingId, setTrackingId] = React.useState(null);

  const navigate = (r) => {
    if (r === 'home') { window.location.href = '/'; return; }
    if (r === 'login') { window.location.href = '/login'; return; }
    setRoute(r);
    const path = ROUTE_TO_PATH[r];
    if (path) window.history.pushState({}, '', path);
    window.scrollTo({ top: 0, behavior: 'instant' });
  };

  React.useEffect(() => {
    window.__navigate = navigate;
    const onPop = () => setRoute(getInitialRoute());
    window.addEventListener('popstate', onPop);
    return () => window.removeEventListener('popstate', onPop);
  }, []);

  const goTrack = (id) => {
    setTrackingId(id);
    navigate('track');
  };

  // Apply theme + primary color via inline CSS variables
  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--primary', t.primary);
    // derive matching 50/100/600 from primary
    root.style.setProperty('--primary-600', mixHex(t.primary, "#000000", 0.12));
    root.style.setProperty('--primary-50', mixHex(t.primary, "#ffffff", 0.92));
    root.style.setProperty('--primary-100', mixHex(t.primary, "#ffffff", 0.82));
    const r = RADIUS_MAP[t.radius] || RADIUS_MAP.default;
    root.style.setProperty('--radius-sm', r.sm);
    root.style.setProperty('--radius', r.md);
    root.style.setProperty('--radius-lg', r.lg);
  }, [t.primary, t.radius]);

  return (
    <div
      className="app"
      data-theme={t.theme === "trust" ? "" : t.theme}
      data-density={t.density}
      style={{
        '--font-sans': FONT_STACKS[t.fontHeadline]
      }}
    >
      <style>{`
        h1, h2, h3, .logo, .reserve-step-head h3, .page-head h1, .done-card h3 {
          font-family: ${FONT_STACKS[t.fontHeadline]};
        }
      `}</style>

      <Nav route={route} navigate={navigate} t={t} />

      <div data-screen-label={routeLabel(route)}>
        {route === 'home' && <Landing navigate={navigate} onTrack={goTrack} />}
        {route === 'track' && <Tracking trackingId={trackingId} navigate={navigate} />}
        {route === 'reserve' && <ReserveMethodPicker navigate={navigate} />}
        {route === 'reserve-home' && <Reservation navigate={navigate} method="home" />}
        {route === 'reserve-store' && <Reservation navigate={navigate} method="store" />}
        {route === 'pricing' && <Pricing navigate={navigate} />}
        {route === 'support' && <Support navigate={navigate} />}
        {route === 'chat' && <Chat navigate={navigate} />}
        {route === 'about' && <About navigate={navigate} />}
        {route === 'notices' && <Notices navigate={navigate} />}
        {route === 'partnership' && <Partnership navigate={navigate} />}
        {route === 'terms' && <Terms navigate={navigate} />}
        {route === 'privacy' && <Privacy navigate={navigate} />}
        {route === 'login' && <Login navigate={navigate} />}
        {route === 'my' && <MyReservations navigate={navigate} />}
        {route === 'addresses' && <AddressBook navigate={navigate} />}
      </div>

      {route !== 'login' && route !== 'chat' && <Footer t={t} />}
    </div>
  );
}

function routeLabel(r) {
  if (r === 'home') return '01 Landing';
  if (r === 'track') return '02 Tracking';
  if (r === 'reserve') return '03 Reservation (method pick)';
  if (r === 'reserve-home') return '03a Reservation — 방문';
  if (r === 'reserve-store') return '03b Reservation — 편의점';
  if (r === 'pricing') return '04 Pricing';
  if (r === 'support') return '05 Support';
  if (r === 'chat') return '06 Chat';
  if (r === 'about') return '07 About';
  if (r === 'notices') return '08 Notices';
  if (r === 'partnership') return '09 Partnership';
  if (r === 'terms') return '10 Terms';
  if (r === 'privacy') return '11 Privacy';
  if (r === 'login') return '12 Login';
  if (r === 'my') return '13 My Reservations';
  if (r === 'addresses') return '14 Addresses';
  return r;
}

// Mix two hex colors: ratio 0 → c1, ratio 1 → c2
function mixHex(c1, c2, ratio) {
  const a = hexToRgb(c1), b = hexToRgb(c2);
  if (!a || !b) return c1;
  const m = (k) => Math.round(a[k] + (b[k] - a[k]) * ratio);
  return `rgb(${m('r')}, ${m('g')}, ${m('b')})`;
}
function hexToRgb(h) {
  const m = /^#?([0-9a-f]{6})$/i.exec(h);
  if (!m) return null;
  const i = parseInt(m[1], 16);
  return { r: (i >> 16) & 255, g: (i >> 8) & 255, b: i & 255 };
}

window.App = App;