/* ============================================================
   studio-trends.jsx — Шаблоны/Тренды (аналог Mini App Trends)
   ============================================================ */

const { useState, useEffect, useCallback } = React;

const PLACEHOLDER_GRADIENTS = [
  'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
  'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
  'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
  'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
  'linear-gradient(135deg, #fa709a 0%, #fee140 100%)',
  'linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%)',
  'linear-gradient(135deg, #fccb90 0%, #d57eeb 100%)',
  'linear-gradient(135deg, #96fbc4 0%, #f9f586 100%)',
];

/* ─── Карточка шаблона ─── */
function TemplateCard({ tpl, onClick, idx }) {
  const isPlaceholder = !tpl;
  return (
    <div
      className="tpl-card"
      onClick={() => tpl && onClick(tpl)}
      style={{ cursor: tpl ? 'pointer' : 'default' }}
    >
      {tpl?.imageUrl ? (
        <img src={tpl.imageUrl} alt={tpl.title} />
      ) : (
        <div style={{
          position: 'absolute', inset: 0,
          background: PLACEHOLDER_GRADIENTS[idx % 8],
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 32, opacity: isPlaceholder ? 0.35 : 1,
        }}>
          {isPlaceholder ? '✨' : '🎨'}
        </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: 8, right: 8,
          background: '#e53935', color: '#fff',
          fontSize: 9, fontWeight: 800,
          padding: '2px 6px', borderRadius: 4,
          letterSpacing: '0.5px',
        }}>PRO</div>
      )}
    </div>
  );
}

/* ─── Сетка шаблонов 2 колонки ─── */
function TemplateGrid({ templates, loading, onCardClick, emptyText }) {
  const items = loading
    ? Array.from({ length: 8 }, (_, i) => null)
    : templates;

  if (!loading && templates.length === 0) {
    return (
      <EmptyState icon="✨" title={emptyText || 'Нет шаблонов'} sub="Скоро здесь появятся новые работы" />
    );
  }

  return (
    <div className="tpl-grid">
      {items.map((tpl, i) => (
        <TemplateCard key={tpl ? tpl.id : `ph-${i}`} tpl={tpl} onClick={onCardClick} idx={i} />
      ))}
    </div>
  );
}

/* ─── TrendsPage ─── */
function TrendsPage() {
  const { navigate } = useNav();
  const { user, API_BASE } = useAuth();
  const [section, setSection]       = useState('marketplace');
  const [contentType, setContentType] = useState('photo');
  const [categories, setCategories] = useState([]);
  const [activeCategory, setActiveCategory] = useState(null);
  const [templates, setTemplates]   = useState([]);
  const [loading, setLoading]       = useState(false);

  const isSubscriber = user?.subscription_plan === 'pro' || user?.subscription_plan === 'business';

  /* Загрузка категорий при смене секции/типа */
  useEffect(() => {
    fetch(`${API_BASE}/api/tg/categories?section=${section}&type=${contentType}`)
      .then(r => r.ok ? r.json() : [])
      .then(rows => {
        setCategories(rows);
        setActiveCategory(null);
      })
      .catch(() => setCategories([]));
  }, [section, contentType]);

  /* Загрузка шаблонов */
  const loadTemplates = useCallback(() => {
    setLoading(true);
    const params = new URLSearchParams({ section, type: contentType });
    if (activeCategory) params.set('category', activeCategory);

    fetch(`${API_BASE}/api/tg/templates?${params}`)
      .then(r => r.ok ? r.json() : [])
      .then(rows => setTemplates(rows))
      .catch(() => setTemplates([]))
      .finally(() => setLoading(false));
  }, [section, contentType, activeCategory]);

  useEffect(() => { loadTemplates(); }, [loadTemplates]);

  function handleCardClick(tpl) {
    if (tpl.isPro && !isSubscriber) {
      navigate('studio-profile');
      return;
    }
    /* Передаём промпт + модель на страницу создания изображения через sessionStorage */
    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');
  }

  const SECTIONS = [
    { id: 'marketplace', label: '🛒 Маркетплейс' },
    { id: 'social',      label: '📱 Соц. сети' },
  ];

  const CONTENT_TYPES = [
    { id: 'photo', label: '🖼 Фото' },
    { id: 'video', label: '🎬 Видео' },
  ];

  return (
    <div>
      <div className="page-head">
        <div className="page-head-text">
          <h1 className="page-title h-display">✨ Тренды</h1>
          <p className="page-sub muted">Популярные шаблоны и идеи</p>
        </div>
      </div>

      {/* Секции */}
      <div className="tpl-tabs" style={{ marginBottom: 12 }}>
        {SECTIONS.map(s => (
          <button
            key={s.id}
            className={`tpl-tab-btn${section === s.id ? ' on' : ''}`}
            onClick={() => setSection(s.id)}
          >
            {s.label}
          </button>
        ))}
      </div>

      {/* Тип контента */}
      <div className="tpl-tabs" style={{ marginBottom: 12 }}>
        {CONTENT_TYPES.map(t => (
          <button
            key={t.id}
            className={`tpl-tab-btn${contentType === t.id ? ' on' : ''}`}
            onClick={() => setContentType(t.id)}
          >
            {t.label}
          </button>
        ))}
      </div>

      {/* Фильтр по категориям */}
      {categories.length > 0 && (
        <div className="tpl-cats" style={{ marginBottom: 16 }}>
          <button
            className={`cat-chip${!activeCategory ? ' on' : ''}`}
            onClick={() => setActiveCategory(null)}
          >
            Все
          </button>
          {categories.map(cat => (
            <button
              key={cat.id}
              className={`cat-chip${activeCategory === cat.name ? ' on' : ''}`}
              onClick={() => setActiveCategory(activeCategory === cat.name ? null : cat.name)}
            >
              {cat.icon && <span style={{ marginRight: 4 }}>{cat.icon}</span>}
              {cat.name}
            </button>
          ))}
        </div>
      )}

      {/* Сетка */}
      <TemplateGrid
        templates={templates}
        loading={loading}
        onCardClick={handleCardClick}
        emptyText="Нет шаблонов в этой категории"
      />
    </div>
  );
}