import React, { useMemo, useState } from 'react';
import { Head } from '@inertiajs/react';

import AppAdBanner from '../Components/Ck44/AppAdBanner';
import TopBar from '../Components/Ck44/TopBar';
import Sidebar from '../Components/Ck44/Sidebar';
import ProfileMenu from '../Components/Ck44/ProfileMenu';
import BottomNav from '../Components/Ck44/BottomNav';
import FloatingSocialStack from '../Components/Ck44/FloatingSocialStack';
import SpinFloatingButton from '@/Components/Ck44/SpinFloatingButton';

export default function Ck44Layout({ auth, children }) {
  const guest = !auth?.user;
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const [profileOpen, setProfileOpen] = useState(false);

  const pageBackground = useMemo(
    () => ({
      minHeight: '100vh',
      background:
        'linear-gradient(rgba(1, 85, 91, 0.92), rgba(1, 85, 91, 0.96)), url("https://images.unsplash.com/photo-1540747913346-19e32dc3e97e?q=80&w=1600&auto=format&fit=crop") center/cover no-repeat fixed',
    }),
    []
  );

  return (
    <>
      <Head title="CK444.com" />

      <style>{`
        .sidebar-scroll {
          -ms-overflow-style: none;
          scrollbar-width: none;
          overscroll-behavior: contain;
          -webkit-overflow-scrolling: touch;
        }

        .sidebar-scroll::-webkit-scrollbar {
          width: 0;
          height: 0;
          display: none;
        }

        .bottomnav-shell {
          position: relative;
          overflow: visible;
          border-radius: 26px 26px 18px 18px;
          border: 1.5px solid #1fe7df;
          background:
            linear-gradient(180deg, rgba(7, 110, 108, 0.98) 0%, rgba(0, 79, 78, 0.98) 36%, rgba(0, 61, 62, 0.98) 100%);
          box-shadow:
            0 -6px 18px rgba(0, 0, 0, 0.28),
            0 10px 20px rgba(0, 0, 0, 0.22),
            inset 0 1px 0 rgba(120, 255, 248, 0.22);
          padding: 8px 8px 10px;
          backdrop-filter: blur(8px);
        }

        .bottomnav-topline {
          position: absolute;
          left: 10px;
          right: 10px;
          top: 0;
          height: 3px;
          border-radius: 999px;
          background: linear-gradient(90deg, #25f6ee 0%, #7bfff8 50%, #25f6ee 100%);
          box-shadow: 0 0 10px rgba(37, 246, 238, 0.7);
        }

        .bottomnav-item-wrap {
          padding-top: 10px;
        }

        .bottomnav-center-wrap {
          margin-top: -26px;
        }

        .bottomnav-icon-holder {
          display: grid;
          place-items: center;
          width: 42px;
          height: 42px;
        }

        .bottomnav-center-button {
          display: grid;
          place-items: center;
          width: 58px;
          height: 58px;
          border-radius: 999px;
          border: 3px solid #0a6b69;
          background:
            radial-gradient(circle at 30% 28%, #66fff1 0%, #2ff0dc 45%, #14c7bb 70%, #0d8d89 100%);
          box-shadow:
            0 8px 18px rgba(0, 0, 0, 0.28),
            0 0 0 4px rgba(0, 72, 72, 0.9),
            inset 0 2px 0 rgba(255, 255, 255, 0.28);
        }

        .bottomnav-badge {
          position: absolute;
          top: 2px;
          right: 16px;
          display: grid;
          place-items: center;
          min-width: 18px;
          height: 18px;
          padding: 0 5px;
          border-radius: 999px;
          background: linear-gradient(180deg, #ff4e4e 0%, #ea1c24 100%);
          color: white;
          font-size: 10px;
          font-weight: 800;
          line-height: 1;
          box-shadow:
            0 2px 8px rgba(0, 0, 0, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.35);
        }

        @media (min-width: 640px) {
          .bottomnav-shell {
            border-radius: 32px 32px 22px 22px;
            padding: 10px 14px 12px;
          }

          .bottomnav-center-wrap {
            margin-top: -30px;
          }

          .bottomnav-center-button {
            width: 66px;
            height: 66px;
          }

          .bottomnav-icon-holder {
            width: 48px;
            height: 48px;
          }

          .bottomnav-badge {
            top: 4px;
            right: 20px;
          }
        }
      `}</style>

      <div style={pageBackground} className="w-full text-white">
        <header className="fixed left-0 right-0 top-0 z-30 w-full">
          <AppAdBanner />
          <TopBar
            guest={guest}
            onMenuClick={() => {
              setSidebarOpen(true);
              setProfileOpen(false);
            }}
            onProfileClick={() => {
              setProfileOpen((prev) => !prev);
              setSidebarOpen(false);
            }}
          />
        </header>

        <Sidebar open={sidebarOpen} onClose={() => setSidebarOpen(false)} />
        <ProfileMenu open={profileOpen} onClose={() => setProfileOpen(false)} />

        <main className="w-full px- pb-32 pt-[132px] sm:px-6 sm:pb-52 sm:pt-[235px]">
          {children}
        </main>
        <FloatingSocialStack />
        <SpinFloatingButton />

        <BottomNav />
      </div>
    </>
  );
}