import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { api } from '../api';
import { useAuth } from '../store/AuthContext';
import { NATION_LIST, tl } from '../lib/format';
import GameCard from '../components/GameCard';
import NationCard from '../components/NationCard';

export default function Home() {
  const { user } = useAuth();
  const [games, setGames] = useState([]);
  const [loaded, setLoaded] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    api('/games')
      .then((d) => {
        const list = Array.isArray(d) ? d : d?.games || [];
        setGames(list);
      })
      .catch((e) => setError(e.message))
      .finally(() => setLoaded(true));
  }, []);

  const popular = games.filter((g) => g.popular).slice(0, 6);
  const showcase = popular.length ? popular : games.slice(0, 6);

  return (
    <div className="container">
      {/* HERO */}
      <section className="hero">
        <div className="hero-badge">
          <span className="hero-badge-dot" /> Sorumlu oyun · Bonus yok · 18+
        </div>
        <h1 className="hero-title">
          Dört Ulus'un Gücüyle
          <br />
          <span className="gold-text">Kaderini Oyna</span>
        </h1>
        <p className="hero-sub">
          Su, Toprak, Ateş ve Hava. Rozetlerini topla, ulusun için savaş ve
          <strong> Avatar </strong> ol. Oyun, saf ve dürüst.
        </p>
        <div className="hero-actions">
          <Link to="/games" className="btn btn-gold btn-lg">
            🎰 Oyunları Keşfet
          </Link>
          {!user && (
            <Link to="/register" className="btn btn-ghost-gold btn-lg">
              Hemen Katıl
            </Link>
          )}
        </div>
        <div className="hero-nations stagger">
          {NATION_LIST.map((n, i) => (
            <div key={n.id} className="hero-nation" style={{ ['--ncolor']: n.color }}>
              <span className="hero-nation-icon">{n.icon}</span>
              <span>{n.name}</span>
            </div>
          ))}
        </div>
      </section>

      {/* OYUN VİTRİNİ */}
      <section className="home-section">
        <div className="section-head">
          <div>
            <h2 className="section-title">Öne Çıkan Oyunlar</h2>
            <p className="section-sub">Her bahis cüzdana yansır, her sonuç şeffaftır.</p>
          </div>
          <Link to="/games" className="btn btn-ghost-gold">
            Tüm Oyunlar →
          </Link>
        </div>
        {error && <div className="alert alert-error">Oyunlar yüklenemedi: {error}</div>}
        {!loaded && (
          <div className="game-grid">
            {[1, 2, 3].map((i) => (
              <div key={i} className="skeleton" style={{ height: 240 }} />
            ))}
          </div>
        )}
        <div className="game-grid stagger">
          {showcase.map((g, i) => (
            <GameCard key={g.slug} game={g} index={i} />
          ))}
        </div>
      </section>

      {/* ULUSLAR */}
      <section className="home-section">
        <div className="section-head">
          <div>
            <h2 className="section-title">Dört Ulus</h2>
            <p className="section-sub">Bir ulus seç, rozetlerini topla, Avatar ol.</p>
          </div>
          <Link to="/nations" className="btn btn-ghost-gold">
            Ulusları Keşfet →
          </Link>
        </div>
        <div className="nation-grid">
          {NATION_LIST.map((n, i) => (
            <NationCard key={n.id} nation={n} index={i} />
          ))}
        </div>
      </section>

      {/* ÜYELİK PROGRAMI TEASER */}
      <section className="home-section">
        <div className="membership glass">
          <div className="membership-glow" />
          <div className="membership-icon">👑</div>
          <div className="membership-body">
            <h2 className="section-title" style={{ marginBottom: 8 }}>
              Üyelik Programı: <span className="gold-text">Avatar Yolu</span>
            </h2>
            <p className="section-sub" style={{ marginBottom: 12 }}>
              24 rozet, 4 seviye. Ulusunun tüm rozetlerini tamamlayan oyuncu
              <strong> Avatar </strong> statüsüne ulaşır — özel avatar ve imtiyazlarla.
            </p>
            <div className="membership-stats">
              <div className="mstat">
                <span className="mstat-num">24</span>
                <span className="mstat-label">Rozet</span>
              </div>
              <div className="mstat">
                <span className="mstat-num">4</span>
                <span className="mstat-label">Seviye</span>
              </div>
              <div className="mstat">
                <span className="mstat-num">4</span>
                <span className="mstat-label">Ulus</span>
              </div>
              <div className="mstat">
                <span className="mstat-num">1</span>
                <span className="mstat-label">Avatar</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* GÜVEN / BONUS YOK */}
      <section className="home-section">
        <div className="trust glass">
          <div className="trust-item">
            <span className="trust-icon">🎯</span>
            <h4>Bonus Yok</h4>
            <p className="small muted">Hoşgeldin bonusu, yatırma bonusu yok. Oyun saf ve net.</p>
          </div>
          <div className="trust-item">
            <span className="trust-icon">🛡️</span>
            <h4>Sorumlu Oyun</h4>
            <p className="small muted">Limitlerini belirle, ara ver, kontrol sende.</p>
          </div>
          <div className="trust-item">
            <span className="trust-icon">🔒</span>
            <h4>Şeffaf Bahis</h4>
            <p className="small muted">Her bahis ve ödeme cüzdanında, her sonuç geçmişinde.</p>
          </div>
        </div>
        <div className="age-note">
          <span className="age-badge">18+</span>
          <span className="small faint">
            Bu platform demo/sanal kredi ile çalışır. Gerçek para işlemi yapılmaz.
          </span>
        </div>
      </section>
    </div>
  );
}