'use client';

import { useState } from 'react';
import Link from 'next/link';
import CaptainBottomNav from '@/components/captain/CaptainBottomNav';

type Notif = {
  id: number;
  type: 'trip' | 'rating' | 'system' | 'payment' | 'alert';
  title: string;
  body: string;
  time: string;
  read: boolean;
};

const initialNotifs: Notif[] = [
  { id: 1, type: 'trip', title: 'رحلة جديدة مجدولة', body: 'تم تعيين رحلة صباحية غداً الساعة 7:30 ص — حي النزهة ← الجامعة', time: 'منذ 10 دقائق', read: false },
  { id: 2, type: 'rating', title: 'تقييم جديد ⭐⭐⭐⭐⭐', body: 'سارة المطيري أعطتك تقييم 5 نجوم وكتبت: "كابتن ممتاز دائماً في الموعد!"', time: 'منذ 25 دقيقة', read: false },
  { id: 3, type: 'alert', title: 'تنبيه: طالبة غائبة', body: 'لم تركب نورة العتيبي في محطة حي الروضة في رحلة اليوم الصباحية', time: 'منذ ساعة', read: false },
  { id: 4, type: 'payment', title: 'تم إيداع أرباحك 💰', body: 'تم تحويل 1,200 ر.س إلى حسابك البنكي عن رحلات الأسبوع الماضي', time: 'منذ 3 ساعات', read: true },
  { id: 5, type: 'system', title: 'تحديث التطبيق متاح', body: 'الإصدار 2.4.2 متاح الآن، يحتوي على تحسينات في الخريطة وأداء أفضل', time: 'أمس', read: true },
  { id: 6, type: 'trip', title: 'تم تأكيد الرحلة', body: 'رحلة مسائية اليوم الساعة 3:00 م — الجامعة ← حي النزهة تم تأكيدها بنجاح', time: 'أمس', read: true },
  { id: 7, type: 'rating', title: 'تقييم جديد ⭐⭐⭐⭐', body: 'ريم الشمري أعطتك تقييم 4 نجوم وكتبت: "كابتن طيب ومنضبط"', time: 'منذ يومين', read: true },
  { id: 8, type: 'payment', title: 'مكافأة الأداء 🎉', body: 'حصلت على مكافأة 200 ر.س لإتمامك 10 رحلات هذا الأسبوع بدون تأخير', time: 'منذ 3 أيام', read: true },
  { id: 9, type: 'alert', title: 'تذكير: موعد الرحلة', body: 'رحلتك الصباحية غداً الساعة 7:00 ص — حي الملك فهد ← الجامعة', time: 'منذ 3 أيام', read: true },
  { id: 10, type: 'system', title: 'مرحباً بك في الموسم الجديد', body: 'بدأ الفصل الدراسي الثاني، جدول رحلاتك الجديد متاح الآن في الصفحة الرئيسية', time: 'منذ أسبوع', read: true },
];

const typeConfig: Record<Notif['type'], { icon: string; color: string; bg: string; label: string }> = {
  trip: { icon: 'ri-bus-2-line', color: '#1E3A8A', bg: '#EEF2FF', label: 'رحلة' },
  rating: { icon: 'ri-star-line', color: '#d97706', bg: '#fef3c7', label: 'تقييم' },
  system: { icon: 'ri-settings-3-line', color: '#6366F1', bg: '#E0E7FF', label: 'النظام' },
  payment: { icon: 'ri-money-riyal-circle-line', color: '#059669', bg: '#DCFCE7', label: 'مدفوعات' },
  alert: { icon: 'ri-alarm-warning-line', color: '#EF4444', bg: '#FEE2E2', label: 'تنبيه' },
};

