/* ============================================================
   studio.jsx — Sidebar layout + Dashboard
   ============================================================ */

const { useState, useEffect } = React;

/* ─── Nav items ─── */
const NAV_ITEMS = [
  { id: 'studio',          icon: '🏠', label: 'Главная' },
  { id: 'studio-image',    icon: '🎨', label: 'Изображения' },
  { id: 'studio-video',    icon: '🎬', label: 'Видео' },
  { id: 'studio-music',    icon: '🎵', label: 'Музыка' },
  { id: 'studio-trends',   icon: '✨', label: 'Тренды' },
  { id: 'studio-wheel',    icon: '🎡', label: 'Колесо' },
  { id: 'studio-history',  icon: '🕐', label: 'История' },
  { id: 'studio-profile',  icon: '👤', label: 'Профиль' },
];

/* ─── Sidebar ─── */
function Sidebar({ page }) {
  const { navigate } = useNav();
  const { user, onLogout } = useAuth();

  function initials(name) {
    if (!name) return '?';
    return name.split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase();
  }

  return (
    <aside className="sidebar">
      <div className="sidebar-logo">
        <Logo size={16} />
      </div>
      <nav className="sidebar-nav">
        {NAV_ITEMS.map(item => (
          <button
            key={item.id}
            className={`snav${page === item.id.replace('studio-', '') || (page === 'dashboard' && item.id === 'studio') ? ' on' : ''}`}
            onClick={() => navigate(item.id)}
          >
            <span className="snav-ic">{item.icon}</span>
            {item.label}
          </button>
        ))}
      </nav>
      <div className="sidebar-foot">
        <button className="balance-chip" onClick={() => navigate('studio-profile')}>
          <div>
            <div className="balance-label muted" style={{ fontSize: 12 }}>Баланс</div>
            <div className="balance-coins">
              💎 {user?.diamonds ?? 0}
              <span style={{ marginLeft: 8 }}>🍌 {user?.bananas ?? 0}</span>
              <span style={{ marginLeft: 8 }}>🎵 {user?.musicCredits ?? 0}</span>
            </div>
          </div>
          <span style={{ color: 'var(--text-muted)', fontSize: 13 }}>→</span>
        </button>
        {user?.is_admin && (
          <button
            className="snav"
            style={{ background: 'rgba(139,92,246,.12)', color: '#c4b5fd', border: '1px solid rgba(139,92,246,.3)' }}
            onClick={() => navigate('adm-dashboard')}
          >
            <span className="snav-ic">⚙️</span>
            Админ-панель
          </button>
        )}
        <div className="sidebar-user">
          <div className="avatar">{initials(user?.web_name || user?.name || user?.first_name)}</div>
          <div className="sidebar-user-meta">
            <div className="su-name">{user?.web_name || user?.first_name || 'Пользователь'}</div>
            <div className="su-email muted">{user?.email || ''}</div>
          </div>
          <button className="logout-btn" title="Выйти" onClick={onLogout}>⏏</button>
        </div>
      </div>
    </aside>
  );
}

/* ─── Top bar (mobile) ─── */
function StudioTopBar({ page }) {
  const { navigate } = useNav();
  const { user } = useAuth();
  const item = NAV_ITEMS.find(n => n.id === `studio-${page}`) || NAV_ITEMS[0];

  return (
    <div className="studio-topbar">
      <Logo size={16} />
      <span style={{ fontWeight: 700 }}>{item.label}</span>
      <button className="btn btn-ghost btn-sm" onClick={() => navigate('studio-profile')}>
        💎 {user?.diamonds ?? 0}
      </button>
    </div>
  );
}

/* ─── Bottom nav (mobile) ─── */
function BottomNav({ page }) {
  const { navigate } = useNav();
  const items = NAV_ITEMS.filter(n => ['studio', 'studio-image', 'studio-trends', 'studio-wheel', 'studio-profile'].includes(n.id));

  return (
    <nav className="bottomnav">
      {items.map(item => {
        const active = page === item.id.replace('studio-', '') || (page === 'dashboard' && item.id === 'studio');
        return (
          <button key={item.id} className={`bnav${active ? ' on' : ''}`} onClick={() => navigate(item.id)}>
            <span className="bnav-ic">{item.icon}</span>
            <span className="bnav-l">{item.label}</span>
          </button>
        );
      })}
    </nav>
  );
}

