"use client";

import { useState } from "react";
import { Bell } from "lucide-react";

interface Notification {
  id: string;
  title: string;
  message: string;
  time: string;
  read: boolean;
}

export default function NotificationsPage() {
  const [notifications, setNotifications] = useState<Notification[]>([
    {
      id: "1",
      title: "New appointment scheduled",
      message: "John Smith booked an appointment for tomorrow",
      time: "2 hours ago",
      read: false,
    },
    {
      id: "2",
      title: "Payment received",
      message: "Payment of $150 received from Jane Doe",
      time: "5 hours ago",
      read: false,
    },
    {
      id: "3",
      title: "Appointment Reminder",
      message: "You have an appointment in 30 minutes with Emily Davis",
      time: "3 hours ago",
      read: false,
    },
    {
      id: "4",
      title: "New Message",
      message: "You received a new message from John Smith",
      time: "5 hours ago",
      read: true,
    },
    {
      id: "5",
      title: "Appointment Cancelled",
      message: "Robert Wilson cancelled his appointment scheduled for tomorrow",
      time: "1 day ago",
      read: true,
    },
  ]);

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

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Main Content */}
      <main className="p-3 sm:p-4 md:p-6 lg:p-8">
        {/* Page Header */}
        <div className="mb-4 sm:mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-4">
          <div className="flex items-center gap-3">
            <Bell className="w-5 h-5 sm:w-6 sm:h-6 text-gray-900" />
            <h1 className="text-xl sm:text-2xl font-semibold text-gray-900">
              Notifications
            </h1>
            {unreadCount > 0 && (
              <span className="px-2 py-1 text-xs font-medium bg-rose-100 text-rose-700 rounded-full">
                {unreadCount} new
              </span>
            )}
          </div>
        </div>

        {/* Notifications List */}
        <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
          {notifications.length === 0 ? (
            <div className="p-8 sm:p-12 text-center text-gray-500">
              <Bell className="w-12 h-12 mx-auto mb-2 text-gray-300" />
              <p className="text-sm">No notifications</p>
            </div>
          ) : (
            <div className="divide-y">
              {notifications.map((notification) => {
                return (
                  <div
                    key={notification.id}
                    className={`p-4 sm:p-6 hover:bg-gray-50 transition-colors cursor-pointer ${
                      !notification.read ? "bg-rose-50/50" : ""
                    }`}
                  >
                    <div className="flex-1 min-w-0">
                      <div className="flex items-start justify-between gap-2">
                        <p
                          className={`text-sm sm:text-base font-medium text-gray-900 ${
                            !notification.read ? "font-semibold" : ""
                          }`}
                        >
                          {notification.title}
                        </p>
                        {!notification.read && (
                          <span className="shrink-0 w-2 h-2 bg-green-500 rounded-full mt-1"></span>
                        )}
                      </div>
                      <p className="text-sm text-gray-600 mt-1">
                        {notification.message}
                      </p>
                      <p className="text-xs text-gray-400 mt-1">
                        {notification.time}
                      </p>
                    </div>
                  </div>
                );
              })}
            </div>
          )}
        </div>
      </main>
    </div>
  );
}

