'use client';

import { useState } from 'react';
import { Bell, X, ArrowRight, Package, DollarSign, Bike, AlertCircle, CheckCircle, Filter, Check } from 'lucide-react';
import Link from 'next/link';

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: 'Damage Alert',
    message: 'Minor scratch damage has been reported on your bike XY-9012.',
    time: '2 days ago',
    read: true,
  },
  {
    id: '5',
    type: 'rental',
    title: 'Rental Ended',
    message: 'Bike AB-1234 has been returned by rider MR-456',
    time: '3 hours ago',
    read: false,
  },
  {
    id: '6',
    type: 'earning',
    title: 'Daily Earning Summary',
    message: 'You earned ৳1,250 from 5 rentals today',
    time: 'Yesterday',
    read: true,
  },
  {
    id: '7',
    type: 'alert',
    title: 'Damage Alert',
    message: 'Cracked indicator light has been reported on your bike EF-3456.',
    time: '5 hours ago',
    read: true,
  },
  {
    id: '8',
    type: 'success',
    title: 'Investment Renewed',
    message: 'Your Gold Plan investment has been automatically renewed',
    time: '3 days ago',
    read: true,
  },
];

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

const typeColors: Record<string, string> = {
  rental: 'bg-blue-100 text-blue-600',
  earning: 'bg-green-100 text-green-600',
  success: 'bg-emerald-100 text-emerald-600',
  alert: 'bg-amber-100 text-amber-600',
  default: 'bg-slate-100 text-slate-600',
};

export default function InvestorNotificationsPage() {
  const [notifications, setNotifications] = useState(mockNotifications);
  const [filter, setFilter] = useState<'all' | 'unread'>('all');

  const filteredNotifications = filter === 'unread'
    ? notifications.filter(n => !n.read)
    : notifications;

  const unreadCount = notifications.filter(n => !n.read).length;

  const markAsRead = (id: string) => {
    setNotifications(prev => prev.map(n =>
      n.id === id ? { ...n, read: true } : n
    ));
  };

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

  return (
    <div className="min-h-screen lg:pt-6 pt-0">
      <InvestorNotification isMobile />
      <div className="pt-18 lg:pt-0 p-4 lg:p-6 max-w-8xl mx-auto mb-12 lg:mb-0">
        <div className="mb-6">
          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
            <div>
              <h1 className="text-xl lg:text-2xl font-bold text-slate-800 flex items-center gap-2">
                <Bell className="w-5 h-5 lg:w-6 lg:h-6 text-investor" /> Notifications
              </h1>
              <p className="text-sm text-slate-500 mt-1">Stay updated with your investment activities</p>
            </div>
            {unreadCount > 0 && (
              <button
                onClick={markAllAsRead}
                className="px-4 py-2 bg-white border border-slate-200 text-slate-600 rounded-lg text-sm font-medium hover:bg-slate-50 flex items-center gap-2 shadow-sm"
              >
                <Check className="w-4 h-4" /> Mark all as read
              </button>
            )}
          </div>
        </div>

        <div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
          <div className="p-4 border-b border-slate-100 flex items-center justify-between">
            <div className="flex items-center gap-2">
              <button
                onClick={() => setFilter('all')}
                className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${filter === 'all'
                  ? 'bg-investor text-white'
                  : 'text-slate-600 hover:bg-slate-100'
                  }`}
              >
                All
              </button>
              <button
                onClick={() => setFilter('unread')}
                className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors flex items-center gap-1.5 ${filter === 'unread'
                  ? 'bg-investor text-white'
                  : 'text-slate-600 hover:bg-slate-100'
                  }`}
              >
                Unread
                {unreadCount > 0 && (
                  <span className="px-1.5 py-0.5 bg-red-500 text-white text-xs font-bold rounded-full">
                    {unreadCount}
                  </span>
                )}
              </button>
            </div>
          </div>

          <div className="divide-y divide-slate-100">
            {filteredNotifications.length === 0 ? (
              <div className="p-8 text-center">
                <Bell className="w-12 h-12 text-slate-300 mx-auto mb-3" />
                <p className="text-slate-500">No notifications found</p>
              </div>
            ) : (
              filteredNotifications.map((notif) => {
                const Icon = iconMap[notif.type] || iconMap.default;
                return (
                  <div
                    key={notif.id}
                    onClick={() => markAsRead(notif.id)}
                    className={`p-4 cursor-pointer transition-all hover:bg-slate-50 ${!notif.read ? 'bg-blue-50/50' : ''
                      }`}
                  >
                    <div className="flex items-start gap-4">
                      <div className={`w-10 h-10 rounded-xl flex items-center justify-center shrink-0 ${typeColors[notif.type]}`}>
                        <Icon className="w-5 h-5" />
                      </div>
                      <div className="flex-1 min-w-0">
                        <div className="flex items-center gap-2 mb-1">
                          <p className={`text-sm font-semibold ${notif.read ? 'text-slate-600' : 'text-slate-800'}`}>
                            {notif.title}
                          </p>
                          {!notif.read && (
                            <div className="w-2 h-2 bg-investor rounded-full" />
                          )}
                        </div>
                        <p className="text-sm text-slate-500 line-clamp-2">{notif.message}</p>
                        <p className="text-xs text-slate-400 mt-1">{notif.time}</p>
                      </div>
                    </div>
                  </div>
                );
              })
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

import InvestorNotification from '@/components/InvestorNotification';