// pg-ui.jsx — Nav, Logo, Hero, FilterRow, PromptCard — Dark mode aware

const { useState, useRef, useEffect, useCallback } = React;

const MI = ({ name, sz, color, style }) => (
  <span className="material-symbols-outlined" style={{
    fontSize: sz || 20, color: color || 'inherit', lineHeight: 1, ...style,
  }}>{name}</span>
);

/* ─── LOGO ─── */
function PromptLogo() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 0, cursor: 'pointer' }}>
      <span style={{
        fontFamily: "'Plus Jakarta Sans', sans-serif",
        fontSize: 20, fontWeight: 700, color: 'var(--text-primary)',
        letterSpacing: -0.3,
      }}>
        <span style={{ color: '#6366F1' }}>Prompt</span>{' '}
        <span>Gallery</span>
      </span>
    </div>
  );
}

/* ─── NAVBAR ─── */
function Navbar({ onScrollToForm, onShowLogin, darkMode, onToggleDark }) {
  const [mobileOpen, setMobileOpen] = useState(false);

  const navStyle = {
    position: 'sticky', top: 0, zIndex: 100,
    background: 'var(--nav-bg)',
    backdropFilter: 'blur(28px)', WebkitBackdropFilter: 'blur(28px)',
    borderBottom: '1px solid var(--glass-border)',
    boxShadow: '0 1px 20px rgba(0,0,0,0.03)',
  };

  const innerStyle = {
    maxWidth: 1400, margin: '0 auto',
    padding: '0 24px', height: 68,
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
  };

  const pillBtn = (active) => ({
    padding: '8px 20px', borderRadius: 99, border: 'none', cursor: 'pointer',
    fontFamily: "'Plus Jakarta Sans', sans-serif", fontSize: 14, fontWeight: 600,
    transition: 'all 0.25s ease',
    background: active ? 'var(--gradient-main)' : 'transparent',
    color: active ? '#fff' : 'var(--text-secondary)',
  });

  const addBtnStyle = {
    display: 'flex', alignItems: 'center', gap: 6,
    padding: '9px 20px', borderRadius: 99, border: 'none', cursor: 'pointer',
    background: 'var(--gradient-main)',
    color: '#fff', fontFamily: "'Plus Jakarta Sans', sans-serif",
    fontSize: 13, fontWeight: 600, transition: 'all 0.25s',
    boxShadow: '0 4px 16px rgba(99,102,241,0.3)',
  };

  const iconBtnStyle = {
    width: 38, height: 38, borderRadius: 12,
    border: '1px solid var(--glass-border)',
    background: 'var(--glass-bg)', cursor: 'pointer',
    backdropFilter: 'blur(8px)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    transition: 'all 0.25s', color: 'var(--text-secondary)',
  };

  return (
    <nav style={navStyle}>
      <div style={innerStyle}>
        <PromptLogo />

        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }} className="nav-desktop">
          <button style={pillBtn(true)}>Bosh sahifa</button>
          <button style={pillBtn(false)}>Prompt School</button>
          <button style={pillBtn(false)}>Blog</button>
        </div>

        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }} className="nav-actions">
          <button style={addBtnStyle} onClick={onScrollToForm}
            onMouseOver={e => e.currentTarget.style.transform = 'translateY(-2px)'}
            onMouseOut={e => e.currentTarget.style.transform = 'none'}>
            <MI name="add" sz={18} />
            Prompt qo'shish
          </button>

          <button style={iconBtnStyle} title="Dark mode" onClick={onToggleDark}>
            <MI name={darkMode ? 'light_mode' : 'dark_mode'} sz={20} />
          </button>

          <button style={{
            ...iconBtnStyle, gap: 6, width: 'auto', padding: '0 14px 0 10px',
            fontSize: 13, fontWeight: 600, fontFamily: "'Plus Jakarta Sans', sans-serif",
          }} onClick={onShowLogin}>
            <MI name="person" sz={20} />
            Kirish
          </button>
        </div>

        <button className="nav-hamburger" style={{
          display: 'none', background: 'none', border: 'none',
          cursor: 'pointer', padding: 8,
        }} onClick={() => setMobileOpen(!mobileOpen)}>
          <MI name={mobileOpen ? 'close' : 'menu'} sz={26} color="var(--text-primary)" />
        </button>
      </div>

      {mobileOpen && (
        <div style={{
          padding: '12px 24px 20px', display: 'flex', flexDirection: 'column', gap: 8,
          background: 'var(--nav-bg)', backdropFilter: 'blur(20px)',
          borderBottom: '1px solid var(--glass-border)',
        }} className="nav-mobile-menu">
          <button style={{ ...pillBtn(true), textAlign: 'left' }}>Bosh sahifa</button>
          <button style={{ ...pillBtn(false), textAlign: 'left' }}>Prompt School</button>
          <button style={{ ...pillBtn(false), textAlign: 'left' }}>Blog</button>
          <hr style={{ border: 'none', borderTop: '1px solid var(--glass-border)', margin: '4px 0' }} />
          <button style={{ ...addBtnStyle, justifyContent: 'center' }}
            onClick={() => { setMobileOpen(false); onScrollToForm(); }}>
            Prompt qo'shish
          </button>
          <div style={{ display: 'flex', gap: 8 }}>
            <button style={{ ...iconBtnStyle, flex: 1, fontSize: 13, fontFamily: "'Plus Jakarta Sans', sans-serif" }}
              onClick={onToggleDark}>
              <MI name={darkMode ? 'light_mode' : 'dark_mode'} sz={18} /> {darkMode ? 'Light' : 'Dark'} mode
            </button>
            <button style={{ ...iconBtnStyle, flex: 1, fontSize: 13, fontFamily: "'Plus Jakarta Sans', sans-serif" }}
              onClick={onShowLogin}>
              <MI name="person" sz={18} /> Kirish
            </button>
          </div>
        </div>
      )}
    </nav>
  );
}


