import { redirect } from 'next/navigation';
import Link from 'next/link';
import { requireUser } from '@/lib/session';
import { engine } from '@/lib/engine';
import Header from '@/components/Header';
import { Plus, MessageSquare, Users, Target } from 'lucide-react';

const GOAL_LABELS = {
  educational: 'Обучение',
  news: 'Новости',
  entertainment: 'Развлечение',
  expert: 'Экспертный',
  sales: 'Продажи',
};

export default async function HomePage() {
  const user = await requireUser();
  if (!user) redirect('/landing');

  let channels = [];
  try {
    channels = await engine.listChannels(user.id);
  } catch (err) {
    console.error('listChannels failed:', err.message);
  }

  return (
    <>
      <Header user={user} />
      <main className="max-w-6xl mx-auto p-4 sm:p-6">
        <div className="flex items-center justify-between mb-6">
          <div>
            <h1 className="text-2xl font-bold">Мои каналы</h1>
            <p className="text-sm text-gray-500 mt-1">
              Управляй контентом и публикациями
            </p>
          </div>
          <Link href="/channels/new" className="btn-primary">
            <Plus className="w-4 h-4" />
            Добавить канал
          </Link>
        </div>

        {channels.length === 0 ? (
          <div className="card p-12 text-center">
            <MessageSquare className="w-12 h-12 mx-auto mb-4 text-accent opacity-50" />
            <h2 className="text-xl font-semibold mb-2">Нет каналов</h2>
            <p className="text-gray-500 mb-6">Добавь первый канал чтобы начать генерировать контент</p>
            <Link href="/channels/new" className="btn-primary">
              <Plus className="w-4 h-4" />
              Создать первый канал
            </Link>
          </div>
        ) : (
          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            {channels.map(ch => (
              <Link key={ch.id} href={`/channels/${ch.id}`} className="card p-5 hover:border-accent/40 transition-colors group">
                <div className="flex items-start justify-between mb-3">
                  <div>
                    <h3 className="font-semibold group-hover:text-accent transition-colors">{ch.name}</h3>
                    {ch.tg_username && (
                      <span className="text-xs text-gray-500">@{ch.tg_username}</span>
                    )}
                  </div>
                  <span className={`text-xs px-2 py-0.5 rounded-full ${
                    ch.platform === 'telegram' ? 'bg-blue-500/20 text-blue-400' :
                    ch.platform === 'vk' ? 'bg-blue-600/20 text-blue-500' :
                    'bg-purple-500/20 text-purple-400'
                  }`}>
                    {ch.platform || 'telegram'}
                  </span>
                </div>
                {ch.niche && (
                  <p className="text-sm text-gray-400 mb-3 line-clamp-2">{ch.niche}</p>
                )}
                <div className="flex items-center gap-3 text-xs text-gray-500">
                  {ch.goal && (
                    <span className="flex items-center gap-1">
                      <Target className="w-3 h-3" />
                      {GOAL_LABELS[ch.goal] || ch.goal}
                    </span>
                  )}
                  {ch.language && (
                    <span className="flex items-center gap-1">
                      <Users className="w-3 h-3" />
                      {ch.language.toUpperCase()}
                    </span>
                  )}
                </div>
              </Link>
            ))}
          </div>
        )}
      </main>
    </>
  );
}