/* ─── Studio Layout ─── */
function StudioLayout({ page }) {
  return (
    <div className="studio">
      <Sidebar page={page} />
      <div className="studio-main">
        <StudioTopBar page={page} />
        <div className="studio-main-in view-enter">
          {page === 'dashboard' && <DashboardPage />}
          {page === 'image'     && <ImagePage />}
          {page === 'video'     && <VideoPage />}
          {page === 'music'     && <MusicPage />}
          {page === 'trends'    && <TrendsPage />}
          {page === 'wheel'     && <WheelPage />}
          {page === 'history'   && <HistoryPage />}
          {page === 'profile'   && <ProfilePage />}
        </div>
      </div>
      <BottomNav page={page} />
    </div>
  );
}

/* ─── Dashboard Page ─── */
function DashboardPage() {
  const { navigate } = useNav();
  const { user, API_BASE } = useAuth();
  const [recent, setRecent] = useState([]);
  const [trendTemplates, setTrendTemplates] = useState([]);

  useEffect(() => {
    fetch(`${API_BASE}/api/tg/generations`, { credentials: 'include' })
      .then(r => r.ok ? r.json() : { generations: [] })
      .then(data => setRecent((data.generations || []).slice(0, 6)))
      .catch(() => {});

    fetch(`${API_BASE}/api/tg/templates?section=social&type=photo`)
      .then(r => r.ok ? r.json() : [])
      .then(rows => setTrendTemplates(rows.slice(0, 8)))
      .catch(() => {});
  }, []);

  function initials(name) {
    if (!name) return '?';
    return name.split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase();
  }

  const name = user?.web_name || user?.first_name || 'друг';

  return (
    <div>
      <div className="page-head">
        <div className="page-head-text">
          <h1 className="page-title h-display">Привет, {name} 👋</h1>
          <p className="page-sub muted">Что создаём сегодня?</p>
        </div>
      </div>

      <div className="dash-grid">
        {/* Баланс */}
        <div className="glass balance-card">
          <div className="balance-label muted">Баланс</div>
          <div className="balance-big">💎 {user?.diamonds ?? 0}</div>
          <div className="balance-coins-row" style={{ display: 'flex', gap: 14, marginTop: 6, flexWrap: 'wrap' }}>
            <span style={{ fontSize: 16, fontWeight: 700 }}>🍌 {user?.bananas ?? 0}</span>
            <span style={{ fontSize: 16, fontWeight: 700 }}>🎵 {user?.musicCredits ?? 0}</span>
          </div>
          <div className="balance-row" style={{ marginTop: 8 }}>
            <span className={`pill${user?.subscription_plan === 'pro' ? ' pill-pro' : user?.subscription_plan === 'business' ? ' pill-pro' : ' pill-free'}`}>
              {user?.subscription_plan === 'pro' ? '⭐ Pro' : user?.subscription_plan === 'business' ? '⭐ Business' : 'Free'}
            </span>
          </div>
          <button className="btn btn-ghost btn-sm" style={{ marginTop: 8 }} onClick={() => navigate('studio-profile')}>
            Пополнить →
          </button>
        </div>

        {/* Быстрые действия */}
        <div className="quick-actions">
          {[
            { view: 'studio-image', cls: 'qa-img', icon: '🎨', title: 'Создать изображение', sub: 'от 2 🍌 / 2 💎' },
            { view: 'studio-video', cls: 'qa-vid', icon: '🎬', title: 'Создать видео',        sub: 'от 79₽' },
            { view: 'studio-music', cls: 'qa-mus', icon: '🎵', title: 'Создать музыку',       sub: '1 монета / трек' },
          ].map(a => (
            <button key={a.view} className={`glass hov-lift quick-act ${a.cls}`} onClick={() => navigate(a.view)}>
              <div className="quick-ic">{a.icon}</div>
              <div>
                <div className="quick-l">{a.title}</div>
                <div className="muted" style={{ fontSize: 13 }}>{a.sub}</div>
              </div>
              <span className="quick-arr">→</span>
            </button>
          ))}
        </div>
      </div>

      {/* Популярные шаблоны */}
      {trendTemplates.length > 0 && (
        <div style={{ marginTop: 24 }}>
          <div className="dash-recent-head">
            <div className="block-title">✨ Популярные шаблоны</div>
            <button className="btn btn-ghost btn-sm" onClick={() => navigate('studio-trends')}>Все →</button>
          </div>
          <div className="tpl-grid">
            {trendTemplates.map((tpl, i) => (
              <div
                key={tpl.id}
                className="tpl-card"
                onClick={() => {
                  if (typeof sessionStorage !== 'undefined') {
                    sessionStorage.setItem('tpl_prompt', tpl.prompt || '');
                    sessionStorage.setItem('tpl_model', tpl.model || '');
                    sessionStorage.setItem('tpl_title', tpl.title || '');
                  }
                  navigate(tpl.type === 'video' ? 'studio-video' : 'studio-image');
                }}
              >
                {tpl.imageUrl ? (
                  <img src={tpl.imageUrl} alt={tpl.title} />
                ) : (
                  <div style={{
                    position: 'absolute', inset: 0,
                    background: ['linear-gradient(135deg,#667eea,#764ba2)','linear-gradient(135deg,#f093fb,#f5576c)','linear-gradient(135deg,#4facfe,#00f2fe)','linear-gradient(135deg,#43e97b,#38f9d7)','linear-gradient(135deg,#fa709a,#fee140)','linear-gradient(135deg,#a18cd1,#fbc2eb)','linear-gradient(135deg,#fccb90,#d57eeb)','linear-gradient(135deg,#96fbc4,#f9f586)'][i % 8],
                    display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 28,
                  }}>🎨</div>
                )}
                <div className="tpl-card-overlay" />
                {tpl.category && <div className="tpl-card-cat">#{tpl.category}</div>}
                <div className="tpl-card-title">{tpl.title}</div>
                {tpl.isPro && (
                  <div style={{ position:'absolute',top:6,right:6,background:'#e53935',color:'#fff',fontSize:9,fontWeight:800,padding:'2px 5px',borderRadius:4 }}>PRO</div>
                )}
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Последние генерации */}
      {recent.length > 0 && (
        <div>
          <div className="dash-recent-head">
            <div className="block-title">Последние генерации</div>
            <button className="btn btn-ghost btn-sm" onClick={() => navigate('studio-history')}>Все →</button>
          </div>
          <div className="recent-grid">
            {recent.map(g => (
              <div key={g.id} className="glass recent-card">
                {g.imageUrl ? (
                  <img src={g.imageUrl} alt="" className="recent-art" style={{ borderRadius: 8, objectFit: 'cover' }} />
                ) : (
                  <PlaceholderArt type="img" style={{ height: 90, marginBottom: 12 }} />
                )}
                <div className="recent-meta">
                  <span className="recent-badge">{g.model}</span>
                  <span className="recent-time muted" style={{ fontSize: 12 }}>
                    {new Date(g.createdAt).toLocaleDateString('ru', { day: 'numeric', month: 'short' })}
                  </span>
                </div>
                {g.prompt && (
                  <p className="recent-prompt muted">{g.prompt}</p>
                )}
              </div>
            ))}
          </div>
        </div>
      )}

      {recent.length === 0 && (
        <div className="glass" style={{ padding: '40px 32px', textAlign: 'center', marginTop: 20 }}>
          <div style={{ fontSize: 48, marginBottom: 16 }}>🎨</div>
          <div style={{ fontSize: 18, fontWeight: 700, marginBottom: 8 }}>Начни создавать!</div>
          <p className="muted" style={{ marginBottom: 20 }}>Твоя история генераций появится здесь</p>
          <button className="btn btn-accent" onClick={() => navigate('studio-image')}>Создать первое изображение</button>
        </div>
      )}
    </div>
  );
}