/* ─── HERO SECTION (2-column, animated) ─── */
function HeroSection({ darkMode }) {
  return (
    <section style={{
      maxWidth: 1400, margin: '0 auto',
      padding: '60px 24px 44px',
      display: 'flex', alignItems: 'center', gap: 52,
      flexWrap: 'wrap',
    }}>
      {/* Left — text */}
      <div style={{ flex: '1 1 440px', minWidth: 0 }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 6,
          padding: '7px 18px', borderRadius: 99, marginBottom: 22,
          background: 'rgba(99,102,241,0.1)', border: '1px solid rgba(99,102,241,0.18)',
          fontFamily: "'Plus Jakarta Sans', sans-serif",
          fontSize: 13, fontWeight: 600, color: '#6366F1', letterSpacing: 0.2,
          animation: 'heroBadgePop 0.7s cubic-bezier(0.34,1.56,0.64,1) 0.1s both',
        }}>
          <MI name="auto_awesome" sz={16} color="#6366F1" />
          O'zbekistondagi keng AI promptlar to'plami
        </div>

        <h1 style={{
          fontFamily: "'Plus Jakarta Sans', sans-serif",
          fontSize: 'clamp(32px, 5vw, 56px)', fontWeight: 800,
          lineHeight: 1.08, letterSpacing: -2, margin: '0 0 20px',
          background: darkMode
            ? 'linear-gradient(135deg, #f0f0f8 0%, #8B5CF6 55%, #A78BFA 100%)'
            : 'linear-gradient(135deg, #1a1a2e 0%, #6366F1 50%, #8B5CF6 100%)',
          WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
          backgroundClip: 'text',
          animation: 'heroFadeUp 0.8s cubic-bezier(0.16,1,0.3,1) 0.2s both',
        }}>
          Prompt Gallery — promptlar kutubxonasi
        </h1>

        <p style={{
          fontFamily: "'Plus Jakarta Sans', sans-serif",
          fontSize: 'clamp(15px, 2vw, 17px)', lineHeight: 1.75,
          color: 'var(--text-secondary)', maxWidth: 500,
          fontWeight: 400, margin: '0 0 32px',
          animation: 'heroFadeUp 0.8s cubic-bezier(0.16,1,0.3,1) 0.35s both',
        }}>
          ChatGPT, Claude, Gemini va boshqa AI modellar uchun sinab ko'rilgan,
          professional promptlar. Tanlang, nusxalang va bir bosishda ishga tushiring.
        </p>

        <div style={{
          display: 'flex', gap: 14, flexWrap: 'wrap',
          animation: 'heroFadeUp 0.8s cubic-bezier(0.16,1,0.3,1) 0.5s both',
        }}>
          <button style={{
            padding: '14px 30px', borderRadius: 14, border: 'none',
            background: 'var(--gradient-main)', color: '#fff', cursor: 'pointer',
            fontFamily: "'Plus Jakarta Sans', sans-serif",
            fontSize: 15, fontWeight: 700,
            boxShadow: '0 6px 24px rgba(99,102,241,0.3)',
            transition: 'all 0.3s', display: 'flex', alignItems: 'center', gap: 8,
          }}
            onMouseOver={e => { e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = '0 10px 32px rgba(99,102,241,0.35)'; }}
            onMouseOut={e => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = '0 6px 24px rgba(99,102,241,0.3)'; }}>
            <MI name="search" sz={20} color="#fff" />
            Promptlarni ko'rish
          </button>
          <button style={{
            padding: '14px 30px', borderRadius: 14,
            border: '1.5px solid rgba(99,102,241,0.25)',
            background: 'var(--glass-bg)', color: '#8B5CF6', cursor: 'pointer',
            fontFamily: "'Plus Jakarta Sans', sans-serif",
            fontSize: 15, fontWeight: 600, transition: 'all 0.3s',
            backdropFilter: 'blur(8px)',
            display: 'flex', alignItems: 'center', gap: 8,
          }}
            onMouseOver={e => { e.currentTarget.style.background = 'rgba(99,102,241,0.1)'; e.currentTarget.style.transform = 'translateY(-2px)'; }}
            onMouseOut={e => { e.currentTarget.style.background = 'var(--glass-bg)'; e.currentTarget.style.transform = 'none'; }}>
            <MI name="school" sz={20} color="#8B5CF6" />
            Prompt School
          </button>
        </div>
      </div>

      {/* Right — banner */}
      <div style={{
        flex: '1 1 380px', minWidth: 0,
        animation: 'heroFadeUp 0.9s cubic-bezier(0.16,1,0.3,1) 0.45s both',
      }}>
        <div className="hero-banner-slot" style={{ aspectRatio: '4/3' }}>
          {/* Decorative floating elements */}
          <div style={{ position: 'absolute', top: 20, right: 24, animation: 'pulse3d 3s ease-in-out infinite' }}>
            <MI name="auto_awesome" sz={28} color="rgba(99,102,241,0.3)" />
          </div>
          <div style={{ position: 'absolute', bottom: 24, left: 20, animation: 'pulse3d 3s ease-in-out infinite 1s' }}>
            <MI name="psychology" sz={24} color="rgba(139,92,246,0.3)" />
          </div>
          <div style={{ position: 'absolute', top: '50%', right: 16, animation: 'pulse3d 3s ease-in-out infinite 0.5s' }}>
            <MI name="neurology" sz={20} color="rgba(56,189,248,0.3)" />
          </div>

          <div style={{
            textAlign: 'center', padding: 32,
            fontFamily: "'Plus Jakarta Sans', sans-serif",
            position: 'relative', zIndex: 1,
          }}>
            <div style={{
              width: 72, height: 72, borderRadius: 20, margin: '0 auto 18px',
              background: 'var(--gradient-soft)',
              border: '1px solid rgba(99,102,241,0.15)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              animation: 'spinSlow 30s linear infinite',
            }}>
              <MI name="wallpaper_slideshow" sz={32} color="#6366F1" style={{ animation: 'none' }} />
            </div>
            <p style={{ fontSize: 16, fontWeight: 700, color: '#8B5CF6', margin: '0 0 6px' }}>
              Advisors Banner
            </p>
            <p style={{ fontSize: 13, color: 'var(--text-muted)', margin: 0, lineHeight: 1.6 }}>
              Bu yerga reklama banner rasmini qo'shing<br />
              Tavsiya: 800×600px
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}


