'use client';

import React from 'react';
import Link from 'next/link';
import { ArrowLeft } from 'lucide-react';

export function AuthShell({
  children,
  title,
  subtitle,
}: {
  children: React.ReactNode;
  title: string;
  subtitle: string;
}) {
  return (
    <div className="relative flex min-h-[100dvh] flex-col overflow-hidden bg-[#0f0f12]">
      <div
        className="pointer-events-none absolute inset-0"
        aria-hidden
        style={{
          background:
            'radial-gradient(900px 480px at 15% -10%, rgba(228,30,43,0.5), transparent 55%), radial-gradient(700px 400px at 100% 10%, rgba(255,140,60,0.16), transparent 50%), linear-gradient(180deg, #1a1214 0%, #0f0f12 40%, #f4f5f7 40%)',
        }}
      />
      <div
        className="pointer-events-none absolute inset-x-0 top-0 h-[40%] opacity-30"
        aria-hidden
        style={{
          backgroundImage: 'radial-gradient(rgba(255,255,255,0.12) 1px, transparent 1px)',
          backgroundSize: '20px 20px',
        }}
      />

      <div className="relative z-10 mx-auto flex w-full max-w-md flex-1 flex-col px-5 pb-8 pt-[max(1.25rem,env(safe-area-inset-top))] sm:px-6">
        <div className="flex items-center justify-between">
          <Link
            href="/"
            className="inline-flex h-10 w-10 items-center justify-center rounded-full bg-white/10 text-white ring-1 ring-white/15 backdrop-blur transition hover:bg-white/20 active:scale-95"
            aria-label="Back to home"
          >
            <ArrowLeft className="h-5 w-5" />
          </Link>
          <Link href="/" className="flex items-center gap-2">
            <span className="flex h-8 w-8 items-center justify-center rounded-xl bg-white font-display text-sm font-extrabold text-d11-red">
              11
            </span>
            <span className="font-display text-lg font-extrabold text-white">MY11s</span>
          </Link>
          <span className="w-10" aria-hidden />
        </div>

        <div className="mt-8 text-white">
          <p className="text-[11px] font-bold uppercase tracking-[0.18em] text-white/55">Fantasy cricket</p>
          <h1 className="mt-2 font-display text-3xl font-extrabold tracking-tight sm:text-4xl">{title}</h1>
          <p className="mt-2 max-w-sm text-sm leading-relaxed text-white/70">{subtitle}</p>
        </div>

        <div className="mt-8 flex-1">
          <div className="rounded-3xl border border-white/70 bg-white p-5 shadow-[0_24px_60px_rgba(0,0,0,0.22)] sm:p-6">
            {children}
          </div>
          <p className="mt-5 text-center text-[11px] leading-relaxed text-gray-500">
            By continuing you agree to our{' '}
            <Link href="/terms" className="font-semibold text-d11-red hover:underline">
              Terms
            </Link>{' '}
            &{' '}
            <Link href="/rules" className="font-semibold text-d11-red hover:underline">
              Fantasy Rules
            </Link>
            .
          </p>
        </div>
      </div>
    </div>
  );
}

export function AuthField({
  label,
  hint,
  children,
}: {
  label: string;
  hint?: string;
  children: React.ReactNode;
}) {
  return (
    <label className="block">
      <span className="mb-1.5 flex items-center justify-between text-[11px] font-bold uppercase tracking-wide text-gray-500">
        <span>{label}</span>
        {hint && <span className="normal-case tracking-normal text-gray-400">{hint}</span>}
      </span>
      {children}
    </label>
  );
}

export function AuthError({ message }: { message: string }) {
  return (
    <div
      role="alert"
      className="rounded-xl border border-red-200 bg-d11-soft px-3.5 py-3 text-xs font-medium text-red-700"
    >
      {message}
    </div>
  );
}