// pg-app.jsx — App shell, Toast, Animated BG, Login modal — Coral/Purple Glassmorphism

const { useState: useAppSt, useRef: useAppRef, useEffect: useAppEf, useCallback: useAppCb } = React;

/* ─── TOAST ─── */
function ToastNotification({ message, visible }) {
  return (
    <div style={{
      position: 'fixed', top: 24, left: '50%',
      transform: `translateX(-50%) translateY(${visible ? 0 : -100}px)`,
      zIndex: 9999, opacity: visible ? 1 : 0,
      transition: 'all 0.35s cubic-bezier(0.4,0,0.2,1)',
      pointerEvents: 'none',
    }}>
      <div style={{
        padding: '12px 24px', borderRadius: 16,
        background: 'rgba(255,255,255,0.88)',
        backdropFilter: 'blur(24px)', WebkitBackdropFilter: 'blur(24px)',
        border: '1px solid var(--glass-border)',
        boxShadow: '0 8px 32px rgba(255,94,58,0.12)',
        fontFamily: "'Plus Jakarta Sans', sans-serif",
        fontSize: 14, fontWeight: 600, color: 'var(--text-primary)',
        whiteSpace: 'nowrap',
        display: 'flex', alignItems: 'center', gap: 8,
      }}>
        <MI name="check_circle" sz={20} color="#059669" />
        {message}
      </div>
    </div>
  );
}


/* ─── ANIMATED BACKGROUND ─── */
function AnimatedBackground() {
  const orbs = [
    { w: 420, h: 420, x: '8%', y: '5%', color: 'rgba(255,94,58,0.08)', anim: 'orbDrift1', dur: '28s' },
    { w: 350, h: 350, x: '75%', y: '12%', color: 'rgba(167,139,250,0.07)', anim: 'orbDrift2', dur: '32s' },
    { w: 300, h: 300, x: '50%', y: '50%', color: 'rgba(56,189,248,0.06)', anim: 'orbDrift3', dur: '26s' },
    { w: 280, h: 280, x: '20%', y: '70%', color: 'rgba(255,94,58,0.05)', anim: 'orbDrift2', dur: '30s' },
    { w: 340, h: 340, x: '85%', y: '65%', color: 'rgba(167,139,250,0.05)', anim: 'orbDrift1', dur: '34s' },
  ];

  const lines = [
    { left: '10%', height: '130%', delay: '0s', dur: '20s' },
    { left: '25%', height: '120%', delay: '5s', dur: '24s' },
    { left: '42%', height: '110%', delay: '2s', dur: '22s' },
    { left: '58%', height: '125%', delay: '7s', dur: '26s' },
    { left: '75%', height: '115%', delay: '3s', dur: '21s' },
    { left: '90%', height: '120%', delay: '6s', dur: '23s' },
  ];

  const shapes = [
    { icon: 'auto_awesome', x: '15%', y: '18%', sz: 24, dur: '30s', anim: 'shapeWander' },
    { icon: 'psychology', x: '80%', y: '22%', sz: 22, dur: '35s', anim: 'shapeWander2' },
    { icon: 'hub', x: '45%', y: '35%', sz: 18, dur: '28s', anim: 'shapeWander' },
    { icon: 'neurology', x: '68%', y: '55%', sz: 20, dur: '32s', anim: 'shapeWander2' },
    { icon: 'code', x: '22%', y: '60%', sz: 22, dur: '27s', anim: 'shapeWander' },
    { icon: 'smart_toy', x: '55%', y: '75%', sz: 20, dur: '33s', anim: 'shapeWander2' },
    { icon: 'lightbulb', x: '88%', y: '42%', sz: 18, dur: '29s', anim: 'shapeWander' },
    { icon: 'bolt', x: '12%', y: '82%', sz: 22, dur: '31s', anim: 'shapeWander2' },
    { icon: 'workspace_premium', x: '72%', y: '85%', sz: 16, dur: '26s', anim: 'shapeWander' },
  ];

  return (
    <div className="bg-grid">
      <div className="dots" />
      {orbs.map((o, i) => (
        <div key={`o${i}`} className="orb" style={{
          left: o.x, top: o.y, width: o.w, height: o.h,
          background: o.color,
          animation: `${o.anim} ${o.dur} ease-in-out infinite`,
        }} />
      ))}
      {lines.map((l, i) => (
        <div key={`l${i}`} className="line" style={{
          left: l.left, height: l.height, top: '-15%',
          animationDuration: l.dur, animationDelay: l.delay,
        }} />
      ))}
      {shapes.map((s, i) => (
        <div key={`s${i}`} className="shape" style={{
          left: s.x, top: s.y,
          animation: `${s.anim} ${s.dur} ease-in-out infinite`,
        }}>
          <MI name={s.icon} sz={s.sz} color="var(--coral)" />
        </div>
      ))}
    </div>
  );
}


