'use client';

import { useState } from 'react';
import { Bell, X, ArrowRight, Package, DollarSign, Bike, AlertCircle, CheckCircle } from 'lucide-react';

const mockNotifications = [
  {
    id: '1',
    type: 'rental',
    title: 'New Rental Started',
    message: 'Your bike AB-1234 has been rented by rider MR-456',
    time: '5 min ago',
    read: false,
  },
  {
    id: '2',
    type: 'earning',
    title: 'Earning Credited',
    message: '৳450 has been added to your wallet from bike CD-5678',
    time: '2 hours ago',
    read: false,
  },
  {
    id: '3',
    type: 'success',
    title: 'Withdrawal Complete',
    message: 'Your withdrawal of ৳5,000 has been processed successfully',
    time: '1 day ago',
    read: true,
  },
  {
    id: '4',
    type: 'alert',
    title: 'Maintenance Alert',
    message: 'Bike XY-9012 requires maintenance attention',
    time: '2 days ago',
    read: true,
  },
];

const iconMap: Record<string, any> = {
  rental: Bike,
  earning: DollarSign,
  success: CheckCircle,
  alert: AlertCircle,
  default: Package,
};

export default function InvestorNotification({ isMobile = false }: { isMobile?: boolean }) {
  const [isOpen, setIsOpen] = useState(false);
  const [notifications] = useState(mockNotifications);
  const unreadCount = notifications.filter(n => !n.read).length;

  if (isMobile) {
    return (
      <div className="lg:hidden fixed top-0 left-0 right-0 h-14 bg-white border-b border-slate-200 flex items-center justify-between px-4 z-40">
        <div className="flex items-center gap-2">
          <h1 className="text-lg font-extrabold text-accent">JAIBEN</h1>
          <span className="text-[10px] text-accent font-medium">Investor</span>
        </div>
        <button
          onClick={() => setIsOpen(true)}
          className="relative p-2 hover:bg-slate-100 rounded-lg transition-colors"
        >
          <Bell className="w-5 h-5 text-slate-600" />
          {unreadCount > 0 && (
            <span className="absolute top-1 right-1 w-4 h-4 bg-red-500 text-white text-[10px] font-bold rounded-full flex items-center justify-center">
              {unreadCount}
            </span>
          )}
        </button>

        {isOpen && (
          <>
            <div
              className="fixed inset-0 bg-black/40 z-40"
              onClick={() => setIsOpen(false)}
            />
            <div className="fixed top-14 left-0 right-0 bg-white border-b border-slate-200 shadow-lg z-50 max-h-[60vh] overflow-y-auto">
              <div className="p-4">
                <div className="flex items-center justify-between mb-4">
                  <h2 className="font-bold text-slate-800">Notifications</h2>
                  <button
                    onClick={() => setIsOpen(false)}
                    className="p-1 hover:bg-slate-100 rounded"
                  >
                    <X className="w-5 h-5 text-slate-500" />
                  </button>
                </div>
                <div className="space-y-3">
                  {notifications.map((notif) => {
                    const Icon = iconMap[notif.type] || iconMap.default;
                    return (
                      <div
                        key={notif.id}
                        className={`p-3 rounded-xl border ${notif.read ? 'border-slate-100 bg-white' : 'border-slate-200 bg-slate-50'}`}
                      >
                        <div className="flex items-start gap-3">
                          <div className={`w-8 h-8 rounded-lg flex items-center justify-center shrink-0 ${notif.read ? 'bg-slate-100' : 'bg-accent/10'}`}>
                            <Icon className={`w-4 h-4 ${notif.read ? 'text-slate-400' : 'text-accent'}`} />
                          </div>
                          <div className="flex-1 min-w-0">
                            <p className={`text-sm font-semibold ${notif.read ? 'text-slate-600' : 'text-slate-800'}`}>
                              {notif.title}
                            </p>
                            <p className="text-xs text-slate-500 mt-0.5 line-clamp-2">{notif.message}</p>
                            <p className="text-[10px] text-slate-400 mt-1">{notif.time}</p>
                          </div>
                          {!notif.read && (
                            <div className="w-2 h-2 bg-accent rounded-full shrink-0 mt-2" />
                          )}
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
            </div>
          </>
        )}
      </div>
    );
  }

  return (
    <div className="hidden lg:block w-80 shrink-0">
      <div className="bg-white rounded-2xl border border-slate-200 shadow-sm sticky top-6">
        <div className="p-4 border-b border-slate-100 flex items-center justify-between">
          <h2 className="font-bold text-slate-800 flex items-center gap-2">
            <Bell className="w-5 h-5 text-slate-400" />
            Notifications
          </h2>
          {unreadCount > 0 && (
            <span className="px-2 py-0.5 bg-accent text-white text-xs font-bold rounded-full">
              {unreadCount} new
            </span>
          )}
        </div>
        <div className="p-3 space-y-2 max-h-[calc(100vh-200px)] overflow-y-auto">
          {notifications.map((notif) => {
            const Icon = iconMap[notif.type] || iconMap.default;
            return (
              <div
                key={notif.id}
                className={`p-3 rounded-xl border transition-all cursor-pointer hover:shadow-sm ${notif.read ? 'border-slate-100 hover:border-slate-200' : 'border-slate-200 bg-slate-50 hover:bg-slate-100'}`}
              >
                <div className="flex items-start gap-3">
                  <div className={`w-9 h-9 rounded-lg flex items-center justify-center shrink-0 ${notif.read ? 'bg-slate-100' : 'bg-accent/10'}`}>
                    <Icon className={`w-4 h-4 ${notif.read ? 'text-slate-400' : 'text-accent'}`} />
                  </div>
                  <div className="flex-1 min-w-0">
                    <p className={`text-sm font-semibold ${notif.read ? 'text-slate-600' : 'text-slate-800'}`}>
                      {notif.title}
                    </p>
                    <p className="text-xs text-slate-500 mt-0.5 line-clamp-2">{notif.message}</p>
                    <p className="text-[10px] text-slate-400 mt-1">{notif.time}</p>
                  </div>
                  {!notif.read && (
                    <div className="w-2 h-2 bg-accent rounded-full shrink-0 mt-2" />
                  )}
                </div>
              </div>
            );
          })}
        </div>
        <div className="p-3 border-t border-slate-100">
          <button className="w-full text-sm font-semibold text-accent hover:text-accent-dark flex items-center justify-center gap-1 py-2 hover:bg-slate-50 rounded-lg transition-colors">
            View All Notifications <ArrowRight className="w-4 h-4" />
          </button>
        </div>
      </div>
    </div>
  );
}