import { Link, useLocation } from 'react-router-dom';
import {
  Home,
  BookOpen,
  FileText,
  Video,
  Cloud,
  HelpCircle,
  Users,
  MessageSquare,
  Bug,
  LogOut
} from 'lucide-react';
import { useAuthStore } from '../../stores/authStore';
import { cn } from '../../lib/utils';

const navigation = [
  { name: 'Početna', href: '/', icon: Home },
  { name: 'Riječi', href: '/dictionary', icon: BookOpen },
  { name: 'Znakopis', href: '/znakopis', icon: FileText },
  { name: 'Video rečenica', href: '/video-sentence', icon: Video },
  { name: 'Oblak', href: '/cloud', icon: Cloud },
];

const supportNavigation = [
  { name: 'Korištenje aplikacije', href: '/help', icon: HelpCircle },
  { name: 'Zajednica', href: '/community', icon: Users },
  { name: 'Komentari', href: '/comments', icon: MessageSquare },
  { name: 'Prijavi grešku', href: '/bug-report', icon: Bug },
];

export function Sidebar() {
  const location = useLocation();
  const { user, logout } = useAuthStore();

  const handleLogout = async () => {
    try {
      await logout();
      window.location.href = '/login';
    } catch (error) {
      console.error('Logout failed:', error);
    }
  };

  return (
    <div className="flex h-screen w-80 flex-col bg-primary border-r border-indigo-700">
      {/* Logo */}
      <div className="flex h-16 items-center gap-3 px-6 border-b border-indigo-700">
        <div className="bg-white rounded-full p-1 flex items-center justify-center">
          <img
            src="https://znakovni.b-cdn.net/img/znakovni-logo.svg"
            alt="Znakovni.hr logo"
            className="h-6 w-6"
          />
        </div>
        <h1 className="text-xl font-bold">
          <span className="text-white">ZNAKOVNI</span>
          <span className="text-indigo-300">.</span>
          <span className="text-orange-400">hr</span>
        </h1>
      </div>

      {/* Navigation */}
      <nav className="flex-1 space-y-1 px-3 py-4 overflow-y-auto">
        {/* Main Navigation */}
        <div className="space-y-1">
          {navigation.map((item) => {
            const isActive = location.pathname === item.href;
            return (
              <Link
                key={item.name}
                to={item.href}
                className={cn(
                  'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors',
                  isActive
                    ? 'bg-indigo-700 text-white'
                    : 'text-indigo-100 hover:bg-indigo-500 hover:text-white'
                )}
              >
                <item.icon className="h-5 w-5" />
                {item.name}
              </Link>
            );
          })}
        </div>

        {/* Support Section */}
        <div className="pt-6">
          <h3 className="px-3 text-xs font-semibold uppercase tracking-wider text-indigo-300 mb-2">
            Portal za podršku
          </h3>
          <div className="space-y-1">
            {supportNavigation.map((item) => {
              const isActive = location.pathname === item.href;
              return (
                <Link
                  key={item.name}
                  to={item.href}
                  className={cn(
                    'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors',
                    isActive
                      ? 'bg-indigo-700 text-white'
                      : 'text-indigo-100 hover:bg-indigo-500 hover:text-white'
                  )}
                >
                  <item.icon className="h-5 w-5" />
                  {item.name}
                </Link>
              );
            })}
          </div>
        </div>

        {/* Admin Panel (only for admins) */}
        {user?.role === 'ADMIN' && (
          <div className="pt-6">
            <h3 className="px-3 text-xs font-semibold uppercase tracking-wider text-indigo-300 mb-2">
              Administracija
            </h3>
            <div className="space-y-1">
              <Link
                to="/admin"
                className={cn(
                  'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors',
                  location.pathname === '/admin'
                    ? 'bg-indigo-700 text-white'
                    : 'text-indigo-100 hover:bg-indigo-500 hover:text-white'
                )}
              >
                <Users className="h-5 w-5" />
                Korisnici
              </Link>
              <Link
                to="/admin/terms"
                className={cn(
                  'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors',
                  location.pathname === '/admin/terms'
                    ? 'bg-indigo-700 text-white'
                    : 'text-indigo-100 hover:bg-indigo-500 hover:text-white'
                )}
              >
                <BookOpen className="h-5 w-5" />
                Upravljanje riječima
              </Link>
            </div>
          </div>
        )}
      </nav>

      {/* User Section */}
      <div className="border-t border-indigo-700 p-4">
        {user ? (
          <div className="space-y-2">
            <div className="px-3 py-2">
              <p className="text-sm font-medium text-white">{user.displayName || user.email}</p>
              <p className="text-xs text-indigo-200">{user.email}</p>
            </div>
            <button
              onClick={handleLogout}
              className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-indigo-100 hover:bg-indigo-500 hover:text-white transition-colors"
            >
              <LogOut className="h-5 w-5" />
              Sign out
            </button>
          </div>
        ) : (
          <Link
            to="/login"
            className="flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-indigo-100 hover:bg-indigo-500 hover:text-white transition-colors"
          >
            Sign in
          </Link>
        )}
      </div>
    </div>
  );
}

