import {
  mdiDatabaseOutline,
  mdiGamepadSquareOutline,
  mdiPlayCircleOutline,
  mdiShieldCheckOutline,
  mdiTimerOutline,
  mdiViewDashboardOutline,
} from '@mdi/js';
import Head from 'next/head';
import Link from 'next/link';
import React from 'react';
import type { ReactElement } from 'react';
import BaseButton from '../components/BaseButton';
import BaseIcon from '../components/BaseIcon';
import CardBox from '../components/CardBox';
import { getPageTitle } from '../config';
import LayoutGuest from '../layouts/Guest';

const heroCards = [
  {
    slot: 'A',
    title: 'Blue Zenith',
    subtitle: 'xi · mapped by Monstrata',
    image:
      'https://assets.ppy.sh/beatmaps/874923/covers/raw.jpg',
  },
  {
    slot: 'B',
    title: 'Kyouran Hey Kids!!',
    subtitle: 'THE ORAL CIGARETTES · mapped by Sotarks',
    image:
      'https://assets.ppy.sh/beatmaps/102120/covers/raw.jpg',
  },
];

const featureCards = [
  {
    icon: mdiShieldCheckOutline,
    title: 'Server-hidden answers',
    body: 'Playcounts, mapper totals, artist totals, and the mixed-mode selection stay hidden until the answer is locked in.',
  },
  {
    icon: mdiTimerOutline,
    title: 'Five to eight second rounds',
    body: 'Each guess resolves immediately. A timeout costs one life and the next card pair rolls in without loading screens.',
  },
  {
    icon: mdiDatabaseOutline,
    title: 'Ranked + loved only',
    body: 'The pool is scoped to osu!standard with precomputed mapper and artist aggregates for fast constant-time round evaluation.',
  },
];

const modeCards = [
  {
    label: 'Beatmap',
    helper: 'Compare raw beatmap playcount.',
  },
  {
    label: 'Mapper',
    helper: 'Show mapper avatar + banner only, then reveal total mapper plays.',
  },
  {
    label: 'Artist',
    helper: 'Show artist image + name only, then reveal total artist plays.',
  },
  {
    label: 'Mixed',
    helper: 'The server chooses the round type each time and reveals it only after the guess.',
  },
];

