"use client"

import type React from "react"
import { useEffect, useState } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import {
  LayoutDashboard,
  Building,
  Building2,
  Settings,
  Bell,
  LogOut,
  User,
  Shield,
  Loader2,
  ClipboardList,
  CreditCard
} from "lucide-react"
import { PageLoader } from "@/components/ui/loader"
import { useRouter, usePathname } from "next/navigation"
import { useAuth } from "@/hooks/use-auth"
import Image from "next/image"

export default function FacilityOwnerLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const router = useRouter()
  const pathname = usePathname()
  const { user, isLoading, isAuthenticated, logout } = useAuth()
  const [isChecking, setIsChecking] = useState(true)

  // Authentication and authorization check
  useEffect(() => {
    const checkAccess = async () => {
      // Wait for auth to initialize
      if (isLoading) {
        return
      }

      console.log('[Facility Owner Layout] Auth check:', { isAuthenticated, user: user?.email, role: user?.role, status: user?.status })

      if (!isAuthenticated || !user) {
        console.log('[Facility Owner Layout] Not authenticated, redirecting to login')
        router.push('/login')
        return
      }

      if (user.role !== 'facility_owner') {
        console.log('[Facility Owner Layout] Not a facility owner, redirecting to home')
        router.push('/')
        return
      }

      // Handle different facility owner states
      if ((user.status as string) === 'email_verification') {
        console.log('[Facility Owner Layout] Email not verified, redirecting')
        router.push(`/facility/verify-otp?email=${encodeURIComponent(user.email)}&userId=${user.id}`)
        return
      }

      if ((user.status as string) === 'profile_incomplete') {
        console.log('[Facility Owner Layout] Profile incomplete, redirecting')
        router.push(`/facility/complete-profile?email=${encodeURIComponent(user.email)}&userId=${user.id}`)
        return
      }

      if (user.status === 'pending') {
        console.log('[Facility Owner Layout] Status pending, redirecting')
        router.push('/facility/registration-complete')
        return
      }

      if (user.status === 'suspended') {
        console.log('[Facility Owner Layout] Account suspended, redirecting')
        router.push('/login')
        return
      }

      // User is facility owner with active status - allow access
      console.log('[Facility Owner Layout] Access granted')
      setIsChecking(false)
    }

    checkAccess()
  }, [isLoading, isAuthenticated, user, router])

  // Show loading while checking authentication
  if (isLoading || isChecking) {
    return <PageLoader />
  }

  // Don't render content for non-facility-owners (they'll be redirected)
  if (!user || user.role !== 'facility_owner' || user.status !== 'active') {
    return null
  }

  const navigation = [
    { name: "Dashboard", href: "/facility-owner/dashboard", icon: LayoutDashboard },
    { name: "My Facilities", href: "/facility-owner/facilities", icon: Building },
    { name: "Claim Facility", href: "/facility-owner/facilities/claim", icon: Building2 },
    { name: "My Claims", href: "/facility-owner/facilities/claims", icon: ClipboardList },
    { name: "Subscription", href: "/facility-owner/subscription", icon: CreditCard },
    { name: "Settings", href: "/facility-owner/settings", icon: Settings },
  ]

  const handleLogout = async () => {
    try {
      await logout()
      router.push("/login")
    } catch (error) {
      console.error('Logout failed:', error)
      // Force redirect even if logout API fails
      router.push("/login")
    }
  }

  const handleNotifications = () => {
    router.push("/facility-owner/notifications")
  }

  return (
    <div className="min-h-screen bg-gray-50">
      <div className="flex h-screen">
        {/* Sidebar */}
        <div className="hidden md:flex md:w-64 md:flex-col md:fixed md:inset-y-0">
          <div className="flex flex-col flex-grow pt-6 bg-white border-r border-gray-200 overflow-y-auto shadow-sm">
            <div className="flex items-center flex-shrink-0 px-4">
              <Link href="/" className="flex items-center space-x-2">
                <Image
                  src="/images/geezer-guide-logo.png"
                  alt="Geezer Guide"
                  width={120}
                  height={60}
                  className="h-8 w-auto"
                />
              </Link>
            </div>

            {/* Facility Owner Info */}
            <div className="mt-8 px-4">
              <div className="bg-gradient-to-br from-blue-50 via-indigo-50 to-blue-50 rounded-xl p-4 border border-blue-200 shadow-sm">
                <div className="flex items-center space-x-3">
                  <div className="relative">
                    <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-xl flex items-center justify-center text-white font-bold text-base shadow-md">
                      {user?.firstName?.[0]}{user?.lastName?.[0]}
                    </div>
                    {(user as any)?.facilityOwner?.verified && (
                      <div className="absolute -top-1 -right-1">
                        <div className="bg-green-500 rounded-full p-0.5 shadow-sm">
                          <Shield className="h-3.5 w-3.5 text-white" />
                        </div>
                      </div>
                    )}
                  </div>
                  <div className="flex-1 min-w-0">
                    <p className="text-sm font-semibold text-gray-900 truncate">
                      {user?.firstName} {user?.lastName}
                    </p>
                    <p className="text-xs text-gray-600 truncate">
                      {(user as any)?.facilityOwner?.companyName || 'Facility Owner'}
                    </p>
                    <Badge className="mt-1.5 text-xs bg-green-100 text-green-800 hover:bg-green-100 border-green-200">
                      {user?.status === 'active' ? 'Active' : 'Pending'}
                    </Badge>
                  </div>
                </div>
              </div>
            </div>

            {/* Navigation */}
            <nav className="mt-8 flex-1 px-3 bg-white space-y-1.5">
              {navigation.map((item) => {
                const isActive = pathname === item.href
                return (
                  <Link
                    key={item.name}
                    href={item.href}
                    className={`group flex items-center px-3 py-2.5 text-sm font-medium rounded-xl transition-all duration-200 ${isActive
                      ? "bg-[#3F5CEA] text-white shadow-md"
                      : "text-gray-700 hover:bg-gray-100 hover:text-gray-900"
                      }`}
                  >
                    <item.icon
                      className={`mr-3 flex-shrink-0 h-5 w-5 ${isActive ? "text-white" : "text-gray-500 group-hover:text-gray-700"
                        }`}
                    />
                    {item.name}
                  </Link>
                )
              })}
            </nav>

            {/* Bottom Actions */}
            <div className="flex-shrink-0 flex border-t border-gray-100 p-4 bg-gray-50">
              <div className="flex items-center justify-around w-full gap-2">
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={handleNotifications}
                  className="hover:bg-gray-200 hover:text-gray-900 flex-1"
                >
                  <Bell className="h-5 w-5" />
                </Button>
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={handleLogout}
                  className="hover:bg-red-50 hover:text-red-600 flex-1"
                >
                  <LogOut className="h-5 w-5" />
                </Button>
              </div>
            </div>
          </div>
        </div>

        {/* Main content */}
        <div className="md:pl-64 flex flex-col flex-1">
          {/* Top bar for mobile */}
          <div className="sticky top-0 z-10 md:hidden pl-1 pt-1 sm:pl-3 sm:pt-3 bg-white border-b border-gray-200">
            <button
              type="button"
              className="-ml-0.5 -mt-0.5 h-12 w-12 inline-flex items-center justify-center rounded-md text-gray-500 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
            >
              <span className="sr-only">Open sidebar</span>
              <LayoutDashboard className="h-6 w-6" />
            </button>
            <div className="flex items-center justify-between px-4 py-2">
              <h1 className="font-primary text-lg font-semibold text-gray-900">
                Facility Dashboard
              </h1>
              <div className="flex items-center space-x-2">
                <Button variant="ghost" size="sm" onClick={handleNotifications}>
                  <Bell className="h-4 w-4" />
                  {/* Notification badge - can be implemented later with actual notification system */}
                </Button>
                <Button variant="ghost" size="sm" onClick={handleLogout}>
                  <LogOut className="h-4 w-4" />
                </Button>
              </div>
            </div>
          </div>

          {/* Page content */}
          <main className="flex-1 overflow-y-auto bg-gray-50">
            <div className="py-8">
              <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                {children}
              </div>
            </div>
          </main>
        </div>
      </div>
    </div>
  )
}