'use client';

import React, { useEffect, useState } from 'react';
import Link from 'next/link';
import { ShieldCheck, Radio, ArrowRight } from 'lucide-react';
import { Navbar } from '../../components/Navbar';
import { getCurrentUser } from '../../lib/api';

/** Ops gateway — Admin / Scorer entry (Phase 1). Customer home lives at `/`. */
export default function OpsGateway() {
  const [user, setUser] = useState<any>(null);
  useEffect(() => setUser(getCurrentUser()), []);

  return (
    <div className="flex min-h-[100dvh] flex-col bg-[#090a0f]">
      <Navbar />
      <div className="mx-auto flex w-full max-w-5xl flex-1 flex-col items-center justify-center p-6">
        <h1 className="text-center text-4xl font-extrabold tracking-tight text-white">
          MY<span className="text-emerald-400">11s</span> Operations
        </h1>
        <p className="mt-2 max-w-md text-center text-sm text-zinc-400">
          Admin panel and scorer console. Players use the{' '}
          <Link href="/" className="text-emerald-400 underline">
            customer site
          </Link>
          .
        </p>
        <div className="mt-10 grid w-full max-w-3xl grid-cols-1 gap-6 md:grid-cols-2">
          <Link
            href="/admin"
            className="group rounded-2xl border border-zinc-800 bg-zinc-900/80 p-7 hover:border-emerald-500/50"
          >
            <ShieldCheck className="mb-4 h-6 w-6 text-emerald-400" />
            <h2 className="text-xl font-bold text-white">Admin Panel</h2>
            <p className="mt-2 text-sm text-zinc-400">Matches, contests, KYC, wallet adjustments.</p>
            <span className="mt-4 inline-flex items-center gap-1 text-sm font-semibold text-emerald-400">
              Enter <ArrowRight className="h-4 w-4" />
            </span>
          </Link>
          <Link
            href="/scorer"
            className="group rounded-2xl border border-zinc-800 bg-zinc-900/80 p-7 hover:border-amber-500/50"
          >
            <Radio className="mb-4 h-6 w-6 text-amber-400" />
            <h2 className="text-xl font-bold text-white">Scorer Panel</h2>
            <p className="mt-2 text-sm text-zinc-400">Live ball-by-ball scoring console.</p>
            <span className="mt-4 inline-flex items-center gap-1 text-sm font-semibold text-amber-400">
              Enter <ArrowRight className="h-4 w-4" />
            </span>
          </Link>
        </div>
        {!user && (
          <Link href="/ops/login" className="mt-8 text-xs text-zinc-500 underline">
            Staff sign in
          </Link>
        )}
      </div>
    </div>
  );
}