nextjs-app/src/app/page.tsx

import { StockList } from '@/components/StockList'
import { MarketOverview } from '@/components/MarketOverview'
import { TopMovers } from '@/components/TopMovers'
import TopMLPredictions from '@/components/TopMLPredictions'
import Link from 'next/link'
import { 
  TrendingUp, BarChart3, Brain, Zap, Target, Search, 
  Activity, Newspaper, Building2, Briefcase, ArrowRight 
} from 'lucide-react'

export default function Home() {
  return (
    <div className="container mx-auto px-4 py-6">
      {/* Ana Başlık */}
      <div className="mb-6 text-center">
        <h1 className="text-3xl md:text-4xl font-bold text-gray-900 mb-2">
          Borsa İstanbul Hisse Analiz Paneli
        </h1>
        <p className="text-lg text-gray-600">
          Teknik tarama (deterministik), model çıktısı (best-effort) ve piyasa özeti
        </p>
      </div>

      {/* Hızlı Erişim Butonları */}
      <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3 mb-6">
        <QuickAccessCard 
          href="/stocks" 
          icon={<BarChart3 className="h-5 w-5" />} 
          title="Hisse Analizi" 
          color="blue"
        />
        <QuickAccessCard 
          href="/ml-scan" 
          icon={<Zap className="h-5 w-5" />} 
          title="ML Tarama" 
          color="purple"
        />
        <QuickAccessCard 
          href="/scanner" 
          icon={<Search className="h-5 w-5" />} 
          title="Teknik Tarayıcı" 
          color="green"
        />
        <QuickAccessCard 
          href="/ai-analysis" 
          icon={<Brain className="h-5 w-5" />} 
          title="AI Analiz" 
          color="pink"
        />
        <QuickAccessCard 
          href="/backtest" 
          icon={<Target className="h-5 w-5" />} 
          title="Backtest (Baseline)" 
          color="orange"
        />
        <QuickAccessCard 
          href="/bist100" 
          icon={<Activity className="h-5 w-5" />} 
          title="BIST100" 
          color="indigo"
        />
      </div>

      <MarketOverview />

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
        <div className="lg:col-span-2 space-y-6">
          <StockList />
          
          {/* Özellik Kartları */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <FeatureCard
              href="/scanner"
              icon={<Search className="h-6 w-6 text-green-600" />}
              title="Teknik Tarayıcı"
              description="RSI, MACD, Bollinger pozisyonu ve hacim oranı ile deterministik tarama (best-effort)"
              items={['RSI Aralığı', 'MACD Bullish/Bearish', 'Bollinger Pozisyonu']}
            />
            <FeatureCard
              href="/ai-analysis"
              icon={<Brain className="h-6 w-6 text-pink-600" />}
              title="AI Analiz"
              description="Piyasa özeti + hisse için model çıktısı (best-effort)"
              items={['Piyasa Özeti', 'Fiyat Tahmini', 'Model Çıktısı (Best-effort)']}
            />
            <FeatureCard
              href="/profiles"
              icon={<Building2 className="h-6 w-6 text-blue-600" />}
              title="Hisse Profilleri"
              description="API'den gelen özet metrikler (best-effort)"
              items={['Fiyat', 'Günlük Değişim', 'Hacim & RSI (varsa)']}
            />
            <FeatureCard
              href="/news"
              icon={<Newspaper className="h-6 w-6 text-amber-600" />}
              title="Haberler"
              description="Google News RSS (best-effort). Sentiment varsa gösterilir; yoksa boş bırakılır"
              items={['Hisse Haberleri', 'Kaynak Filtreleme', 'Sentiment: varsa']}
            />
          </div>
        </div>
        
        <div className="space-y-6">
          <TopMLPredictions />
          <TopMovers />
          
          {/* ML Modelleri Bilgi Kartı */}
          <div className="bg-gradient-to-br from-purple-50 to-blue-50 rounded-lg p-4 border border-purple-200">
            <h3 className="font-semibold text-gray-900 mb-3 flex items-center gap-2">
              <Zap className="h-5 w-5 text-purple-600" />
              ML Model Seçenekleri
            </h3>
            <div className="space-y-2 text-sm">
              <div className="flex items-center justify-between">
                <span className="text-gray-600">XGBoost</span>
                <span className="text-green-600 font-medium">Kullanımda</span>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-gray-600">LightGBM</span>
                <span className="text-green-600 font-medium">Kullanımda</span>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-gray-600">RandomForest</span>
                <span className="text-green-600 font-medium">Kullanımda</span>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-gray-600">Ensemble (3 Model)</span>
                <span className="text-purple-600 font-medium">Varsayılan</span>
              </div>
            </div>
            <Link 
              href="/ml-scan" 
              className="mt-3 block text-center text-sm text-purple-600 hover:text-purple-800 font-medium"
            >
              ML Tarama Yap →
            </Link>
          </div>
        </div>
      </div>
    </div>
  )
}

function QuickAccessCard({ 
  href, 
  icon, 
  title, 
  color 
}: { 
  href: string
  icon: React.ReactNode
  title: string
  color: string
}) {
  const colorClasses: Record<string, string> = {
    blue: 'bg-blue-50 text-blue-600 hover:bg-blue-100 border-blue-200',
    purple: 'bg-purple-50 text-purple-600 hover:bg-purple-100 border-purple-200',
    green: 'bg-green-50 text-green-600 hover:bg-green-100 border-green-200',
    pink: 'bg-pink-50 text-pink-600 hover:bg-pink-100 border-pink-200',
    orange: 'bg-orange-50 text-orange-600 hover:bg-orange-100 border-orange-200',
    indigo: 'bg-indigo-50 text-indigo-600 hover:bg-indigo-100 border-indigo-200',
  }
  
  return (
    <Link 
      href={href}
      className={`flex flex-col items-center justify-center p-3 rounded-lg border transition-colors ${colorClasses[color]}`}
    >
      {icon}
      <span className="mt-1 text-xs font-medium text-gray-700">{title}</span>
    </Link>
  )
}

function FeatureCard({ 
  href, 
  icon, 
  title, 
  description, 
  items 
}: { 
  href: string
  icon: React.ReactNode
  title: string
  description: string
  items: string[]
}) {
  return (
    <Link 
      href={href}
      className="block bg-white rounded-lg border border-gray-200 p-4 hover:shadow-md hover:border-gray-300 transition-all group"
    >
      <div className="flex items-start gap-3">
        <div className="flex-shrink-0 p-2 bg-gray-50 rounded-lg group-hover:bg-gray-100">
          {icon}
        </div>
        <div className="flex-1 min-w-0">
          <h3 className="font-semibold text-gray-900 flex items-center gap-2">
            {title}
            <ArrowRight className="h-4 w-4 text-gray-400 group-hover:text-gray-600 group-hover:translate-x-1 transition-transform" />
          </h3>
          <p className="text-sm text-gray-500 mt-1">{description}</p>
          <div className="flex flex-wrap gap-1 mt-2">
            {items.map((item, i) => (
              <span key={i} className="text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded">
                {item}
              </span>
            ))}
          </div>
        </div>
      </div>
    </Link>
  )
}