'use client'
import { useState, useEffect, useRef } from 'react'
import Link from 'next/link'
import { useRouter } from 'next/navigation'
import { Menu, X, Leaf, LogOut, User, LayoutDashboard, ClipboardList } from 'lucide-react'
import { FontAwesomeIcon } from '@/lib/fa'
import styles from './Navbar.module.css'

interface AuthUser {
  id: string
  name: string
  email: string
  role: 'CUSTOMER' | 'THERAPIST' | 'ADMIN' | 'SUPER_ADMIN'
}

const navLinks = [
  { href: '/services', label: 'Layanan' },
  { href: '/#cara-kerja', label: 'Cara Kerja' },
  { href: '/#testimoni', label: 'Testimoni' },
  { href: '/#keunggulan', label: 'Keunggulan' },
  { href: '/track', label: 'Lacak Pesanan' },
]

function getInitials(name: string) {
  return name
    .split(' ')
    .slice(0, 2)
    .map((w) => w[0]?.toUpperCase() ?? '')
    .join('')
}

function getRoleDashboard(role: AuthUser['role']) {
  if (role === 'ADMIN' || role === 'SUPER_ADMIN') return '/admin'
  if (role === 'THERAPIST') return '/terapis'
  return null
}

function getRoleLabel(role: AuthUser['role']) {
  if (role === 'SUPER_ADMIN') return 'Super Admin'
  if (role === 'ADMIN') return 'Admin'
  if (role === 'THERAPIST') return 'Terapis'
  return 'Customer'
}