export default function Starter() {
  return (
    <>
      <Head>
        <title>{getPageTitle('Osu Higher Lower')}</title>
      </Head>

      <div className="min-h-screen bg-[#0b0d12] text-white">
        <div className="mx-auto flex min-h-screen max-w-7xl flex-col px-6 py-6 lg:px-10">
          <header className="flex items-center justify-between gap-4 border-b border-white/10 pb-5">
            <Link className="flex items-center gap-3" href="/">
              <span className="flex h-11 w-11 items-center justify-center rounded-2xl border border-white/10 bg-white/5">
                <BaseIcon className="text-[#ff66aa]" path={mdiGamepadSquareOutline} size={20} />
              </span>
              <div>
                <p className="text-xs uppercase tracking-[0.22em] text-white/45">
                  Osu Higher Lower
                </p>
                <p className="text-sm text-white/70">Fast browser guessing game</p>
              </div>
            </Link>

            <div className="flex flex-wrap items-center gap-3">
              <BaseButton color="whiteDark" href="/login" label="Login" />
              <BaseButton
                color="whiteDark"
                href="/dashboard"
                icon={mdiViewDashboardOutline}
                label="Admin interface"
              />
            </div>
          </header>

          <main className="flex-1 py-10 lg:py-14">
            <section className="grid items-center gap-10 lg:grid-cols-[1.05fr_0.95fr]">
              <div>
                <p className="text-sm uppercase tracking-[0.28em] text-white/45">
                  osu!standard · ranked + loved
                </p>
                <h1 className="mt-4 max-w-3xl text-5xl font-semibold tracking-tight text-white md:text-6xl">
                  Guess the higher hidden osu! stat and survive the run.
                </h1>
                <p className="mt-5 max-w-2xl text-lg leading-8 text-white/68">
                  Two cards. Two lives. Five to eight seconds. Beatmap playcount, mapper
                  total plays, artist total plays — all decided server-side for a fast,
                  minimal, anti-cheat-first competitive loop.
                </p>

                <div className="mt-8 flex flex-wrap items-center gap-3">
                  <BaseButton
                    color="info"
                    href="/play"
                    icon={mdiPlayCircleOutline}
                    label="Open the arena"
                  />
                  <BaseButton
                    color="whiteDark"
                    href="/dashboard"
                    icon={mdiViewDashboardOutline}
                    label="Admin interface"
                  />
                </div>

                <div className="mt-10 grid gap-4 sm:grid-cols-3">
                  <div className="rounded-[28px] border border-white/10 bg-white/5 px-4 py-4">
                    <p className="text-3xl font-semibold text-white">2</p>
                    <p className="mt-1 text-sm text-white/55">lives per run</p>
                  </div>
                  <div className="rounded-[28px] border border-white/10 bg-white/5 px-4 py-4">
                    <p className="text-3xl font-semibold text-white">8s / 5s</p>
                    <p className="mt-1 text-sm text-white/55">normal and insane timers</p>
                  </div>
                  <div className="rounded-[28px] border border-white/10 bg-white/5 px-4 py-4">
                    <p className="text-3xl font-semibold text-white">O(1)</p>
                    <p className="mt-1 text-sm text-white/55">gameplay queries from precomputed totals</p>
                  </div>
                </div>
              </div>

              <div className="grid gap-4 lg:grid-cols-2">
                {heroCards.map((card) => (
                  <div
                    className="relative min-h-[360px] overflow-hidden rounded-[32px] border border-white/10 bg-[#131722]"
                    key={card.slot}
                  >
                    <div
                      className="absolute inset-0 bg-cover bg-center"
                      style={{ backgroundImage: `url(${card.image})` }}
                    />
                    <div className="absolute inset-0 bg-gradient-to-b from-black/25 via-black/40 to-black/90" />
                    <div className="relative flex h-full flex-col justify-between p-5">
                      <div className="rounded-full border border-white/15 bg-black/35 px-3 py-1 text-xs font-semibold uppercase tracking-[0.22em] text-white/80">
                        {card.slot}
                      </div>
                      <div>
                        <p className="max-w-[12ch] text-3xl font-semibold leading-tight text-white">
                          {card.title}
                        </p>
                        <p className="mt-3 text-sm leading-6 text-white/72">
                          {card.subtitle}
                        </p>
                        <div className="mt-4 rounded-2xl border border-white/10 bg-black/25 px-4 py-3 text-sm text-white/68 backdrop-blur-sm">
                          Hidden values stay off the client until the guess is submitted.
                        </div>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </section>

            <section className="mt-12 grid gap-4 lg:grid-cols-3">
              {featureCards.map((feature) => (
                <CardBox
                  className="border border-white/10 bg-[#10141d] text-white"
                  key={feature.title}
                >
                  <div className="flex items-start gap-4">
                    <span className="mt-1 flex h-11 w-11 items-center justify-center rounded-2xl border border-white/10 bg-white/5">
                      <BaseIcon className="text-white/75" path={feature.icon} size={18} />
                    </span>
                    <div>
                      <p className="text-lg font-semibold text-white">{feature.title}</p>
                      <p className="mt-2 text-sm leading-7 text-white/62">{feature.body}</p>
                    </div>
                  </div>
                </CardBox>
              ))}
            </section>

            <section className="mt-12 grid gap-6 lg:grid-cols-[1.2fr_0.8fr]">
              <CardBox className="border border-white/10 bg-[#10141d] text-white">
                <p className="text-sm uppercase tracking-[0.22em] text-white/45">
                  Round formats
                </p>
                <div className="mt-5 grid gap-4 md:grid-cols-2">
                  {modeCards.map((mode) => (
                    <div
                      className="rounded-[28px] border border-white/10 bg-white/5 px-4 py-4"
                      key={mode.label}
                    >
                      <p className="text-xl font-semibold text-white">{mode.label}</p>
                      <p className="mt-2 text-sm leading-7 text-white/62">{mode.helper}</p>
                    </div>
                  ))}
                </div>
              </CardBox>

              <CardBox className="border border-white/10 bg-[#10141d] text-white">
                <p className="text-sm uppercase tracking-[0.22em] text-white/45">
                  Included admin shell
                </p>
                <p className="mt-4 text-2xl font-semibold text-white">
                  Manage beatmaps, aggregates, sync jobs, sessions, and leaderboards from the built-in admin side.
                </p>
                <p className="mt-4 text-sm leading-7 text-white/62">
                  The public page keeps the login link intact and gives you a direct path to the admin interface for data ops and QA.
                </p>
                <div className="mt-6 flex flex-wrap gap-3">
                  <BaseButton
                    color="whiteDark"
                    href="/login"
                    label="Login"
                  />
                  <BaseButton
                    color="info"
                    href="/dashboard"
                    icon={mdiViewDashboardOutline}
                    label="Admin interface"
                  />
                </div>
              </CardBox>
            </section>
          </main>

          <footer className="flex flex-col gap-4 border-t border-white/10 pt-5 text-sm text-white/45 md:flex-row md:items-center md:justify-between">
            <p>© 2026 Osu Higher Lower. Clean rounds, hidden answers, no extra fluff.</p>
            <div className="flex flex-wrap items-center gap-4">
              <Link href="/privacy-policy">Privacy Policy</Link>
              <Link href="/login">Login</Link>
              <Link href="/dashboard">Admin interface</Link>
            </div>
          </footer>
        </div>
      </div>
    </>
  );
}

Starter.getLayout = function getLayout(page: ReactElement) {
  return <LayoutGuest>{page}</LayoutGuest>;
};
