'use client'

import { useState } from 'react'
import Link from 'next/link'
import { usePathname } from 'next/navigation'

interface BayiSidebarProps {
  companyName: string
  dealerCode: string
  signOutAction: () => Promise<void>
}

const NAV_ITEMS = [
  { href: '/bayi/dashboard', label: 'Dashboard' },
  { href: '/bayi/products', label: 'Ürünler' },
  { href: '/bayi/cart', label: 'Sepet' },
  { href: '/bayi/orders', label: 'Siparişlerim' },
  { href: '/bayi/profile', label: 'Profil' },
]

export default function BayiSidebar({ companyName, dealerCode, signOutAction }: BayiSidebarProps) {
  const [mobileOpen, setMobileOpen] = useState(false)
  const pathname = usePathname()

  const isActive = (href: string) =>
    pathname === href || pathname.startsWith(href + '/')

  const NavLinks = ({ onNavigate }: { onNavigate?: () => void }) => (
    <div className="space-y-0.5">
      {NAV_ITEMS.map(item => (
        <Link key={item.href} href={item.href} onClick={onNavigate}
          className={`flex items-center px-4 py-2.5 rounded-lg font-body text-sm transition-colors ${
            isActive(item.href)
              ? 'bg-orange text-cream'
              : 'text-cream/50 hover:text-cream hover:bg-white/5'
          }`}>
          {item.label}
        </Link>
      ))}
    </div>
  )

  const UserFooter = () => (
    <div className="p-4 border-t border-white/10">
      <p className="font-body text-sm text-cream truncate">{companyName}</p>
      <p className="font-body text-xs text-cream/40 mt-0.5">{dealerCode}</p>
      <form action={signOutAction} className="mt-3">
        <button type="submit"
          className="font-body text-xs text-cream/30 hover:text-cream/70 transition-colors tracking-widest uppercase">
          Çıkış Yap
        </button>
      </form>
    </div>
  )

  return (
    <>
      {/* Desktop sidebar */}
      <aside className="hidden lg:flex w-60 min-h-screen bg-dark border-r border-white/5 flex-col flex-shrink-0 rounded-r-xl">
        <div className="px-6 py-5 border-b border-white/5">
          <p className="font-display text-xl text-cream">
            Peyzaj<span className="text-orange">Art</span>
          </p>
          <p className="font-body text-xs text-cream/30 tracking-widest uppercase mt-0.5">Bayi Paneli</p>
        </div>
        <nav className="flex-1 p-3 overflow-y-auto">
          <NavLinks />
        </nav>
        <UserFooter />
      </aside>

      {/* Mobile: top bar */}
      <div className="lg:hidden fixed top-0 inset-x-0 z-50 h-14 bg-dark border-b border-white/5 flex items-center justify-between px-4">
        <p className="font-display text-xl text-cream">
          Peyzaj<span className="text-orange">Art</span>
        </p>
        <button onClick={() => setMobileOpen(!mobileOpen)} className="text-cream/60 p-2 -mr-2" aria-label="Menü">
          <div className="w-5 space-y-1.5">
            <span className={`block h-0.5 bg-current transition-transform origin-center ${mobileOpen ? 'rotate-45 translate-y-2' : ''}`} />
            <span className={`block h-0.5 bg-current transition-opacity ${mobileOpen ? 'opacity-0' : ''}`} />
            <span className={`block h-0.5 bg-current transition-transform origin-center ${mobileOpen ? '-rotate-45 -translate-y-2' : ''}`} />
          </div>
        </button>
      </div>

      {/* Mobile drawer */}
      {mobileOpen && (
        <div className="lg:hidden fixed inset-0 z-40 flex">
          <div className="absolute inset-0 bg-black/60" onClick={() => setMobileOpen(false)} />
          <aside className="relative w-64 bg-dark border-r border-white/5 flex flex-col">
            <div className="px-6 py-4 border-b border-white/5 mt-14">
              <p className="font-body text-sm text-cream">{companyName}</p>
              <p className="font-body text-xs text-cream/40">{dealerCode}</p>
            </div>
            <nav className="flex-1 p-3 overflow-y-auto">
              <NavLinks onNavigate={() => setMobileOpen(false)} />
            </nav>
            <UserFooter />
          </aside>
        </div>
      )}
    </>
  )
}