export default function Navbar() {
  const router = useRouter()
  const [open, setOpen] = useState(false)
  const [scrolled, setScrolled] = useState(false)
  const [user, setUser] = useState<AuthUser | null>(null)
  const [userLoading, setUserLoading] = useState(true)
  const [dropdownOpen, setDropdownOpen] = useState(false)
  const dropdownRef = useRef<HTMLDivElement>(null)

  // Scroll listener
  useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 20)
    window.addEventListener('scroll', fn)
    return () => window.removeEventListener('scroll', fn)
  }, [])

  // Fetch current user
  useEffect(() => {
    fetch('/api/auth/me')
      .then((r) => r.json())
      .then((j) => setUser(j.user ?? null))
      .catch(() => setUser(null))
      .finally(() => setUserLoading(false))
  }, [])

  // Close dropdown on outside click
  useEffect(() => {
    function handleClick(e: MouseEvent) {
      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
        setDropdownOpen(false)
      }
    }
    document.addEventListener('mousedown', handleClick)
    return () => document.removeEventListener('mousedown', handleClick)
  }, [])

  async function handleLogout() {
    await fetch('/api/auth/me', { method: 'DELETE' })
    setUser(null)
    setDropdownOpen(false)
    setOpen(false)
    router.push('/')
    router.refresh()
  }

  const dashboard = user ? getRoleDashboard(user.role) : null
  const initials = user ? getInitials(user.name) : ''

  return (
    <header className={`${styles.navbar} ${scrolled ? styles.scrolled : ''}`}>
      {/* Logo */}
      <Link href="/" className={styles.logo}>
        <Leaf size={20} strokeWidth={1.5} />
        <span>Kembali SPA</span>
      </Link>

      {/* Desktop Nav Links */}
      <nav className={styles.nav}>
        {navLinks.map((l) => (
          <Link key={l.href} href={l.href} className="navbar-link">
            {l.label}
          </Link>
        ))}
      </nav>

      {/* Desktop Actions */}
      <div className={styles.actions}>
        {/* Booking button (always visible on desktop) */}
        <Link href="/booking" className={`btn btn-primary btn-sm ${styles.bookingBtn}`}>
          Pesan Sekarang
        </Link>

        {/* Auth section */}
        {!userLoading && (
          <>
            {user ? (
              /* ── Logged In: Avatar + Dropdown ── */
              <div className={styles.avatarWrap} ref={dropdownRef}>
                <button
                  className={styles.avatarBtn}
                  onClick={() => setDropdownOpen(!dropdownOpen)}
                  aria-label={`Menu akun ${user.name}`}
                  aria-expanded={dropdownOpen}
                >
                  <div className={styles.avatar}>{initials}</div>
                  <div className={styles.avatarInfo}>
                    <span className={styles.avatarName}>{user.name.split(' ')[0]}</span>
                    <span className={styles.avatarRole}>{getRoleLabel(user.role)}</span>
                  </div>
                  <FontAwesomeIcon
                    icon="chevron-right"
                    style={{
                      fontSize: '0.65rem',
                      color: 'var(--sage-400)',
                      transform: dropdownOpen ? 'rotate(90deg)' : 'rotate(0deg)',
                      transition: 'transform 0.2s',
                    }}
                    aria-hidden="true"
                  />
                </button>

                {dropdownOpen && (
                  <div className={styles.dropdown}>
                    <div className={styles.dropdownHeader}>
                      <div className={styles.dropdownAvatar}>{initials}</div>
                      <div>
                        <div className={styles.dropdownName}>{user.name}</div>
                        <div className={styles.dropdownEmail}>{user.email}</div>
                      </div>
                    </div>

                    <div className={styles.dropdownDivider} />

                    <Link
                      href="/track"
                      className={styles.dropdownItem}
                      onClick={() => setDropdownOpen(false)}
                    >
                      <ClipboardList size={14} aria-hidden="true" />
                      Lacak Pesanan
                    </Link>

                    {dashboard && (
                      <Link
                        href={dashboard}
                        className={styles.dropdownItem}
                        onClick={() => setDropdownOpen(false)}
                      >
                        <LayoutDashboard size={14} aria-hidden="true" />
                        Dashboard
                      </Link>
                    )}

                    <div className={styles.dropdownDivider} />

                    <button className={`${styles.dropdownItem} ${styles.dropdownLogout}`} onClick={handleLogout}>
                      <LogOut size={14} aria-hidden="true" />
                      Keluar
                    </button>
                  </div>
                )}
              </div>
            ) : (
              /* ── Not Logged In: Masuk / Daftar ── */
              <div className={styles.authLinks}>
                <Link href="/login" className={styles.loginBtn}>Masuk</Link>
                <Link href="/register" className={`btn btn-sm ${styles.registerBtn}`}>Daftar</Link>
              </div>
            )}
          </>
        )}

        {/* Hamburger (mobile) */}
        <button className={styles.hamburger} onClick={() => setOpen(!open)} aria-label="Menu">
          {open ? <X size={22} /> : <Menu size={22} />}
        </button>
      </div>

      {/* Mobile Menu */}
      {open && (
        <div className={styles.mobileMenu}>
          {navLinks.map((l) => (
            <Link key={l.href} href={l.href} className={styles.mobileLink} onClick={() => setOpen(false)}>
              {l.label}
            </Link>
          ))}

          <Link href="/booking" className="btn btn-primary btn-full" onClick={() => setOpen(false)}>
            Pesan Sekarang
          </Link>

          <div className={styles.mobileDivider} />

          {user ? (
            /* Mobile — logged in */
            <div className={styles.mobileUserSection}>
              <div className={styles.mobileUserCard}>
                <div className={styles.mobileAvatar}>{initials}</div>
                <div>
                  <div className={styles.mobileUserName}>{user.name}</div>
                  <div className={styles.mobileUserRole}>{getRoleLabel(user.role)}</div>
                </div>
              </div>
              <Link href="/track" className={styles.mobileLink} onClick={() => setOpen(false)}>
                <ClipboardList size={14} style={{ marginRight: 8 }} aria-hidden="true" />
                Lacak Pesanan
              </Link>
              {dashboard && (
                <Link href={dashboard} className={styles.mobileLink} onClick={() => setOpen(false)}>
                  <LayoutDashboard size={14} style={{ marginRight: 8 }} aria-hidden="true" />
                  Dashboard
                </Link>
              )}
              <button className={`${styles.mobileLink} ${styles.mobileLogout}`} onClick={handleLogout}>
                <LogOut size={14} style={{ marginRight: 8 }} aria-hidden="true" />
                Keluar
              </button>
            </div>
          ) : (
            /* Mobile — not logged in */
            <div className={styles.mobileAuthLinks}>
              <Link href="/login" className={styles.mobileLink} onClick={() => setOpen(false)}>
                <User size={14} style={{ marginRight: 8 }} aria-hidden="true" />
                Masuk
              </Link>
              <Link href="/register" className={`btn btn-primary btn-sm ${styles.mobileRegisterBtn}`} onClick={() => setOpen(false)}>
                Daftar Gratis
              </Link>
            </div>
          )}
        </div>
      )}
    </header>
  )
}