clinicpro/assets/admin/components/layout/Topbar.tsx

import React from 'react';
import { useLocation } from 'react-router-dom';
import {
  BellIcon, SunIcon, MoonIcon, Bars3Icon, Cog6ToothIcon,
  MagnifyingGlassIcon, XMarkIcon, CheckIcon,
} from '@heroicons/react/24/outline';
import { ChevronLeftIcon } from '@heroicons/react/24/outline';
import { useUiStore, HUES, type BrandHue } from '../../stores/uiStore';

const CRUMBS: Record<string, string[]> = {
  '/admin/dashboard':       ['داشبورد'],
  '/admin/users':           ['کاربران'],
  '/admin/doctors':         ['پزشکان'],
  '/admin/clinics':         ['کلینیک‌ها'],
  '/admin/appointments':    ['مدیریت', 'نوبت‌ها'],
  '/admin/payments':        ['مدیریت', 'پرداخت‌ها'],
  '/admin/settlements':     ['مدیریت', 'تسویه‌حساب'],
  '/admin/comments':        ['محتوا', 'نظرات'],
  '/admin/ratings':         ['محتوا', 'امتیازها'],
  '/admin/blogs':           ['محتوا', 'بلاگ'],
  '/admin/sms':             ['محتوا', 'پیامک'],
  '/admin/categories':      ['سیستم', 'دسته‌بندی‌ها'],
  '/admin/representations': ['سیستم', 'نمایندگان'],
  '/admin/secretaries':     ['سیستم', 'منشی‌ها'],
};

function getCrumbs(pathname: string): string[] {
  if (CRUMBS[pathname]) return CRUMBS[pathname];
  const entry = Object.entries(CRUMBS).find(([k]) => pathname.startsWith(k + '/'));
  return entry ? entry[1] : ['داشبورد'];
}

interface Props {
  onMobileMenuOpen?: () => void;
}

