// App — Full-screen mobile web app (no iOS device frame)
// Light Dreamcore with screen transitions

function App() {
  const [tab, setTab] = React.useState('home');
  const [prevTab, setPrevTab] = React.useState('home');
  const [openItem, setOpenItem] = React.useState(null);

  const handleTabChange = (newTab) => {
    if (newTab === tab) return;
    setPrevTab(tab);
    setTab(newTab);
  };

  const handleOpenItem = (it) => {
    setOpenItem(it);
  };

  return (
    <GalleryProvider>
      <div data-app style={{
        position: 'fixed', inset: 0,
        display: 'flex', flexDirection: 'column',
        background: 'linear-gradient(180deg, #F5F6F8 0%, #F2F0F5 100%)',
        color: '#1C1C1E',
        overflow: 'hidden',
      }}>
        {/* ambient color wash */}
        <div style={{
          position: 'absolute', inset: 0, opacity: 0.55, pointerEvents: 'none',
          backgroundImage: `
            radial-gradient(60% 40% at 20% 0%, oklch(0.92 0.05 350 / 0.6) 0%, transparent 70%),
            radial-gradient(70% 50% at 100% 100%, oklch(0.92 0.05 230 / 0.5) 0%, transparent 70%)
          `,
        }} />

        {/* Safe area top spacer */}
        <div style={{ height: 'env(safe-area-inset-top, 20px)', flexShrink: 0, background: 'linear-gradient(180deg, #F5F6F8 0%, transparent 100%)' }} />

        {/* Content area */}
        <div style={{ flex: 1, position: 'relative', overflow: 'hidden' }}>
          <TabContent tab={tab} prevTab={prevTab} onOpenItem={handleOpenItem} />
          <DetailOverlay item={openItem} onBack={() => setOpenItem(null)} />
        </div>

        {/* Tab bar */}
        {!openItem && <TabBar tab={tab} setTab={handleTabChange} />}
      </div>
    </GalleryProvider>
  );
}

// Tab content — cross-fade between tabs
function TabContent({ tab, prevTab, onOpenItem }) {
  const tabs = ['home', 'upload', 'me'];
  return (
    <>
      {tabs.map(t => {
        const active = tab === t;
        return (
          <div
            key={t}
            style={{
              position: 'absolute', inset: 0,
              overflowY: active ? 'auto' : 'hidden',
              scrollbarWidth: 'none',
              WebkitOverflowScrolling: 'touch',
              opacity: active ? 1 : 0,
              transform: active ? 'translateY(0) scale(1)' : 'translateY(8px) scale(0.995)',
              pointerEvents: active ? 'auto' : 'none',
              transition: 'opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1), transform 0.32s cubic-bezier(0.22, 1, 0.36, 1)',
            }}
          >
            {t === 'home' && <HomeScreen onOpenItem={onOpenItem} />}
            {t === 'upload' && <UploadScreen />}
            {t === 'me' && <MeScreen />}
          </div>
        );
      })}
    </>
  );
}

// Detail overlay — slides up from bottom
function DetailOverlay({ item, onBack }) {
  const [mounted, setMounted] = React.useState(false);
  const [visible, setVisible] = React.useState(false);
  const [activeItem, setActiveItem] = React.useState(null);

  React.useEffect(() => {
    if (item) {
      setActiveItem(item);
      setMounted(true);
      requestAnimationFrame(() => requestAnimationFrame(() => setVisible(true)));
    } else if (mounted) {
      setVisible(false);
      const t = setTimeout(() => {
        setMounted(false);
        setActiveItem(null);
      }, 360);
      return () => clearTimeout(t);
    }
  }, [item]);

  if (!mounted || !activeItem) return null;

  return (
    <div style={{
      position: 'absolute', inset: 0, zIndex: 20,
      pointerEvents: visible ? 'auto' : 'none',
    }}>
      {/* backdrop */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'rgba(28,28,30,0.08)',
        opacity: visible ? 1 : 0,
        transition: 'opacity 0.28s ease',
      }} onClick={onBack} />
      {/* panel */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, #F8F9FB 0%, #F2F0F5 100%)',
        overflow: 'auto',
        scrollbarWidth: 'none',
        WebkitOverflowScrolling: 'touch',
        transform: visible ? 'translateY(0)' : 'translateY(100%)',
        opacity: visible ? 1 : 0,
        transition: 'transform 0.36s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s cubic-bezier(0.22, 1, 0.36, 1)',
        boxShadow: '0 -20px 60px -10px rgba(28,28,30,0.15)',
      }}>
        <DetailScreen item={activeItem} onBack={onBack} />
      </div>
    </div>
  );
}

