'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';

import { cn } from '@/lib/utils';

import { getVisibleNavItems, type AppRole } from './nav-items';

export function Sidebar({ role }: { role: AppRole }) {
  const pathname = usePathname();
  const items = getVisibleNavItems(role);

  return (
    <aside className="ajet-sidebar ajet-sidebar-desktop">
      {/* Header */}
      <div className="ajet-sidebar-head">
        <div className="ajet-sidebar-logo" aria-hidden="true">
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img src="/brand/ajet-mark-white.png" alt="" />
        </div>
        <div className="ajet-sidebar-wordmark">
          AJet <span>360</span>
        </div>
      </div>

      {/* Nav */}
      <nav className="ajet-sidebar-nav">
        <div className="ajet-sidebar-section">Ana Modüller</div>
        {items.map((item) => {
          const Icon = item.icon;
          const active =
            pathname === item.href || (item.href !== '/' && pathname.startsWith(item.href));

          return (
            <Link
              key={item.href}
              href={item.href}
              className={cn('ajet-nav-item', active && 'active')}
            >
              <Icon className="h-[16px] w-[16px] flex-shrink-0" />
              {item.title}
            </Link>
          );
        })}
      </nav>

      {/* Footer */}
      <div className="ajet-sidebar-foot">
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div
            style={{
              width: 32,
              height: 32,
              borderRadius: 10,
              background: 'var(--ajet-navy-700)',
              color: '#fff',
              display: 'grid',
              placeItems: 'center',
              fontWeight: 700,
              fontSize: 12,
            }}
          >
            AA
          </div>
          <div>
            <div style={{ color: 'var(--dark-fg-2)', fontSize: 13, fontWeight: 600 }}>
              AJet Admin
            </div>
            <div style={{ fontSize: 11 }}>admin@ajet.com.tr</div>
          </div>
        </div>
      </div>
    </aside>
  );
}