import React from 'react';
import { BellIcon, SunIcon, MoonIcon, Bars3Icon } from '@heroicons/react/24/outline';
import { useUiStore } from '../../stores/uiStore';

export default function Topbar() {
  const toggleSidebar = useUiStore((s) => s.toggleSidebar);
  const darkMode = useUiStore((s) => s.darkMode);
  const toggleDarkMode = useUiStore((s) => s.toggleDarkMode);

  return (
    <header className="h-14 bg-white dark:bg-gray-900 border-b border-slate-200 dark:border-gray-700/50 flex items-center justify-between px-4 lg:px-6 shrink-0 transition-colors duration-200">
      {/* Left side (RTL: right side visually) */}
      <button
        onClick={toggleSidebar}
        className="lg:hidden w-9 h-9 flex items-center justify-center rounded-xl text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-gray-700 transition-colors"
      >
        <Bars3Icon className="w-5 h-5" />
      </button>

      <div className="flex-1" />

      {/* Right side actions */}
      <div className="flex items-center gap-1">
        {/* Dark mode toggle */}
        <button
          onClick={toggleDarkMode}
          className="w-9 h-9 flex items-center justify-center rounded-xl text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-gray-700 transition-colors"
          title={darkMode ? 'حالت روشن' : 'حالت تاریک'}
        >
          {darkMode
            ? <SunIcon className="w-5 h-5 text-amber-400" />
            : <MoonIcon className="w-5 h-5" />}
        </button>

        {/* Notifications */}
        <button className="relative w-9 h-9 flex items-center justify-center rounded-xl text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-gray-700 transition-colors">
          <BellIcon className="w-5 h-5" />
          <span className="absolute top-2 right-2 w-1.5 h-1.5 bg-red-500 rounded-full ring-2 ring-white dark:ring-gray-900" />
        </button>

        {/* Divider */}
        <div className="w-px h-6 bg-slate-200 dark:bg-gray-700 mx-1" />

        {/* Avatar */}
        <div className="flex items-center gap-2.5 cursor-pointer pl-1">
          <div className="w-8 h-8 rounded-full bg-gradient-to-br from-violet-500 to-purple-700 flex items-center justify-center text-white text-sm font-bold shadow-sm">
            A
          </div>
          <div className="hidden sm:block">
            <p className="text-sm font-semibold text-slate-700 dark:text-slate-200 leading-none">Admin</p>
            <p className="text-[11px] text-slate-400 dark:text-slate-500 leading-none mt-0.5">مدیر سیستم</p>
          </div>
        </div>
      </div>
    </header>
  );
}