export default function Topbar({ onMobileMenuOpen }: Props) {
  const location           = useLocation();
  const toggleSidebar      = useUiStore((s) => s.toggleSidebar);
  const darkMode           = useUiStore((s) => s.darkMode);
  const toggleDarkMode     = useUiStore((s) => s.toggleDarkMode);
  const density            = useUiStore((s) => s.density);
  const setDensity         = useUiStore((s) => s.setDensity);
  const brandHue           = useUiStore((s) => s.brandHue);
  const setBrandHue        = useUiStore((s) => s.setBrandHue);
  const sidebarOpen        = useUiStore((s) => s.sidebarOpen);
  const settingsPanelOpen  = useUiStore((s) => s.settingsPanelOpen);
  const toggleSettingsPanel = useUiStore((s) => s.toggleSettingsPanel);

  const crumbs = getCrumbs(location.pathname);

  return (
    <>
      <header className="topbar">
        {/* Sidebar toggle — desktop only */}
        <button className="icon-btn hidden lg:grid" onClick={toggleSidebar}
          title={sidebarOpen ? 'جمع کردن منو' : 'باز کردن منو'}>
          <Bars3Icon style={{ width: 20, height: 20 }} />
        </button>

        {/* Mobile menu open — mobile only */}
        <button className="icon-btn grid lg:hidden" onClick={onMobileMenuOpen} title="منو">
          <Bars3Icon style={{ width: 20, height: 20 }} />
        </button>

        {/* Search bar */}
        <div className="topbar-search">
          <MagnifyingGlassIcon style={{ width: 18, height: 18, flexShrink: 0 }} />
          <input placeholder="جستجوی بیمار، پزشک، نوبت..." readOnly />
          <kbd>⌘K</kbd>
        </div>

        <div style={{ flex: 1 }} />

        {/* Breadcrumbs */}
        <nav className="topbar-crumbs">
          {crumbs.map((crumb, i) => (
            <React.Fragment key={i}>
              {i > 0 && <ChevronLeftIcon style={{ width: 13, height: 13 }} />}
              {i === crumbs.length - 1 ? <b>{crumb}</b> : <span>{crumb}</span>}
            </React.Fragment>
          ))}
        </nav>

        <div style={{ width: 1, height: 24, background: 'var(--border)' }} />

        {/* Settings */}
        <button className="icon-btn" onClick={toggleSettingsPanel} title="شخصی‌سازی">
          <Cog6ToothIcon style={{ width: 19, height: 19 }} />
        </button>

        {/* Dark mode */}
        <button className="icon-btn" onClick={toggleDarkMode} title={darkMode ? 'حالت روشن' : 'حالت تاریک'}>
          {darkMode
            ? <SunIcon  style={{ width: 19, height: 19, color: '#f59e0b' }} />
            : <MoonIcon style={{ width: 19, height: 19 }} />}
        </button>

        {/* Bell */}
        <button className="icon-btn" title="اعلان‌ها">
          <BellIcon style={{ width: 19, height: 19 }} />
          <span className="dot" />
        </button>

        {/* Avatar */}
        <div className="cp-avatar" style={{ cursor: 'pointer' }}>A</div>
      </header>

      {/* Settings Panel */}
      {settingsPanelOpen && (
        <div
          className="overlay"
          style={{ placeItems: 'stretch', justifyContent: 'flex-start' }}
          onClick={toggleSettingsPanel}
        >
          <div
            className="modal settings-panel"
            onClick={(e) => e.stopPropagation()}
          >
            <div className="modal-head">
              <h2>شخصی‌سازی</h2>
              <button className="mini-btn" onClick={toggleSettingsPanel}>
                <XMarkIcon style={{ width: 18, height: 18 }} />
              </button>
            </div>
            <div className="modal-body" style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>

              {/* Theme */}
              <div className="form-row">
                <label>حالت نمایش</label>
                <div className="seg" style={{ width: '100%' }}>
                  <button
                    className={!darkMode ? 'on' : ''}
                    style={{ flex: 1 }}
                    onClick={() => { if (darkMode) toggleDarkMode(); }}
                  >
                    <SunIcon style={{ width: 15, height: 15, display: 'inline', verticalAlign: 'middle', marginInlineEnd: 6 }} />
                    روشن
                  </button>
                  <button
                    className={darkMode ? 'on' : ''}
                    style={{ flex: 1 }}
                    onClick={() => { if (!darkMode) toggleDarkMode(); }}
                  >
                    <MoonIcon style={{ width: 15, height: 15, display: 'inline', verticalAlign: 'middle', marginInlineEnd: 6 }} />
                    تیره
                  </button>
                </div>
              </div>

              {/* Brand color */}
              <div className="form-row">
                <label>رنگ اصلی</label>
                <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                  {HUES.map((hue) => (
                    <button
                      key={hue.h}
                      onClick={() => setBrandHue(hue as BrandHue)}
                      title={hue.name}
                      style={{
                        width: 42, height: 42, borderRadius: 12,
                        background: `oklch(0.55 ${hue.c} ${hue.h})`,
                        border: brandHue.h === hue.h ? '3px solid var(--text)' : '3px solid transparent',
                        boxShadow: 'var(--shadow-sm)',
                        display: 'grid', placeItems: 'center', color: '#fff', cursor: 'pointer',
                      }}
                    >
                      {brandHue.h === hue.h && <CheckIcon style={{ width: 18, height: 18 }} />}
                    </button>
                  ))}
                </div>
              </div>

              {/* Density */}
              <div className="form-row">
                <label>تراکم اطلاعات</label>
                <div className="seg" style={{ width: '100%' }}>
                  <button
                    className={density === 'comfortable' ? 'on' : ''}
                    style={{ flex: 1 }}
                    onClick={() => setDensity('comfortable')}
                  >جادار</button>
                  <button
                    className={density === 'compact' ? 'on' : ''}
                    style={{ flex: 1 }}
                    onClick={() => setDensity('compact')}
                  >فشرده</button>
                </div>
              </div>

              {/* Sidebar */}
              <div className="form-row">
                <label>سایدبار</label>
                <div className="seg" style={{ width: '100%' }}>
                  <button
                    className={sidebarOpen ? 'on' : ''}
                    style={{ flex: 1 }}
                    onClick={() => { if (!sidebarOpen) toggleSidebar(); }}
                  >کامل</button>
                  <button
                    className={!sidebarOpen ? 'on' : ''}
                    style={{ flex: 1 }}
                    onClick={() => { if (sidebarOpen) toggleSidebar(); }}
                  >جمع‌شده</button>
                </div>
              </div>

              <div style={{
                padding: 14, background: 'var(--surface-2)', borderRadius: 'var(--r)',
                fontSize: 12.5, color: 'var(--text-2)', lineHeight: 1.9, marginTop: 8,
              }}>
                <Cog6ToothIcon style={{ width: 15, height: 15, verticalAlign: 'middle', marginInlineEnd: 6 }} />
                تنظیمات شما به‌صورت خودکار ذخیره می‌شود و در بازدید بعدی حفظ می‌ماند.
              </div>
            </div>
          </div>
        </div>
      )}
    </>
  );
}