export default function NotificationsPage() {
  const [notifs, setNotifs] = useState<Notif[]>(initialNotifs);
  const [filter, setFilter] = useState<'الكل' | 'غير مقروء'>('الكل');

  const unreadCount = notifs.filter(n => !n.read).length;
  const displayed = filter === 'غير مقروء' ? notifs.filter(n => !n.read) : notifs;

  function markAll() {
    setNotifs(prev => prev.map(n => ({ ...n, read: true })));
  }

  function markOne(id: number) {
    setNotifs(prev => prev.map(n => n.id === id ? { ...n, read: true } : n));
  }

  return (
    <div className="min-h-screen pb-28" dir="rtl" style={{ maxWidth: '390px', margin: '0 auto', background: '#EEF2FF' }}>
      <div className="h-11" style={{ background: '#172554' }}></div>

      {/* Header */}
      <div className="relative" style={{ background: '#172554' }}>
        <div className="absolute top-0 left-0 w-32 h-32 rounded-full opacity-10" style={{ background: 'white', transform: 'translate(-30%,-30%)' }}></div>
        <div className="relative flex items-center justify-between px-5 pt-4 pb-14">
          <div className="flex items-center gap-3">
            <Link href="/captain/more" className="w-9 h-9 rounded-xl flex items-center justify-center cursor-pointer" style={{ background: 'rgba(255,255,255,0.15)' }}>
              <i className="ri-arrow-right-s-line text-white text-xl"></i>
            </Link>
            <div>
              <h1 className="text-white text-lg font-bold" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>الإشعارات</h1>
              {unreadCount > 0 && (
                <p className="text-blue-200 text-xs" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{unreadCount} إشعارات غير مقروءة</p>
              )}
            </div>
          </div>
          {unreadCount > 0 && (
            <button
              onClick={markAll}
              className="px-3 py-1.5 rounded-xl text-xs font-bold cursor-pointer whitespace-nowrap"
              style={{ background: 'rgba(255,255,255,0.15)', color: 'white', fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}
            >
              قراءة الكل
            </button>
          )}
        </div>
        <div className="absolute bottom-0 left-0 right-0 h-8 rounded-t-[28px]" style={{ background: '#EEF2FF' }}></div>
      </div>

      <div className="px-4 -mt-1">
        {/* Filter Tabs */}
        <div className="flex gap-2 mb-4">
          {(['الكل', 'غير مقروء'] as const).map(f => (
            <button
              key={f}
              onClick={() => setFilter(f)}
              className="px-5 py-2 rounded-full text-xs font-bold whitespace-nowrap cursor-pointer transition-all flex items-center gap-1.5"
              style={{
                background: filter === f ? '#1E3A8A' : 'white',
                color: filter === f ? 'white' : '#64748b',
                border: `1px solid ${filter === f ? '#1E3A8A' : '#E0E7FF'}`,
              }}
            >
              {f}
              {f === 'غير مقروء' && unreadCount > 0 && (
                <span className="w-4 h-4 rounded-full text-[10px] font-black flex items-center justify-center" style={{ background: filter === f ? 'rgba(255,255,255,0.3)' : '#EF4444', color: 'white' }}>
                  {unreadCount}
                </span>
              )}
            </button>
          ))}
        </div>

        {/* Notifications */}
        {displayed.length === 0 ? (
          <div className="flex flex-col items-center justify-center py-16">
            <div className="w-16 h-16 rounded-2xl flex items-center justify-center mb-3" style={{ background: '#E0E7FF' }}>
              <i className="ri-notification-off-line text-3xl" style={{ color: '#6366F1' }}></i>
            </div>
            <p className="text-sm font-bold text-slate-600" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>لا توجد إشعارات غير مقروءة</p>
          </div>
        ) : (
          <div className="space-y-3">
            {displayed.map(n => {
              const cfg = typeConfig[n.type];
              return (
                <button
                  key={n.id}
                  onClick={() => markOne(n.id)}
                  className="w-full text-right cursor-pointer transition-all active:scale-95"
                >
                  <div
                    className="bg-white rounded-2xl p-4 relative overflow-hidden"
                    style={{
                      boxShadow: n.read ? '0 1px 4px rgba(30,58,138,0.05)' : '0 3px 12px rgba(30,58,138,0.12)',
                      border: n.read ? '1px solid #E0E7FF' : '1.5px solid #C7D2FE',
                    }}
                  >
                    {!n.read && (
                      <div className="absolute top-4 left-4 w-2 h-2 rounded-full" style={{ background: '#1E3A8A' }}></div>
                    )}
                    <div className="flex items-start gap-3">
                      <div className="w-11 h-11 rounded-2xl flex items-center justify-center flex-shrink-0" style={{ background: cfg.bg }}>
                        <i className={`${cfg.icon} text-xl`} style={{ color: cfg.color }}></i>
                      </div>
                      <div className="flex-1 pl-4">
                        <div className="flex items-start justify-between gap-2 mb-1">
                          <p className={`text-sm font-bold ${n.read ? 'text-slate-700' : 'text-slate-900'}`} style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{n.title}</p>
                          <span className="px-2 py-0.5 rounded-full text-[10px] font-bold flex-shrink-0" style={{ background: cfg.bg, color: cfg.color }}>{cfg.label}</span>
                        </div>
                        <p className="text-xs text-slate-500 leading-relaxed mb-2" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{n.body}</p>
                        <div className="flex items-center gap-1">
                          <i className="ri-time-line text-xs text-slate-300"></i>
                          <p className="text-[10px] text-slate-400" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{n.time}</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </button>
              );
            })}
          </div>
        )}
      </div>

      <CaptainBottomNav />
    </div>
  );
}