// Tab bar
function TabBar({ tab, setTab }) {
  const tabs = [
    { key: 'home',   icon: 'grid' },
    { key: 'upload', icon: 'plus' },
    { key: 'me',     icon: 'person' },
  ];

  return (
    <div style={{
      position: 'absolute', bottom: 0, left: 0, right: 0,
      padding: '14px 22px calc(14px + env(safe-area-inset-bottom, 16px))',
      pointerEvents: 'none',
      zIndex: 30,
    }}>
      <div style={{
        display: 'flex', justifyContent: 'space-around', alignItems: 'center',
        padding: '8px 10px', borderRadius: 32,
        background: 'rgba(255,255,255,0.78)',
        backdropFilter: 'blur(24px) saturate(180%)',
        WebkitBackdropFilter: 'blur(24px) saturate(180%)',
        boxShadow: '0 1px 2px rgba(60,60,67,0.05), 0 12px 32px -10px rgba(60,60,67,0.15), inset 0 0.5px 0 rgba(255,255,255,0.9)',
        pointerEvents: 'auto',
      }}>
        {tabs.map(t => {
          const active = tab === t.key;
          return (
            <div key={t.key} onClick={() => setTab(t.key)} style={{
              flex: 1, display: 'flex', flexDirection: 'column',
              alignItems: 'center', cursor: 'pointer',
              padding: '10px 0',
            }}>
              <TabIcon kind={t.icon} active={active} />
            </div>
          );
        })}
      </div>
    </div>
  );
}

function TabIcon({ kind, active }) {
  const c = active ? '#1C1C1E' : 'rgba(60,60,67,0.55)';
  const w = active ? 2 : 1.8;
  if (kind === 'plus') {
    return (
      <svg width="28" height="28" viewBox="0 0 28 28" fill="none" style={{ transition: 'all 0.2s ease' }}>
        <line x1="14" y1="5" x2="14" y2="23" stroke={c} strokeWidth={active ? 2.4 : 2} strokeLinecap="round"/>
        <line x1="5" y1="14" x2="23" y2="14" stroke={c} strokeWidth={active ? 2.4 : 2} strokeLinecap="round"/>
      </svg>
    );
  }
  if (kind === 'grid') {
    if (active) {
      return (
        <svg width="26" height="26" viewBox="0 0 22 22" fill="none" style={{ transition: 'all 0.2s ease' }}>
          <rect x="2" y="2" width="8" height="8" rx="2" fill={c}/>
          <rect x="12" y="2" width="8" height="8" rx="2" fill={c}/>
          <rect x="2" y="12" width="8" height="8" rx="2" fill={c}/>
          <rect x="12" y="12" width="8" height="8" rx="2" fill={c}/>
        </svg>
      );
    }
    return (
      <svg width="26" height="26" viewBox="0 0 22 22" fill="none" style={{ transition: 'all 0.2s ease' }}>
        <rect x="2" y="2" width="8" height="8" rx="2" stroke={c} strokeWidth={w}/>
        <rect x="12" y="2" width="8" height="8" rx="2" stroke={c} strokeWidth={w} opacity="0.75"/>
        <rect x="2" y="12" width="8" height="8" rx="2" stroke={c} strokeWidth={w} opacity="0.75"/>
        <rect x="12" y="12" width="8" height="8" rx="2" stroke={c} strokeWidth={w}/>
      </svg>
    );
  }
  // person
  if (active) {
    return (
      <svg width="26" height="26" viewBox="0 0 22 22" fill="none">
        <circle cx="11" cy="7" r="3.8" fill={c}/>
        <path d="M3 20.5c1-4.5 4-6.5 8-6.5s7 2 8 6.5z" fill={c}/>
      </svg>
    );
  }
  return (
    <svg width="26" height="26" viewBox="0 0 22 22" fill="none">
      <circle cx="11" cy="7" r="3.5" stroke={c} strokeWidth={w}/>
      <path d="M3 20c1-4 4-6 8-6s7 2 8 6" stroke={c} strokeWidth={w} strokeLinecap="round"/>
    </svg>
  );
}

Object.assign(window, { App });