import { useEffect, useState } from 'react';
import { Link, useParams } from 'react-router-dom';
import { api } from '../api';
import { useAuth } from '../store/AuthContext';
import { tl, tlNum, parseCents, centsToInput } from '../lib/format';

import Slots from './games/Slots';
import Blackjack from './games/Blackjack';
import Roulette from './games/Roulette';
import Baccarat from './games/Baccarat';
import Crash from './games/Crash';

const COMPONENTS = {
  SLOTS: Slots,
  BLACKJACK: Blackjack,
  ROULETTE: Roulette,
  BACCARAT: Baccarat,
  CRASH: Crash,
};

const SLUG_LABELS = {
  SLOTS: 'Slot',
  BLACKJACK: 'Kart',
  ROULETTE: 'Masa',
  BACCARAT: 'Masa',
  CRASH: 'Crash',
};

export default function GamePage() {
  const { slug } = useParams();
  const { balance, locked, applyBalance } = useAuth();

  const [game, setGame] = useState(null);
  const [notFound, setNotFound] = useState(false);
  const [loading, setLoading] = useState(true);

  const [betInput, setBetInput] = useState('');
  const [betError, setBetError] = useState(null);
  const [lastResult, setLastResult] = useState(null);

  useEffect(() => {
    setLoading(true);
    setNotFound(false);
    setGame(null);
    setBetInput('');
    setBetError(null);
    setLastResult(null);
    api(`/games/${slug}`)
      .then((d) => {
        setGame(d.game);
        setBetInput(centsToInput(d.game.minBet));
      })
      .catch((e) => {
        if (e.status === 404) setNotFound(true);
        else setBetError(e.message);
      })
      .finally(() => setLoading(false));
  }, [slug]);

  // bahis girdisini cent'e çevir — ayrıca her an doğru değeri taşır
  const betCents = game ? parseCents(betInput) : 0;

  // hazır çipler: mevcut bahsin katları (min bahisten hesaplanır)
  const chips =
    game && balance != null
      ? [1, 2, 5, 10, 25].map((m) => {
          const base = Math.max(game.minBet, betCents || game.minBet);
          const raw = Math.round((base * m) / 100) * 100;
          return Math.min(raw, game.maxBet, balance - (locked || 0));
        })
      : [];

  function applyChip(amountCents) {
    if (amountCents <= 0) return;
    setBetInput(centsToInput(amountCents));
  }

  // oyun bileşeninden gelen sonuç → üstteki mesaj kutusu
  function handleResult(r) {
    if (r && r.title) setLastResult(r);
  }

  function gameColor() {
    return (game && game.color) || '#d4af37';
  }

  const Game = game ? COMPONENTS[game.slug] || null : null;

  // ─── 404 ───
  if (notFound) {
    return (
      <div className="container">
        <div className="empty" style={{ padding: '90px 20px' }}>
          <span className="empty-icon">🎲</span>
          <h2 style={{ margin: '0 0 8px' }}>Oyun bulunamadı</h2>
          <p className="muted">Aradığın oyun katalogda yok ya da kaldırıldı.</p>
          <Link to="/games" className="btn btn-gold" style={{ marginTop: 18 }}>
            ← Oyunlara Dön
          </Link>
        </div>
      </div>
    );
  }

  if (loading || !game) {
    return (
      <div className="container">
        <div className="skeleton" style={{ height: 300 }} />
      </div>
    );
  }

  const available = balance != null ? Math.max(0, balance - (locked || 0)) : 0;

  return (
    <div className="container">
      {/* Başlık */}
      <header className="game-head glass" style={{ ['--gcolor']: gameColor() }}>
        <div className="game-head-glow" style={{ background: `radial-gradient(circle at 30% -30%, ${gameColor()}55, transparent 60%)` }} />
        <div className="game-head-main">
          <span className="game-head-icon">{game.icon}</span>
          <div>
            <h1 className="game-head-title">{game.title}</h1>
            <p className="game-head-sub">
              {game.tagline || game.subtitle}
              <span className="chip game-head-cat" style={{ marginLeft: 10 }}>
                {SLUG_LABELS[game.slug] || game.category}
              </span>
            </p>
          </div>
        </div>
        <div className="game-head-meta">
          <span className="game-meta-item">
            <b className="mono">{tl(game.minBet)}</b>
            <span>Min. Bahis</span>
          </span>
          <span className="game-meta-item">
            <b className="mono">{tl(game.maxBet)}</b>
            <span>Maks. Bahis</span>
          </span>
          <span className="game-meta-item">
            <b className="mono">{balance != null ? tl(available) : '—'}</b>
            <span>Kullanılabilir Bakiye</span>
          </span>
        </div>
      </header>

      <style>{`
        .game-head{position:relative;overflow:hidden;padding:26px 26px 20px;margin-bottom:20px;border-radius:var(--radius-lg);}
        .game-head-glow{position:absolute;inset:0;pointer-events:none;}
        .game-head-main{position:relative;display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
        .game-head-icon{font-size:54px;line-height:1;filter:drop-shadow(0 6px 18px rgba(0,0,0,.5));}
        .game-head-title{margin:0 0 2px;font-size:28px;font-weight:800;letter-spacing:-.3px;}
        .game-head-sub{margin:0;color:var(--text-dim);display:flex;align-items:center;flex-wrap:wrap;}
        .game-head-cat{margin-left:10px;}
        .game-head-meta{position:relative;display:flex;gap:26px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid var(--border);}
        .game-meta-item{display:flex;flex-direction:column;gap:1px;}
        .game-meta-item b{font-size:18px;color:var(--gold-2,#f0d674);}
        .game-meta-item span{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--text-faint);}

        .game-bet{position:relative;padding:22px 26px;margin-bottom:20px;border-radius:var(--radius-lg);}
        .game-bet-label{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--text-dim);margin:0 0 12px;font-weight:700;}
        .game-bet-row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;}
        .game-bet-input-wrap{flex:1 1 200px;min-width:180px;}
        .game-bet-input{position:relative;}
        .game-bet-input .input{padding-right:40px;font-size:19px;font-weight:700;height:46px;}
        .game-bet-currency{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-weight:800;color:var(--gold-2,#f0d674);pointer-events:none;}
        .game-chips{display:flex;gap:8px;flex-wrap:wrap;}
        .game-chip{width:46px;height:46px;border-radius:50%;border:2px solid var(--gold-line,#d4af3755);color:var(--gold-2,#f0d674);
          background:radial-gradient(circle at 35% 30%,rgba(212,175,55,.18),rgba(212,175,55,.04));font-weight:800;
          display:flex;align-items:center;justify-content:center;transition:all .15s;font-size:13px;}
        .game-chip:hover{border-color:var(--gold,#d4af37);box-shadow:0 0 12px rgba(212,175,55,.45);transform:translateY(-2px);}
        .game-chip:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none;}

        .game-result-box{margin:0 auto 20px;padding:16px 20px;border-radius:14px;text-align:center;font-weight:700;
          border:1px solid var(--border);max-width:640px;}
        .game-result-box .r-title{font-size:20px;margin:0 0 2px;}
        .game-result-box .r-detail{font-size:14px;font-weight:500;opacity:.85;margin:0;}
      `}</style>

      {/* Sonuç mesajı */}
      {lastResult && (
        <div
          className="game-result-box anim-pop"
          style={{
            background:
              lastResult.kind === 'win'
                ? 'rgba(52,211,153,.12)'
                : lastResult.kind === 'loss'
                  ? 'rgba(248,113,113,.12)'
                  : 'rgba(56,189,248,.1)',
            borderColor:
              lastResult.kind === 'win'
                ? 'rgba(52,211,153,.45)'
                : lastResult.kind === 'loss'
                  ? 'rgba(248,113,113,.45)'
                  : 'rgba(56,189,248,.35)',
            color:
              lastResult.kind === 'win'
                ? '#6ee7b7'
                : lastResult.kind === 'loss'
                  ? '#fca5a5'
                  : '#7dd3fc',
          }}
        >
          <p className="r-title">{lastResult.title}</p>
          {lastResult.detail && <p className="r-detail">{lastResult.detail}</p>}
        </div>
      )}

      {/* Bahis paneli */}
      <section className="game-bet glass" style={{ ['--gcolor']: gameColor() }}>
        <p className="game-bet-label">💰 Bahis Tutarı</p>
        <div className="game-bet-row">
          <div className="game-bet-input-wrap">
            <div className="game-bet-input">
              <input
                className="input"
                inputMode="decimal"
                value={betInput}
                placeholder={tlNum(game.minBet)}
                onChange={(e) => setBetInput(e.target.value)}
              />
              <span className="game-bet-currency">₺</span>
            </div>
          </div>
          <div className="game-chips">
            {chips.map((c, i) => (
              <button
                key={`${i}-${c}`}
                className="game-chip"
                disabled={c <= 0}
                onClick={() => applyChip(c)}
                title={`${tl(c)} bahis`}
              >
                ×{[1, 2, 5, 10, 25][i]}
              </button>
            ))}
          </div>
          {balance != null && balance < game.minBet && (
            <Link to="/account" className="btn btn-ghost-gold btn-sm" style={{ marginLeft: 'auto' }}>
              Bakiye Yükle →
            </Link>
          )}
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 10, flexWrap: 'wrap', gap: 8 }}>
          <span className="tiny faint">
            Min {tl(game.minBet)} · Maks {tl(game.maxBet)} · Kullanılabilir {tl(available)}
          </span>
          {(betCents > 0 && betCents < game.minBet) || (betCents > game.maxBet) ? (
            <span className="tiny" style={{ color: '#fca5a5' }}>
              Bahis aralık dışı (min {tlNum(game.minBet)} – maks {tlNum(game.maxBet)})
            </span>
          ) : (
            <span className="tiny faint" style={{ color: '#6ee7b7' }}>
              Bahis: {tl(betCents)}
            </span>
          )}
        </div>
        {betError && <div className="alert alert-error" style={{ marginTop: 12 }}>{betError}</div>}
      </section>

      {/* Oyun alanı */}
      <section className="card-pad glass" style={{ ['--gcolor']: gameColor() }}>
        {Game ? (
          <Game
            key={game.slug}
            betCents={betCents}
            game={game}
            balance={available}
            onResult={handleResult}
          />
        ) : (
          <div className="empty">
            <span className="empty-icon">🛠️</span>
            Bu oyun henüz eklenmedi.
          </div>
        )}
      </section>
    </div>
  );
}