/* ─── FILTER ROW ─── */
function FilterRow({ label, items, activeId, onSelect, isModel, darkMode }) {
  const scrollRef = useRef(null);

  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 12,
      padding: '0 24px', maxWidth: 1400, margin: '0 auto 12px',
    }}>
      <span style={{
        fontFamily: "'Plus Jakarta Sans', sans-serif",
        fontSize: 11, fontWeight: 700, color: 'var(--text-muted)',
        textTransform: 'uppercase', letterSpacing: 1.2, minWidth: 52, flexShrink: 0,
      }}>{label}</span>
      <div style={{
        display: 'flex', gap: 8, overflowX: 'auto',
        scrollbarWidth: 'none', padding: '4px 0', flex: 1,
      }} ref={scrollRef} className="hide-scrollbar">
        {items.map(item => {
          const active = item.id === activeId;
          const inactiveBg = darkMode ? 'rgba(255,255,255,0.06)' : 'rgba(255,255,255,0.7)';
          const chipStyle = {
            display: 'flex', alignItems: 'center', gap: 6,
            padding: '8px 16px', borderRadius: 99, cursor: 'pointer',
            whiteSpace: 'nowrap', flexShrink: 0,
            fontFamily: "'Plus Jakarta Sans', sans-serif",
            fontSize: 13, fontWeight: 600, transition: 'all 0.25s ease',
            background: active ? 'var(--gradient-main)' : inactiveBg,
            color: active ? '#fff' : 'var(--text-primary)',
            boxShadow: active ? '0 4px 16px rgba(99,102,241,0.3)' : '0 1px 4px rgba(0,0,0,0.03)',
            border: active ? '1px solid transparent' : '1px solid var(--glass-border)',
          };

          const badge = isModel && item.id !== 'all' ? (
            <span style={{
              width: 22, height: 22, borderRadius: 6,
              background: item.color, color: '#fff',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 9, fontWeight: 800, lineHeight: 1,
            }}>{item.abbr}</span>
          ) : null;

          const icon = !isModel && item.icon ? (
            <span style={{ fontSize: 15, lineHeight: 1 }}>{item.icon}</span>
          ) : null;

          return (
            <button key={item.id} style={chipStyle} onClick={() => onSelect(item.id)}
              onMouseOver={e => { if (!active) e.currentTarget.style.background = 'rgba(99,102,241,0.1)'; }}
              onMouseOut={e => { if (!active) e.currentTarget.style.background = inactiveBg; }}>
              {badge || (item.id === 'all' && isModel && <span style={{ fontSize: 14 }}>{item.abbr}</span>)}
              {icon}
              {item.name}
            </button>
          );
        })}
      </div>
    </div>
  );
}


