'use client';

import React, { useEffect, useState } from 'react';
import { SiteHeader } from '../../components/SiteHeader';
import { BottomNav } from '../../components/BottomNav';
import { MaintenanceScreen } from '../../components/MaintenanceScreen';
import { RequireLogin } from '../../components/RequireLogin';
import { getCurrentUser } from '../../lib/api';
import { getPublicConfig } from '../../lib/publicConfig';
import Link from 'next/link';

const MAINT_CACHE_KEY = 'my11s_maint_v1';

function readMaintCache(): { enabled: boolean; message: string } | null {
  if (typeof window === 'undefined') return null;
  try {
    const raw = sessionStorage.getItem(MAINT_CACHE_KEY);
    if (!raw) return null;
    const parsed = JSON.parse(raw);
    if (Date.now() - (parsed.ts || 0) > 60_000) return null;
    return { enabled: !!parsed.enabled, message: parsed.message || '' };
  } catch {
    return null;
  }
}

function writeMaintCache(enabled: boolean, message: string) {
  try {
    sessionStorage.setItem(
      MAINT_CACHE_KEY,
      JSON.stringify({ enabled, message, ts: Date.now() })
    );
  } catch {
    /* ignore */
  }
}

/** Render shell immediately — never block navigation on config fetch. */
export default function SiteLayout({ children }: { children: React.ReactNode }) {
  const [maintenance, setMaintenance] = useState<{ enabled: boolean; message: string }>(() => {
    const cached = readMaintCache();
    return cached || { enabled: false, message: '' };
  });

  useEffect(() => {
    let cancelled = false;
    getPublicConfig()
      .then((res) => {
        if (cancelled) return;
        const m = res.data?.maintenance;
        const user = getCurrentUser();
        const isStaff = user && ['SUPER_ADMIN', 'ADMIN', 'SCORER'].includes(user.role);
        const enabled = !!(m?.enabled && !isStaff);
        const message = m?.message || 'Under maintenance.';
        writeMaintCache(enabled, message);
        setMaintenance({ enabled, message });
      })
      .catch(() => {
        if (!cancelled) {
          writeMaintCache(false, '');
          setMaintenance({ enabled: false, message: '' });
        }
      });
    return () => {
      cancelled = true;
    };
  }, []);

  if (maintenance.enabled) {
    return <MaintenanceScreen message={maintenance.message} />;
  }

  return (
    <RequireLogin>
      <div className="app-shell flex min-h-[100dvh] flex-col">
        <SiteHeader />
        <main className="mx-auto w-full max-w-app flex-1 px-3 pb-nav-clear pt-3 sm:px-4 sm:pt-4 md:max-w-app-lg md:pb-8 lg:px-5">
          {children}
        </main>
        <footer className="hidden border-t border-d11-line/80 bg-white/80 py-6 text-center text-xs text-d11-muted backdrop-blur md:block">
          <div className="mx-auto flex max-w-app-lg flex-wrap items-center justify-center gap-5 px-4">
            <Link href="/rules" className="font-semibold transition hover:text-d11-red">
              How to Play
            </Link>
            <Link href="/terms" className="font-semibold transition hover:text-d11-red">
              Terms
            </Link>
            <Link href="/fantasy/rankings" className="font-semibold transition hover:text-d11-red">
              Leaderboard
            </Link>
            <span className="font-display font-semibold text-d11-ink/70">
              © {new Date().getFullYear()} MY11s
            </span>
          </div>
        </footer>
        <BottomNav />
      </div>
    </RequireLogin>
  );
}