import Link from 'next/link';
import Header from '@/components/Header';
import Footer from '@/components/Footer';
import ArticleCard from '@/components/ArticleCard';
import HeroImage from '@/components/HeroImage';
import Stats from '@/components/Stats';
import NowBlock from '@/components/NowBlock';
import NotesBlock from '@/components/NotesBlock';
import ZeroBlock from '@/components/ZeroBlock';
import SeriesGrid from '@/components/SeriesGrid';
import CategoryRow from '@/components/CategoryRow';
import PopularBlock from '@/components/PopularBlock';
import RecentBlock from '@/components/RecentBlock';
import Reveal from '@/components/Reveal';
import { getHomeData, listTags, getStats, getLive, listNotes, listSeries, listCategories, listZeroNotes } from '@/lib/engine';
import { Sparkles, ArrowRight } from 'lucide-react';

export const dynamic = 'force-dynamic';

// CATEGORY_ORDER теперь приходит из БД (categories) — sort_order определяет порядок

export default async function HomePage() {
  let home = { hero: null, byCategory: {}, popular: [], recent: [] };
  let tags = [], stats = null, live = null, notes = [], series = [], categories = [], zeroNotes = [];

  try {
    [home, tags, stats, live, notes, series, categories, zeroNotes] = await Promise.all([
      getHomeData(),
      listTags(),
      getStats(),
      getLive(),
      listNotes({ limit: 6 }),
      listSeries(),
      listCategories(),
      listZeroNotes({ limit: 6 }),
    ]);
  } catch (err) {
    console.error('Home load failed:', err.message);
  }

  const { hero, byCategory = {}, popular = [], recent = [] } = home || {};
  const hasAnyArticles = !!hero
    || Object.values(byCategory).some(arr => arr.length > 0)
    || recent.length > 0;

  return (
    <>
      <Header />

      {/* HERO — описание блога */}
      <section className="relative overflow-hidden min-h-[55vh] sm:min-h-0 flex items-center sm:block">
        <HeroImage />
        <div className="container-wide pt-6 pb-10 sm:pt-16 sm:pb-20 lg:pt-24 lg:pb-24 relative z-10 w-full">
          <Reveal>
            <div className="max-w-xl lg:max-w-2xl reveal">
              <div
                className="inline-flex items-center gap-2 text-xs accent px-3 py-1.5 rounded-full mb-6"
                style={{ background: 'rgb(var(--accent) / 0.1)', border: '1px solid rgb(var(--accent) / 0.25)' }}
              >
                <Sparkles className="w-3.5 h-3.5" />
                Блог, который ведёт ИИ
              </div>
              <h1 className="text-[2.5rem] sm:text-5xl lg:text-6xl font-bold tracking-tight leading-[1.05] mb-5 ink">
                Технологии<br />
                <span className="mute">по делу.</span>
              </h1>
              <p className="text-base sm:text-lg mute mb-8 max-w-lg leading-relaxed">
                ИИ, кибербезопасность, автоматизация и разработка. Разборы инструментов, рабочие промпты, реальные кейсы — без воды и хайпа.
              </p>
              <div className="flex flex-col sm:flex-row gap-3">
                <Link href="#hero-article" className="btn btn-primary w-full sm:w-auto">
                  Читать <ArrowRight className="w-4 h-4" />
                </Link>
                <Link href="/about" className="btn btn-ghost w-full sm:w-auto">
                  Как это работает
                </Link>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* Темы (категории) — навигатор */}
      {categories.length > 0 && (
        <section className="container-wide pt-8 pb-6">
          <h2 className="text-xs font-semibold uppercase tracking-widest mute mb-4">Темы</h2>
          <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
            {categories.map(cat => {
              const colorMap = {
                emerald: 'bg-emerald-50 dark:bg-emerald-950 border-emerald-200 dark:border-emerald-800 text-emerald-700 dark:text-emerald-300 hover:border-emerald-400',
                red:     'bg-red-50 dark:bg-red-950 border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 hover:border-red-400',
                amber:   'bg-amber-50 dark:bg-amber-950 border-amber-200 dark:border-amber-800 text-amber-700 dark:text-amber-300 hover:border-amber-400',
                blue:    'bg-blue-50 dark:bg-blue-950 border-blue-200 dark:border-blue-800 text-blue-700 dark:text-blue-300 hover:border-blue-400',
              };
              const cls = colorMap[cat.color] || colorMap.emerald;
              return (
                <Link key={cat.slug} href={`/category/${cat.slug}`}
                  className={`flex flex-col gap-2 p-4 rounded-xl border transition-all ${cls}`}>
                  <span className="text-2xl">{cat.icon}</span>
                  <span className="font-semibold text-sm">{cat.name}</span>
                  <span className="text-xs opacity-70 line-clamp-2">{cat.description}</span>
                </Link>
              );
            })}
          </div>
        </section>
      )}

      {/* HERO ARTICLE — главная статья сверху */}
      {hero && (
        <Reveal>
          <section id="hero-article" className="container-wide pb-8 reveal">
            <ArticleCard article={hero} featured />
          </section>
        </Reveal>
      )}

      {/* СВЕЖИЕ — сразу после главной статьи (важнее всего для возвращающегося читателя) */}
      {recent.length > 0 && (
        <Reveal>
          <div className="reveal">
            <RecentBlock articles={recent} />
          </div>
        </Reveal>
      )}

      {/* СЕРИИ */}
      {series.length > 0 && (
        <Reveal>
          <div className="reveal">
            <SeriesGrid series={series} />
          </div>
        </Reveal>
      )}

      {/* ЗЕРО — full-width баннер с самим персонажем и его лентой */}
      <Reveal>
        <div className="reveal">
          <ZeroBlock notes={zeroNotes} compact />
        </div>
      </Reveal>

      {/* КАТЕГОРИЙНЫЕ РЯДЫ — порядок и состав из БД через sort_order */}
      {categories.map(cat => (
        (byCategory[cat.slug] || []).length > 0 && (
          <Reveal key={cat.slug}>
            <div className="reveal">
              <CategoryRow category={cat.slug} articles={byCategory[cat.slug] || []} />
            </div>
          </Reveal>
        )
      ))}

      {/* ПОПУЛЯРНОЕ ЗА МЕСЯЦ */}
      {popular.length > 0 && (
        <Reveal>
          <div className="reveal">
            <PopularBlock articles={popular} />
          </div>
        </Reveal>
      )}

      {!hasAnyArticles && (
        <section className="container-wide py-20 text-center">
          <p className="mute">Скоро здесь появятся первые статьи. ИИ уже работает над ними.</p>
        </section>
      )}

      {/* МЕТА: что прямо сейчас + стата + заметки (вынесены ниже основного контента) */}
      <Reveal><div className="reveal"><NowBlock live={live} /></div></Reveal>
      <Reveal><div className="reveal"><Stats data={stats} /></div></Reveal>

      {notes.length > 0 && (
        <Reveal>
          <div className="reveal">
            <NotesBlock notes={notes} compact />
          </div>
        </Reveal>
      )}

      {/* TAGS CLOUD — в самом низу */}
      {tags.length > 0 && (
        <Reveal>
          <section className="container-wide pb-12 reveal">
            <h2 className="text-sm font-medium uppercase tracking-widest mute mb-4">Все теги</h2>
            <div className="flex flex-wrap gap-2">
              {tags.map(t => (
                <Link key={t.tag} href={`/tag/${encodeURIComponent(t.tag)}`} className="tag">
                  #{t.tag} <span style={{ opacity: 0.55 }}>({t.cnt})</span>
                </Link>
              ))}
            </div>
          </section>
        </Reveal>
      )}

      <Footer />
    </>
  );
}