/* ─── PROMPT CARD ─── */
function PromptCard({ prompt, index, onModelClick, onCategoryClick, darkMode }) {
  const [expanded, setExpanded] = useState(false);
  const [copied, setCopied] = useState(false);
  const model = getModel(prompt.modelId);
  const category = getCategory(prompt.categoryId);

  const handleCopy = async () => {
    try {
      await navigator.clipboard.writeText(prompt.prompt);
      setCopied(true);
      if (window.__showToast) window.__showToast("Prompt nusxalandi!");
      setTimeout(() => setCopied(false), 2000);
    } catch {}
  };

  const handleTry = () => {
    const url = buildTryUrl(prompt.modelId, prompt.prompt);
    if (url) window.open(url, '_blank');
  };

  const cardStyle = {
    background: 'var(--glass-bg)',
    backdropFilter: 'var(--glass-blur)', WebkitBackdropFilter: 'var(--glass-blur)',
    borderRadius: 22, padding: 24,
    border: '1px solid var(--glass-border)',
    boxShadow: '0 4px 24px rgba(0,0,0,0.03)',
    transition: 'all 0.35s cubic-bezier(0.4,0,0.2,1)',
    display: 'flex', flexDirection: 'column', gap: 14,
    animationDelay: `${index * 55}ms`,
  };

  const copyBg = darkMode ? 'rgba(255,255,255,0.06)' : 'rgba(255,255,255,0.7)';

  return (
    <div className="prompt-card" style={cardStyle}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <a href={`/${category.slug}`} onClick={e => { e.preventDefault(); onCategoryClick(category.id); }}
          style={{
            display: 'inline-flex', alignItems: 'center', gap: 5,
            padding: '5px 12px', borderRadius: 99, fontSize: 12, fontWeight: 600,
            fontFamily: "'Plus Jakarta Sans', sans-serif",
            background: darkMode ? `${category.color}18` : category.bg,
            color: darkMode ? `${category.color}` : category.color,
            textDecoration: 'none', cursor: 'pointer',
            border: `1px solid ${category.color}22`, transition: 'all 0.2s',
          }}
          onMouseOver={e => e.currentTarget.style.transform = 'scale(1.05)'}
          onMouseOut={e => e.currentTarget.style.transform = 'none'}>
          <span style={{ fontSize: 13 }}>{category.icon}</span>
          {category.name}
        </a>

        <a href={`/${model.slug}`} onClick={e => { e.preventDefault(); onModelClick(model.id); }}
          style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            padding: '5px 10px', borderRadius: 99, fontSize: 12, fontWeight: 600,
            fontFamily: "'Plus Jakarta Sans', sans-serif",
            background: `${model.color}12`, color: model.color,
            textDecoration: 'none', cursor: 'pointer',
            border: `1px solid ${model.color}20`, transition: 'all 0.2s',
          }}
          onMouseOver={e => e.currentTarget.style.transform = 'scale(1.05)'}
          onMouseOut={e => e.currentTarget.style.transform = 'none'}>
          <span style={{
            width: 20, height: 20, borderRadius: 5,
            background: model.color, color: '#fff',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 8, fontWeight: 800, lineHeight: 1,
          }}>{model.abbr}</span>
          {model.name}
        </a>
      </div>

      <div>
        <h3 style={{
          fontFamily: "'Plus Jakarta Sans', sans-serif",
          fontSize: 17, fontWeight: 700, color: 'var(--text-primary)',
          margin: '0 0 6px', lineHeight: 1.3, letterSpacing: -0.2,
        }}>{prompt.title}</h3>
        <p style={{
          fontFamily: "'Plus Jakarta Sans', sans-serif",
          fontSize: 13.5, color: 'var(--text-secondary)',
          margin: 0, lineHeight: 1.5, fontWeight: 400,
        }}>{prompt.description}</p>
      </div>

      <div style={{
        background: 'var(--gradient-soft)',
        border: '1px solid rgba(99,102,241,0.1)',
        borderRadius: 14, padding: 14,
        fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
        fontSize: 12, lineHeight: 1.65, color: 'var(--text-secondary)',
        position: 'relative',
        maxHeight: expanded ? 'none' : 88, overflow: 'hidden',
        transition: 'max-height 0.4s ease',
      }}>
        {prompt.prompt}
        {!expanded && (
          <div style={{
            position: 'absolute', bottom: 0, left: 0, right: 0, height: 44,
            background: `linear-gradient(transparent, var(--card-fade))`,
          }}></div>
        )}
      </div>

      <button onClick={() => setExpanded(!expanded)} style={{
        background: 'none', border: 'none', cursor: 'pointer',
        fontFamily: "'Plus Jakarta Sans', sans-serif",
        fontSize: 12.5, fontWeight: 600, color: '#6366F1',
        padding: 0, alignSelf: 'flex-start', display: 'flex', alignItems: 'center', gap: 4,
      }}>
        <MI name={expanded ? 'expand_less' : 'expand_more'} sz={18} color="#6366F1" />
        {expanded ? "Yashirish" : "Ko'proq ko'rish"}
      </button>

      <div style={{ display: 'flex', gap: 10, marginTop: 'auto' }}>
        <button onClick={handleCopy} style={{
          flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 7,
          padding: '10px 16px', borderRadius: 12,
          border: '1px solid var(--glass-border)',
          background: copied ? 'rgba(5,150,105,0.12)' : copyBg,
          cursor: 'pointer', fontFamily: "'Plus Jakarta Sans', sans-serif",
          fontSize: 13, fontWeight: 600,
          color: copied ? '#34d399' : 'var(--text-primary)',
          transition: 'all 0.25s',
        }}
          onMouseOver={e => { if (!copied) e.currentTarget.style.background = 'rgba(99,102,241,0.1)'; }}
          onMouseOut={e => { if (!copied) e.currentTarget.style.background = copied ? 'rgba(5,150,105,0.12)' : copyBg; }}>
          <MI name={copied ? 'check_circle' : 'content_copy'} sz={18}
            color={copied ? '#34d399' : 'var(--text-secondary)'} />
          {copied ? 'Nusxalandi!' : 'Nusxalash'}
        </button>

        <button onClick={handleTry} style={{
          flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 7,
          padding: '10px 16px', borderRadius: 12, border: 'none',
          background: 'var(--gradient-main)', cursor: 'pointer',
          fontFamily: "'Plus Jakarta Sans', sans-serif",
          fontSize: 13, fontWeight: 600, color: '#fff',
          transition: 'all 0.25s',
          boxShadow: '0 3px 14px rgba(99,102,241,0.25)',
        }}
          onMouseOver={e => e.currentTarget.style.transform = 'translateY(-2px)'}
          onMouseOut={e => e.currentTarget.style.transform = 'none'}>
          <MI name="rocket_launch" sz={18} color="#fff" />
          {model.tryLabel || "Sinab ko'rish"}
        </button>
      </div>
    </div>
  );
}

Object.assign(window, { MI, PromptLogo, Navbar, HeroSection, FilterRow, PromptCard });