import Link from 'next/link'
import { auth } from '@/auth'
import { getSiteSettings } from '@/app/dashboard/settings/actions'
import {
  LayoutDashboard,
  ShoppingCart,
  Package,
  Users,
  MapPin,
  Building2,
  FileText,
  Hexagon,
  Settings,
  HelpCircle,
  MessageSquare,
  Mail,
  FileDown
} from 'lucide-react'

export async function Sidebar() {
  const session = await auth()
  const role = session?.user?.role
  const settings = await getSiteSettings()

  return (
    <aside className="w-64 bg-white dark:bg-gray-900 border-r border-border flex flex-col hidden md:flex shadow-sm z-20">
      <div className="h-16 flex items-center px-6 border-b border-border">
        {settings.siteLogo ? (
          <img src={settings.siteLogo} alt="Logo" className="h-8 w-8 mr-2 object-contain" />
        ) : (
          <Hexagon className="h-6 w-6 text-primary mr-2 fill-primary/20" />
        )}
        <h1 className="text-lg font-extrabold tracking-tight bg-gradient-to-r from-primary to-blue-600 bg-clip-text text-transparent">
          {settings.siteName}
        </h1>
      </div>
      
      <div className="flex-1 overflow-y-auto py-6 px-4 space-y-6">
        <div>
          <div className="px-3 mb-2 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
            Overview
          </div>
          <nav className="space-y-1">
            <Link href="/dashboard" className="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg text-foreground hover:bg-primary/10 hover:text-primary hover:translate-x-1 transition-all duration-200 group">
              <LayoutDashboard className="mr-3 h-5 w-5 text-muted-foreground group-hover:text-primary transition-colors" />
              Dashboard
            </Link>
          </nav>
        </div>

        <div>
          <div className="px-3 mb-2 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
            Procurement
          </div>
          <nav className="space-y-1">
            {role !== 'ADMIN_APPROVAL' && role !== 'MANAGER' && (
              <Link href="/dashboard/products" className="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg text-foreground hover:bg-primary/10 hover:text-primary hover:translate-x-1 transition-all duration-200 group">
                <Package className="mr-3 h-5 w-5 text-muted-foreground group-hover:text-primary transition-colors" />
                Products Catalog
              </Link>
            )}
            <Link href="/dashboard/orders" className="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg text-foreground hover:bg-primary/10 hover:text-primary hover:translate-x-1 transition-all duration-200 group">
              <ShoppingCart className="mr-3 h-5 w-5 text-muted-foreground group-hover:text-primary transition-colors" />
              Purchase Orders
            </Link>
          </nav>
        </div>

        {/* Super Admin Inti Links */}
        {role === 'SUPER_ADMIN_INTI' && (
          <div>
            <div className="px-3 mb-2 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
              System Master
            </div>
            <nav className="space-y-1">
              <Link href="/dashboard/users" className="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg text-foreground hover:bg-primary/10 hover:text-primary hover:translate-x-1 transition-all duration-200 group">
                <Users className="mr-3 h-5 w-5 text-muted-foreground group-hover:text-primary transition-colors" />
                User Management
              </Link>
              <Link href="/dashboard/departments" className="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg text-foreground hover:bg-primary/10 hover:text-primary hover:translate-x-1 transition-all duration-200 group">
                <Building2 className="mr-3 h-5 w-5 text-muted-foreground group-hover:text-primary transition-colors" />
                Departments
              </Link>
              {role === 'SUPER_ADMIN_INTI' && (
                <Link href="/dashboard/regions" className="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg text-foreground hover:bg-primary/10 hover:text-primary hover:translate-x-1 transition-all duration-200 group">
                  <MapPin className="mr-3 h-5 w-5 text-muted-foreground group-hover:text-primary transition-colors" />
                  Regions
                </Link>
              )}
              <Link href="/dashboard/reports" className="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg text-foreground hover:bg-primary/10 hover:text-primary hover:translate-x-1 transition-all duration-200 group">
                <FileText className="mr-3 h-5 w-5 text-muted-foreground group-hover:text-primary transition-colors" />
                Audit Logs
              </Link>
            </nav>
          </div>
        )}

        <div>
          <div className="px-3 mb-2 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
            Personal
          </div>
          <nav className="space-y-1">
            <Link href="/dashboard/settings" className="flex items-center px-3 py-2.5 text-sm font-medium rounded-lg text-foreground hover:bg-primary/10 hover:text-primary hover:translate-x-1 transition-all duration-200 group">
              <Settings className="mr-3 h-5 w-5 text-muted-foreground group-hover:text-primary transition-colors" />
              Settings
            </Link>
          </nav>
        </div>
      </div>
      
      {/* Decorative bottom element */}
      <div className="p-4 border-t border-border bg-gray-50/50 dark:bg-gray-900/50 shrink-0">
        <div className="rounded-xl bg-gradient-to-br from-indigo-50 to-indigo-100/50 dark:from-slate-800/40 dark:to-slate-900/20 p-4 border border-slate-200/60 dark:border-slate-800/60 shadow-sm">
          <div className="flex items-center gap-2 mb-3">
            <div className="p-1.5 rounded-lg bg-indigo-500/10 text-indigo-600 dark:text-indigo-400">
              <HelpCircle className="h-4 w-4" />
            </div>
            <div>
              <h4 className="text-xs font-bold text-slate-850 dark:text-slate-200 leading-tight">Help Center</h4>
              <p className="text-[10px] text-slate-400 dark:text-slate-500 font-semibold leading-tight">Butuh bantuan?</p>
            </div>
          </div>
          
          <div className="flex flex-col gap-1.5">
            {settings.picWhatsapp && (
              <a 
                href={`https://wa.me/${settings.picWhatsapp.replace(/[^0-9]/g, '')}`} 
                target="_blank" 
                rel="noopener noreferrer" 
                className="flex items-center gap-2 px-2.5 py-1.5 rounded-lg bg-emerald-500/[0.04] dark:bg-emerald-500/[0.02] border border-emerald-500/10 hover:bg-emerald-500/[0.08] text-emerald-600 dark:text-emerald-400 font-bold text-[11px] transition-all duration-200"
              >
                <MessageSquare className="h-3.5 w-3.5" />
                <span>WhatsApp PIC</span>
              </a>
            )}
            {settings.picEmail && (
              <a 
                href={`mailto:${settings.picEmail}`} 
                className="flex items-center gap-2 px-2.5 py-1.5 rounded-lg bg-indigo-500/[0.04] dark:bg-indigo-500/[0.02] border border-indigo-500/10 hover:bg-indigo-500/[0.08] text-indigo-650 dark:text-indigo-400 font-bold text-[11px] transition-all duration-200"
              >
                <Mail className="h-3.5 w-3.5" />
                <span>Email PIC</span>
              </a>
            )}
            <a 
              href="/api/guideline" 
              download 
              className="flex items-center gap-2 px-2.5 py-1.5 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white font-bold text-[11px] transition-all duration-200 shadow-sm shadow-indigo-600/10 mt-1"
            >
              <FileDown className="h-3.5 w-3.5" />
              <span>Unduh Panduan PDF</span>
            </a>
          </div>
        </div>
      </div>
    </aside>
  )
}