'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { LogOut, ChevronRight } from 'lucide-react';
import { useAuth } from '@/lib/auth';
import { filterNavForRole } from '@/lib/navigation';
import { clsx } from 'clsx';

export default function Sidebar() {
  const { user, logout } = useAuth();
  const pathname = usePathname();

  if (!user) return null;

  const sections = filterNavForRole(user.role);

  const roleColors: Record<string, string> = {
    'master-admin': 'text-purple-400 bg-purple-400/10',
    'admin':        'text-ts-accent bg-ts-accent/10',
    'operator':     'text-green-400 bg-green-400/10',
  };

  return (
    <aside className="w-60 min-h-screen bg-ts-surface border-r border-ts-border flex flex-col">
      {/* Brand */}
      <div className="px-5 py-5 border-b border-ts-border">
        <div className="flex items-center gap-3">
          <div className="w-8 h-8 rounded-lg bg-ts-accent/10 border border-ts-accent/20 flex items-center justify-center">
            <span className="text-ts-accent font-bold text-sm">T</span>
          </div>
          <div>
            <p className="text-sm font-semibold text-ts-text">Tang Studio</p>
            <p className="text-xs text-ts-muted">Dashboard</p>
          </div>
        </div>
      </div>

      {/* Nav */}
      <nav className="flex-1 overflow-y-auto px-3 py-4 space-y-6">
        {sections.map((section) => (
          <div key={section.title}>
            <p className="text-[10px] font-semibold uppercase tracking-widest text-ts-muted px-2 mb-2">
              {section.title}
            </p>
            <ul className="space-y-0.5">
              {section.items.map((item) => {
                const Icon = item.icon;
                const isActive = pathname === item.href || pathname.startsWith(item.href + '/');
                return (
                  <li key={item.key}>
                    <Link
                      href={item.href}
                      className={clsx(
                        'flex items-center gap-3 px-3 py-2 rounded text-sm transition-colors group',
                        isActive
                          ? 'bg-ts-accent/10 text-ts-accent'
                          : 'text-ts-text-secondary hover:bg-ts-border hover:text-ts-text'
                      )}
                    >
                      <Icon
                        size={16}
                        className={clsx(
                          'shrink-0',
                          isActive ? 'text-ts-accent' : 'text-ts-muted group-hover:text-ts-text'
                        )}
                      />
                      <span className="flex-1">{item.label}</span>
                      {isActive && <ChevronRight size={14} className="text-ts-accent" />}
                    </Link>
                  </li>
                );
              })}
            </ul>
          </div>
        ))}
      </nav>

      {/* User footer */}
      <div className="px-3 py-4 border-t border-ts-border">
        <div className="flex items-center gap-3 px-2 py-2 mb-2 rounded-lg">
          <div className="w-8 h-8 rounded-full bg-ts-accent/10 flex items-center justify-center shrink-0">
            <span className="text-xs font-semibold text-ts-accent">
              {(user.display_name || user.name)?.[0]?.toUpperCase()}
            </span>
          </div>
          <div className="flex-1 min-w-0">
            <p className="text-sm font-medium text-ts-text truncate">
              {user.display_name || user.name}
            </p>
            <span className={clsx('text-[10px] font-medium px-1.5 py-0.5 rounded', roleColors[user.role])}>
              {user.role}
            </span>
          </div>
        </div>
        <button
          onClick={logout}
          className="flex items-center gap-3 w-full px-3 py-2 rounded text-sm text-ts-muted hover:text-red-400 hover:bg-red-400/5 transition-colors"
        >
          <LogOut size={16} />
          Sign out
        </button>
      </div>
    </aside>
  );
}