'use client'

import { useState } from 'react'
import Link from 'next/link'
import { usePathname, useRouter } from 'next/navigation'
import { Button } from '@/components/ui/button'
import {
  Building2,
  LayoutDashboard,
  Calendar,
  FileText,
  CreditCard,
  Pill,
  CalendarPlus,
  ClipboardCheck,
  Camera,
  Languages,
  LogOut,
  Menu,
  X,
  User,
} from 'lucide-react'
import { cn } from '@/lib/utils'

interface PortalShellProps {
  patient: {
    name: string
    patientId: string
    phone: string
  }
  hospital: {
    name: string
    logo: string | null
    slug: string
  }
  children: React.ReactNode
}

const navItems = [
  { href: '/portal', label: 'Dashboard', icon: LayoutDashboard },
  { href: '/portal/appointments', label: 'Appointments', icon: Calendar },
  { href: '/portal/records', label: 'Records', icon: FileText },
  { href: '/portal/bills', label: 'Bills', icon: CreditCard },
  { href: '/portal/prescriptions', label: 'Prescriptions', icon: Pill },
  { href: '/portal/forms', label: 'Forms', icon: ClipboardCheck },
  { href: '/portal/book', label: 'Book Appointment', icon: CalendarPlus },
  { href: '/portal/upload-photo', label: 'Upload Photo', icon: Camera },
  { href: '/portal/profile', label: 'My Preferences', icon: Languages },
]

export function PortalShell({ patient, hospital, children }: PortalShellProps) {
  const pathname = usePathname()
  const router = useRouter()
  const [mobileOpen, setMobileOpen] = useState(false)

  const handleLogout = async () => {
    await fetch('/api/patient-portal/auth/logout', { method: 'POST' })
    router.push('/portal/login?clinic=' + hospital.slug)
  }

  const isActive = (href: string) => {
    if (href === '/portal') return pathname === '/portal'
    return pathname.startsWith(href)
  }

  return (
    <div className="min-h-screen bg-muted/50">
      {/* Top navbar */}
      <header className="sticky top-0 z-40 bg-background border-b shadow-sm">
        <div className="max-w-7xl mx-auto px-4 flex items-center justify-between h-14">
          <div className="flex items-center gap-3">
            <button className="md:hidden p-1" onClick={() => setMobileOpen(!mobileOpen)}>
              {mobileOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
            </button>
            {hospital.logo ? (
              <img
                src={hospital.logo}
                alt={hospital.name}
                className="h-8 w-8 rounded-md object-cover"
              />
            ) : (
              <div className="h-8 w-8 rounded-md bg-primary/10 flex items-center justify-center">
                <Building2 className="h-4 w-4 text-primary" />
              </div>
            )}
            <span className="font-semibold text-sm hidden sm:block">{hospital.name}</span>
          </div>

          <div className="flex items-center gap-3">
            <div className="text-right hidden sm:block">
              <p className="text-sm font-medium">{patient.name}</p>
              <p className="text-xs text-muted-foreground">{patient.patientId}</p>
            </div>
            <div className="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center">
              <User className="h-4 w-4 text-primary" />
            </div>
            <Button
              variant="ghost"
              size="sm"
              onClick={handleLogout}
              className="text-muted-foreground"
            >
              <LogOut className="h-4 w-4" />
            </Button>
          </div>
        </div>
      </header>

      <div className="max-w-7xl mx-auto flex">
        {/* Desktop sidebar */}
        <aside className="hidden md:block w-56 shrink-0 border-r bg-background min-h-[calc(100vh-3.5rem)]">
          <nav className="p-3 space-y-1">
            {navItems.map((item) => (
              <Link
                key={item.href}
                href={item.href}
                className={cn(
                  'flex items-center gap-2 px-3 py-2 rounded-md text-sm transition-colors',
                  isActive(item.href)
                    ? 'bg-primary/10 text-primary font-medium'
                    : 'text-muted-foreground hover:bg-muted'
                )}
              >
                <item.icon className="h-4 w-4" />
                {item.label}
              </Link>
            ))}
          </nav>
        </aside>

        {/* Mobile nav overlay */}
        {mobileOpen && (
          <div className="fixed inset-0 z-30 md:hidden">
            <div className="absolute inset-0 bg-black/20" onClick={() => setMobileOpen(false)} />
            <aside className="absolute left-0 top-14 bottom-0 w-56 bg-background border-r shadow-lg">
              <nav className="p-3 space-y-1">
                {navItems.map((item) => (
                  <Link
                    key={item.href}
                    href={item.href}
                    onClick={() => setMobileOpen(false)}
                    className={cn(
                      'flex items-center gap-2 px-3 py-2 rounded-md text-sm transition-colors',
                      isActive(item.href)
                        ? 'bg-primary/10 text-primary font-medium'
                        : 'text-muted-foreground hover:bg-muted'
                    )}
                  >
                    <item.icon className="h-4 w-4" />
                    {item.label}
                  </Link>
                ))}
              </nav>
            </aside>
          </div>
        )}

        {/* Main content */}
        <main className="flex-1 p-4 md:p-6 min-h-[calc(100vh-3.5rem)]">{children}</main>
      </div>
    </div>
  )
}