'use client';

import { usePathname } from 'next/navigation';
import Header from './header';
import Footer from './footer';
import { useState } from 'react';
import { AuthProvider } from '@/context/AuthContext';
import { Toaster } from 'sonner';
import Dialog from "@/components/ui/dialog";
import { Plus, Megaphone, Share2, ClipboardList, FileCheck } from "lucide-react";
import { useAuth } from "@/context/AuthContext";
import Link from "next/link";
import { Button } from "@/components/ui/button";

export function FloatingServicesButton() {
  const [isServicesOpen, setIsServicesOpen] = useState(false);
  const { isAuthenticated } = useAuth();

  return (
    <>
      <Button
        onClick={() => setIsServicesOpen(true)}
        className="md:hidden fixed bottom-10 left-10 z-[60] rounded-full p-4 bg-primary hover:bg-primary/90 transition-all duration-300 group shadow-2xl flex items-center justify-center cursor-pointer size-14"
        aria-label="Services"
      >
        <Plus className="size-6 transition-transform group-hover:rotate-90 text-white" />
      </Button>

      <Dialog
        open={isServicesOpen}
        onOpenChange={setIsServicesOpen}
        title="خدمات منصة أمتار"
      >
        <div className="flex flex-row flex-nowrap justify-evenly items-center gap-1 md:gap-8 py-4 md:py-6 overflow-x-auto">
          <Link
            href={isAuthenticated ? "/listings" : "/auth/signin"}
            onClick={() => setIsServicesOpen(false)}
            className="flex flex-col items-center justify-center gap-2 md:gap-3 p-1.5 md:p-4 rounded-2xl hover:bg-slate-50 transition-all duration-300 group min-w-[75px] md:min-w-[100px]"
          >
            <div className="p-3 md:p-4 rounded-full bg-primary/10 group-hover:bg-primary group-hover:scale-110 transition-all duration-300 shadow-sm">
              <Share2 className="w-6 h-6 md:w-7 md:h-7 text-primary group-hover:text-white" />
            </div>
            <span className="font-semibold text-[11px] md:text-sm whitespace-nowrap text-center">تسويق</span>
          </Link>

          <Link
            href="/ads"
            onClick={() => setIsServicesOpen(false)}
            className="flex flex-col items-center justify-center gap-2 md:gap-3 p-1.5 md:p-4 rounded-2xl hover:bg-slate-50 transition-all duration-300 group min-w-[75px] md:min-w-[100px]"
          >
            <div className="p-3 md:p-4 rounded-full bg-primary/10 group-hover:bg-primary group-hover:scale-110 transition-all duration-300 shadow-sm">
              <Megaphone className="w-6 h-6 md:w-7 md:h-7 text-primary group-hover:text-white" />
            </div>
            <span className="font-semibold text-[11px] md:text-sm whitespace-nowrap text-center">إعلانات</span>
          </Link>

          <Link
            href={isAuthenticated ? "/property-requests/add" : "/auth/signin"}
            onClick={() => setIsServicesOpen(false)}
            className="flex flex-col items-center justify-center gap-2 md:gap-3 p-1.5 md:p-4 rounded-2xl hover:bg-slate-50 transition-all duration-300 group min-w-[75px] md:min-w-[100px]"
          >
            <div className="p-3 md:p-4 rounded-full bg-primary/10 group-hover:bg-primary group-hover:scale-110 transition-all duration-300 shadow-sm">
              <ClipboardList className="w-6 h-6 md:w-7 md:h-7 text-primary group-hover:text-white" />
            </div>
            <span className="font-semibold text-[11px] md:text-sm whitespace-nowrap text-center">طلبات</span>
          </Link>

          <Link
            href="/ad-licensing"
            onClick={() => setIsServicesOpen(false)}
            className="flex flex-col items-center justify-center gap-2 md:gap-3 p-1.5 md:p-4 rounded-2xl hover:bg-slate-50 transition-all duration-300 group min-w-[75px] md:min-w-[100px]"
          >
            <div className="p-3 md:p-4 rounded-full bg-primary/10 group-hover:bg-primary group-hover:scale-110 transition-all duration-300 shadow-sm">
              <FileCheck className="w-6 h-6 md:w-7 md:h-7 text-primary group-hover:text-white" />
            </div>
            <span className="font-semibold text-[11px] md:text-sm whitespace-nowrap text-center">ترخيص إعلاني</span>
          </Link>
        </div>
      </Dialog>
    </>
  );
}

export default function ClientLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const pathname = usePathname();
  const isMainPage = pathname === '/';
  const [menuOpen, setMenuOpen] = useState(false);
  return (
    <AuthProvider>
      {!isMainPage && <Header menuOpen={menuOpen} setMenuOpen={setMenuOpen} />}

<div className={pathname !== "/" ? "pt-[100px]" : ""}>
  {children}
</div>
      <Footer />
      <Toaster position="top-center" richColors />
      <FloatingServicesButton />
    </AuthProvider>
  );
}