// /media/hf/data/projects/Dawinder/transport/app/(dashboard)/notifications/page.tsx
"use client";

import React, { useState } from 'react';
import { mockNotifications } from '@/lib/mockData';
import { formatDate } from '@/lib/utils';
import { Bell, AlertCircle, Banknote, MapPin, Check } from 'lucide-react';

export default function NotificationsPage() {
  const [notifications, setNotifications] = useState(mockNotifications);

  const markAllAsRead = () => {
    setNotifications(notifications.map(n => ({ ...n, isRead: true })));
  };

  const getIcon = (type: string) => {
    switch (type) {
      case 'compliance': return <AlertCircle className="text-status-red" size={20} />;
      case 'financial': return <Banknote className="text-status-amber" size={20} />;
      case 'trip': return <MapPin className="text-status-blue" size={20} />;
      default: return <Bell className="text-text-muted" size={20} />;
    }
  };

  const getDotColor = (type: string) => {
    switch (type) {
      case 'compliance': return 'bg-status-red';
      case 'financial': return 'bg-status-amber';
      case 'trip': return 'bg-status-blue';
      default: return 'bg-text-muted';
    }
  };

  return (
    <div className="space-y-6 max-w-4xl mx-auto">
      <div className="flex justify-between items-center">
        <div>
          <h1 className="text-2xl font-bold text-text-primary">Notifications</h1>
          <p className="text-text-muted text-sm mt-1">Stay updated with alerts and system messages</p>
        </div>
        <button 
          onClick={markAllAsRead}
          disabled={!notifications.some(n => !n.isRead)}
          className="bg-surface border border-border text-text-primary px-4 py-2 rounded-md text-sm font-medium flex items-center hover:bg-background transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
        >
          <Check size={16} className="mr-2" />
          Mark all as read
        </button>
      </div>

      <div className="bg-surface border border-border rounded-xl overflow-hidden">
        {notifications.length > 0 ? (
          <div className="divide-y divide-border">
            {notifications.map(notification => (
              <div 
                key={notification.id} 
                className={`p-5 flex items-start space-x-4 transition-colors ${notification.isRead ? 'bg-surface' : 'bg-primary/10'}`}
              >
                <div className="mt-1">
                  {getIcon(notification.type)}
                </div>
                <div className="flex-1">
                  <div className="flex justify-between items-start">
                    <p className={`text-sm ${notification.isRead ? 'text-text-primary' : 'text-text-primary font-semibold'}`}>
                      {notification.message}
                    </p>
                    <span className="text-xs text-text-hint whitespace-nowrap ml-4">
                      {formatDate(notification.date)}
                    </span>
                  </div>
                  <p className="text-xs text-text-muted mt-1 capitalize">
                    {notification.type} Alert
                  </p>
                </div>
                {!notification.isRead && (
                  <div className={`w-2.5 h-2.5 rounded-full mt-2 flex-shrink-0 ${getDotColor(notification.type)}`}></div>
                )}
              </div>
            ))}
          </div>
        ) : (
          <div className="p-10 text-center">
            <Bell className="w-12 h-12 text-text-hint mx-auto mb-4 opacity-50" />
            <p className="text-text-muted">No notifications right now.</p>
          </div>
        )}
      </div>
    </div>
  );
}