"use client";

import { useState } from "react";
import { Bell } from "lucide-react";
import { useAppTheme } from "@/components/ThemeProvider";

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;
  const { theme } = useAppTheme();
  const isDark = theme === "dark";

  return (
    <div className={`min-h-screen ${isDark ? "bg-gray-900" : "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 ${isDark ? "text-white" : "text-gray-900"}`} />
            <h1 className={`text-xl sm:text-2xl font-semibold ${isDark ? "text-white" : "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={`rounded-lg border overflow-hidden ${isDark ? "bg-gray-800 border-gray-700" : "bg-white border-gray-200"}`}>
          {notifications.length === 0 ? (
            <div className={`p-8 sm:p-12 text-center ${isDark ? "text-gray-400" : "text-gray-500"}`}>
              <Bell className={`w-12 h-12 mx-auto mb-2 ${isDark ? "text-gray-600" : "text-gray-300"}`} />
              <p className="text-sm">No notifications</p>
            </div>
          ) : (
            <div className={`divide-y ${isDark ? "divide-gray-700" : ""}`}>
              {notifications.map((notification) => {
                return (
                  <div
                    key={notification.id}
                    className={`p-4 sm:p-6 transition-colors cursor-pointer ${
                      !notification.read
                        ? isDark
                          ? "bg-rose-500/10"
                          : "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 ${isDark ? "text-white" : "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 mt-1 ${isDark ? "text-gray-400" : "text-gray-600"}`}>
                        {notification.message}
                      </p>
                      <p className={`text-xs mt-1 ${isDark ? "text-gray-500" : "text-gray-400"}`}>
                        {notification.time}
                      </p>
                    </div>
                  </div>
                );
              })}
            </div>
          )}
        </div>
      </main>
    </div>
  );
}