'use client';

import { useState } from 'react';

export default function AdminTopBar({ title, subtitle }: { title: string; subtitle?: string }) {
  const [showNotif, setShowNotif] = useState(false);

  const notifs = [
    { icon: 'ri-building-2-fill', color: '#3B82F6', bg: '#EFF6FF', text: 'شركة نقل جديدة طلبت الانضمام', time: 'منذ 5 دقائق', unread: true },
    { icon: 'ri-steering-2-fill', color: '#059669', bg: '#DCFCE7', text: 'سائق جديد بانتظار الموافقة', time: 'منذ 15 دقيقة', unread: true },
    { icon: 'ri-alert-fill', color: '#D97706', bg: '#FEF3C7', text: 'تقرير شكوى من مستخدم', time: 'منذ ساعة', unread: true },
    { icon: 'ri-money-dollar-circle-fill', color: '#7C3AED', bg: '#EDE9FE', text: 'إيرادات اليوم تجاوزت 50,000 ر', time: 'منذ ساعتين', unread: false },
  ];

  const unreadCount = notifs.filter(n => n.unread).length;

  return (
    <header
      className="flex items-center justify-between px-8 border-b flex-shrink-0"
      style={{ height: '72px', background: 'white', borderColor: '#E2E8F0' }}
      dir="rtl"
    >
      <div>
        <h1 className="text-xl font-black text-slate-900" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{title}</h1>
        {subtitle && <p className="text-xs text-slate-400" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{subtitle}</p>}
      </div>

      <div className="flex items-center gap-3">
        <div className="relative">
          <input
            type="text"
            placeholder="بحث في المنصة..."
            className="h-9 bg-slate-50 border border-slate-200 rounded-xl pr-9 pl-4 text-sm outline-none text-slate-700"
            style={{ width: '220px', fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}
          />
          <div className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 flex items-center justify-center">
            <i className="ri-search-line text-slate-400 text-sm"></i>
          </div>
        </div>

        <div className="relative">
          <button
            onClick={() => setShowNotif(!showNotif)}
            className="relative w-9 h-9 bg-slate-50 border border-slate-200 rounded-xl flex items-center justify-center cursor-pointer"
          >
            <i className="ri-notification-3-line text-slate-600 text-lg"></i>
            {unreadCount > 0 && (
              <span className="absolute -top-1 -right-1 w-4 h-4 rounded-full text-[10px] font-bold text-white flex items-center justify-center" style={{ background: '#EF4444' }}>
                {unreadCount}
              </span>
            )}
          </button>
          {showNotif && (
            <div className="absolute top-12 left-0 bg-white rounded-2xl shadow-2xl z-50 overflow-hidden" style={{ width: '320px', border: '1px solid #E2E8F0' }}>
              <div className="flex items-center justify-between px-4 py-3 border-b" style={{ borderColor: '#F1F5F9' }}>
                <span className="font-bold text-slate-800 text-sm" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>الإشعارات</span>
                <button className="text-xs font-semibold cursor-pointer" style={{ color: '#3B82F6', fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>قراءة الكل</button>
              </div>
              {notifs.map((n, i) => (
                <div key={i} className="flex items-start gap-3 px-4 py-3 cursor-pointer hover:bg-slate-50 transition-colors border-b last:border-0" style={{ borderColor: '#F8FAFC' }}>
                  <div className="w-9 h-9 rounded-xl flex items-center justify-center flex-shrink-0" style={{ background: n.bg }}>
                    <i className={`${n.icon} text-base`} style={{ color: n.color }}></i>
                  </div>
                  <div className="flex-1">
                    <p className="text-xs text-slate-700 leading-relaxed" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{n.text}</p>
                    <p className="text-[10px] text-slate-400 mt-0.5" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{n.time}</p>
                  </div>
                  {n.unread && <span className="w-2 h-2 rounded-full mt-1 flex-shrink-0" style={{ background: '#3B82F6' }}></span>}
                </div>
              ))}
            </div>
          )}
        </div>

        <div className="flex items-center gap-2 cursor-pointer">
          <div className="w-9 h-9 rounded-xl overflow-hidden flex-shrink-0" style={{ background: 'linear-gradient(135deg, #3B82F6, #1E3A8A)' }}>
            <div className="w-full h-full flex items-center justify-center">
              <i className="ri-shield-star-fill text-white text-base"></i>
            </div>
          </div>
          <div className="hidden md:block">
            <p className="text-xs font-bold text-slate-800" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>مدير النظام</p>
            <p className="text-[10px] text-slate-400" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>Super Admin</p>
          </div>
        </div>
      </div>
    </header>
  );
}