import { useUIStore } from '@/stores/uiStore';
import { Bell, ChevronLeft } from 'lucide-react';

const screenTitles: Record<string, string> = {
  dashboard: '',
  students: 'Students',
  studentDetail: 'Student Details',
  timing: 'Timing',
  timingHistory: 'Timing Records',
  attendance: 'Attendance',
  attendanceReport: 'Attendance Reports',
  fees: 'Fees',
  dueFees: 'Due Fees',
  equipment: 'Equipment',
  equipmentDetail: 'Equipment Details',
  sales: 'Sales Dashboard',
  transactions: 'Transactions',
  reports: 'Reports',
  more: 'Menu',
  settings: 'Settings',
  birthdays: 'Birthdays',
  whatsapp: 'WhatsApp Messages',
  studentPortal: 'My Progress',
};

export default function Header() {
  const { activeScreen, previousScreen, navigateTo, goBack } = useUIStore();
  const title = screenTitles[activeScreen] || '';
  const showBack = !!previousScreen && activeScreen !== 'dashboard' && activeScreen !== 'students' && activeScreen !== 'timing' && activeScreen !== 'attendance' && activeScreen !== 'reports' && activeScreen !== 'more';

  return (
    <header className="fixed top-0 left-0 right-0 z-50 bg-white/95 backdrop-blur-md border-b border-gray-100 safe-area-top">
      <div className="flex items-center justify-between h-14 px-4">
        <div className="flex items-center gap-2 w-20">
          {showBack ? (
            <button onClick={goBack} className="p-2 -ml-2 rounded-full active:bg-gray-100 transition-colors">
              <ChevronLeft className="w-5 h-5 text-gray-700" />
            </button>
          ) : (
            <img src="/logo.jpg" alt="Logo" className="h-8 w-auto rounded" />
          )}
        </div>

        {title && (
          <h1 className="absolute left-1/2 -translate-x-1/2 text-base font-semibold text-gray-900 truncate max-w-[50%]">
            {title}
          </h1>
        )}

        <div className="flex items-center justify-end w-20">
          <button className="p-2 -mr-2 rounded-full active:bg-gray-100 transition-colors relative">
            <Bell className="w-5 h-5 text-gray-500" />
            <span className="absolute top-1.5 right-1.5 w-2 h-2 bg-red-500 rounded-full" />
          </button>
        </div>
      </div>
    </header>
  );
}