/* ─── LOGIN MODAL ─── */
function LoginModal({ open, onClose }) {
  if (!open) return null;

  return (
    <div style={{
      position: 'fixed', inset: 0, zIndex: 200,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: 24,
    }} onClick={onClose}>
      <div style={{
        position: 'absolute', inset: 0,
        background: 'rgba(26,26,46,0.35)',
        backdropFilter: 'blur(10px)',
      }} />
      <div style={{
        position: 'relative', width: '100%', maxWidth: 400,
        background: 'rgba(255,255,255,0.88)',
        backdropFilter: 'blur(28px)',
        borderRadius: 28, padding: 36,
        border: '1px solid var(--glass-border)',
        boxShadow: '0 24px 64px rgba(0,0,0,0.12)',
      }} onClick={e => e.stopPropagation()}>
        <button onClick={onClose} style={{
          position: 'absolute', top: 16, right: 16,
          background: 'none', border: 'none', cursor: 'pointer', padding: 4,
        }}>
          <MI name="close" sz={22} color="var(--text-muted)" />
        </button>

        <div style={{ textAlign: 'center', marginBottom: 28 }}>
          <div style={{
            width: 60, height: 60, borderRadius: 18, margin: '0 auto 16px',
            background: 'var(--gradient-soft)',
            border: '1px solid rgba(255,94,58,0.1)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <MI name="person" sz={30} color="var(--coral)" />
          </div>
          <h3 style={{
            fontFamily: "'Plus Jakarta Sans', sans-serif",
            fontSize: 22, fontWeight: 800, color: 'var(--text-primary)',
            margin: '0 0 6px',
          }}>Kirish</h3>
          <p style={{
            fontFamily: "'Plus Jakarta Sans', sans-serif",
            fontSize: 13.5, color: 'var(--text-secondary)', margin: 0,
          }}>Hisobingizga kiring yoki ro'yxatdan o'ting</p>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          <button style={{
            padding: '13px 20px', borderRadius: 14,
            border: '1px solid rgba(0,0,0,0.07)',
            background: '#fff', cursor: 'pointer',
            fontFamily: "'Plus Jakarta Sans', sans-serif",
            fontSize: 14, fontWeight: 600, color: 'var(--text-primary)',
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
            transition: 'all 0.2s',
          }}
            onMouseOver={e => e.currentTarget.style.background = '#f8fafc'}
            onMouseOut={e => e.currentTarget.style.background = '#fff'}>
            <svg width="18" height="18" viewBox="0 0 24 24">
              <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" />
              <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" />
              <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" />
              <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" />
            </svg>
            Google bilan kirish
          </button>
          <button style={{
            padding: '13px 20px', borderRadius: 14, border: 'none',
            background: '#0088cc', cursor: 'pointer',
            fontFamily: "'Plus Jakarta Sans', sans-serif",
            fontSize: 14, fontWeight: 600, color: '#fff',
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
            transition: 'all 0.2s',
          }}
            onMouseOver={e => e.currentTarget.style.opacity = '0.9'}
            onMouseOut={e => e.currentTarget.style.opacity = '1'}>
            <MI name="send" sz={18} color="#fff" />
            Telegram bilan kirish
          </button>
        </div>

        <p style={{
          fontFamily: "'Plus Jakarta Sans', sans-serif",
          fontSize: 11.5, color: 'var(--text-muted)', textAlign: 'center',
          marginTop: 20, lineHeight: 1.6,
        }}>
          Kirish orqali siz <a href="#" style={{ color: 'var(--coral)', textDecoration: 'none' }}>foydalanish shartlari</a>ga rozilik bildirasiz
        </p>
      </div>
    </div>
  );
}


/* ─── MAIN APP ─── */
function App() {
  const [activeModel, setActiveModel] = useAppSt('all');
  const [activeCategory, setActiveCategory] = useAppSt('all');
  const [toast, setToast] = useAppSt({ message: '', visible: false });
  const [darkMode, setDarkMode] = useAppSt(() => {
    try { return localStorage.getItem('pg-dark') === '1'; } catch { return false; }
  });
  const [loginOpen, setLoginOpen] = useAppSt(false);
  const formRef = useAppRef(null);
  const toastTimer = useAppRef(null);

  // Dark mode effect
  useAppEf(() => {
    document.documentElement.setAttribute('data-theme', darkMode ? 'dark' : 'light');
    document.body.style.background = darkMode ? '#0f0f1e' : '#FAFBFE';
    document.body.style.color = darkMode ? '#f0f0f8' : '#1a1a2e';
    try { localStorage.setItem('pg-dark', darkMode ? '1' : '0'); } catch {}
  }, [darkMode]);

  useAppEf(() => {
    window.__showToast = (msg) => {
      if (toastTimer.current) clearTimeout(toastTimer.current);
      setToast({ message: msg, visible: true });
      toastTimer.current = setTimeout(() => setToast(t => ({ ...t, visible: false })), 2200);
    };
  }, []);

  const scrollToForm = useAppCb(() => {
    if (formRef.current) {
      const y = formRef.current.getBoundingClientRect().top + window.scrollY - 80;
      window.scrollTo({ top: y, behavior: 'smooth' });
    }
  }, []);

  const filtered = PROMPTS.filter(p => {
    if (activeModel !== 'all' && p.modelId !== activeModel) return false;
    if (activeCategory !== 'all' && p.categoryId !== activeCategory) return false;
    return true;
  });

  return (
    <React.Fragment>
      <AnimatedBackground />
      <div style={{ position: 'relative', zIndex: 1, minHeight: '100vh' }}>
        <Navbar onScrollToForm={scrollToForm} onShowLogin={() => setLoginOpen(true)}
          darkMode={darkMode} onToggleDark={() => setDarkMode(d => !d)} />
        <HeroSection darkMode={darkMode} />

        <div style={{ marginBottom: 12 }}>
          <FilterRow label="Model" items={MODELS} activeId={activeModel}
            onSelect={setActiveModel} isModel={true} darkMode={darkMode} />
          <FilterRow label="Soha" items={CATEGORIES} activeId={activeCategory}
            onSelect={setActiveCategory} isModel={false} darkMode={darkMode} />
        </div>

        <GallerySection
          filteredPrompts={filtered}
          onModelSelect={setActiveModel}
          onCategorySelect={setActiveCategory}
          darkMode={darkMode}
        />

        <SubmitPromptForm formRef={formRef} />
        <SEOSection />
        <FAQSection />
        <SiteFooter />
      </div>

      <ToastNotification message={toast.message} visible={toast.visible} />
      <LoginModal open={loginOpen} onClose={() => setLoginOpen(false)} />
    </React.Fragment>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(React.createElement(App));