import { Link, Navigate } from 'react-router-dom';
import { useAuth } from '../AuthContext';

const MODES = [
  {
    to: '/bet/multi',
    title: 'MultiPlayers Case',
    blurb: 'Join the live pot. Bet up to 3 items — chance scales with value. Winner takes all.',
    ready: true,
  },
  {
    to: '/bet/1vx',
    title: '1vX Case',
    blurb: 'Create or join custom rooms. Set player/item limits and min value. Spectate live duels.',
    ready: true,
  },
  {
    to: '/bet/coinflip',
    title: 'Coinflip',
    blurb: 'Classic 1v1 item flip. Coming soon.',
    ready: false,
  },
];

export default function BetHub() {
  const { user, loading } = useAuth();

  if (loading) return <p className="muted">Loading…</p>;
  if (!user) return <Navigate to="/login" replace />;
  if (user.role === 'admin') return <Navigate to="/admin" replace />;

  return (
    <section className="section">
      <div className="section-head">
        <div>
          <h1>Bet Item</h1>
          <p className="muted">Multiplayer item gambling modes.</p>
        </div>
      </div>
      <div className="mode-grid">
        {MODES.map((m) =>
          m.ready ? (
            <Link key={m.to} to={m.to} className="mode-card">
              <h2>{m.title}</h2>
              <p className="muted">{m.blurb}</p>
            </Link>
          ) : (
            <div key={m.to} className="mode-card stub">
              <h2>{m.title}</h2>
              <p className="muted">{m.blurb}</p>
              <span className="badge">Soon</span>
            </div>
          )
        )}
      </div>
    </section>
  );
}