eryao/web/src/components/NotificationPage.tsx

import { useEffect, useState, useCallback } from 'react';
import type { NotificationItem } from '../lib/api';
import { getNotifications, markNotificationRead, markAllNotificationsRead } from '../lib/api';

interface Props {
  locale: string;
  dashboard: { brandName: string; navHome: string; navStore: string; navDivination: string; navManual: string; navAuto: string; navHistory: string; navLanguage: string; navSettings: string; logout: string };
  notifications: { title: string; loading: string; error: string; empty: string; markAllRead: string; markAllReadDone: string };
}

function formatRelativeTime(dateStr: string, locale: string): string {
  const date = new Date(dateStr);
  const now = new Date();
  const diffMs = now.getTime() - date.getTime();
  const diffMins = Math.floor(diffMs / (1000 * 60));
  const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));

  if (locale === 'en') {
    if (diffMins < 1) return 'Just now';
    if (diffMins < 60) return `${diffMins} min ago`;
    if (diffHours < 24) return `${diffHours}h ago`;
    if (diffDays === 1) return 'Yesterday';
    return `${diffDays} days ago`;
  } else {
    if (diffMins < 1) return '刚刚';
    if (diffMins < 60) return `${diffMins}分钟前`;
    if (diffHours < 24) return `${diffHours}小时前`;
    if (diffDays === 1) return '昨天';
    return `${diffDays}天前`;
  }
}

function formatFullTime(dateStr: string, locale: string): string {
  const date = new Date(dateStr);
  if (locale === 'en') {
    return date.toLocaleDateString('en-US', {
      year: 'numeric',
      month: 'long',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit',
    });
  }
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
  });
}

export default function NotificationPage({ locale, notifications: n }: Props) {
  const [items, setItems] = useState<NotificationItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [selectedItem, setSelectedItem] = useState<NotificationItem | null>(null);
  const [markingAll, setMarkingAll] = useState(false);
  const [toast, setToast] = useState<string | null>(null);

  const fetchNotifications = useCallback(() => {
    setLoading(true);
    setError(null);
    getNotifications(locale)
      .then((res) => setItems(res.items))
      .catch((err) => setError(err.message || n.error))
      .finally(() => setLoading(false));
  }, [locale, n.error]);

  useEffect(() => {
    fetchNotifications();
  }, [fetchNotifications]);

  useEffect(() => {
    if (toast) {
      const timer = setTimeout(() => setToast(null), 2000);
      return () => clearTimeout(timer);
    }
  }, [toast]);

  const handleItemClick = async (item: NotificationItem) => {
    setSelectedItem(item);
    if (!item.isRead) {
      try {
        const updated = await markNotificationRead(item.id, locale);
        setItems((prev) => prev.map((i) => (i.id === item.id ? updated : i)));
      } catch {
        // ignore mark read error
      }
    }
  };

  const handleMarkAllRead = async () => {
    const unreadItems = items.filter((i) => !i.isRead);
    if (unreadItems.length === 0) return;

    setMarkingAll(true);
    try {
      await markAllNotificationsRead();
      setItems((prev) => prev.map((i) => ({ ...i, isRead: true })));
      setToast(n.markAllReadDone);
    } catch {
      // ignore error
    } finally {
      setMarkingAll(false);
    }
  };

  const closeModal = () => setSelectedItem(null);

  const unreadCount = items.filter((i) => !i.isRead).length;

  if (loading) {
    return (
      <div className="flex flex-col gap-6 min-h-full">
        <h1 className="text-slate-900 text-2xl font-bold">{n.title}</h1>
        <div className="text-slate-500">{n.loading}</div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="flex flex-col gap-6 min-h-full">
        <h1 className="text-slate-900 text-2xl font-bold">{n.title}</h1>
        <div className="text-red-500">{error}</div>
      </div>
    );
  }

  return (
    <div className="flex flex-col gap-6 min-h-full">
      {/* Header */}
      <div className="flex items-center justify-between">
        <h1 className="text-slate-900 text-2xl font-bold">{n.title}</h1>
        {unreadCount > 0 && (
          <button
            onClick={handleMarkAllRead}
            disabled={markingAll}
            className="text-sm text-amber-600 hover:text-amber-700 disabled:text-slate-400"
          >
            {markingAll ? '...' : n.markAllRead}
          </button>
        )}
      </div>

      {/* List */}
      {items.length === 0 ? (
        <div className="text-slate-500 py-8 text-center">{n.empty}</div>
      ) : (
        <div className="flex flex-col gap-3">
          {items.map((notif) => (
            <button
              key={notif.id}
              onClick={() => handleItemClick(notif)}
              className="relative bg-white rounded-xl px-5 py-4 flex items-start gap-4 hover:shadow-sm transition-shadow text-left w-full"
            >
              {!notif.isRead && <div className="absolute left-4 top-5 w-2 h-2 rounded-full bg-red-500" />}
              <div className="flex-1 min-w-0 ml-2">
                <p className={`text-[15px] ${!notif.isRead ? 'text-slate-900 font-semibold' : 'text-slate-600'}`}>
                  {notif.title}
                </p>
                <p className="text-slate-400 text-[13px] mt-1">{notif.body}</p>
              </div>
              <span className="text-slate-400 text-xs shrink-0 mt-0.5">{formatRelativeTime(notif.createdAt, locale)}</span>
            </button>
          ))}
        </div>
      )}

      {/* Modal Overlay */}
      {selectedItem && (
        <div
          className="fixed inset-0 bg-black/50 z-40 flex items-center justify-center p-4"
          onClick={closeModal}
        >
          {/* Modal Content */}
          <div
            className="bg-white rounded-2xl shadow-xl w-full max-w-md max-h-[80vh] overflow-hidden flex flex-col"
            onClick={(e) => e.stopPropagation()}
          >
            {/* Modal Header */}
            <div className="flex items-start justify-between gap-3 p-5 border-b border-slate-100">
              <div className="flex-1 min-w-0">
                <h2 className="text-lg font-semibold text-slate-900">{selectedItem.title}</h2>
                <p className="text-slate-400 text-sm mt-1">{formatFullTime(selectedItem.createdAt, locale)}</p>
              </div>
              <button
                onClick={closeModal}
                className="text-slate-400 hover:text-slate-600 p-1 shrink-0 -mt-1 -mr-1"
                aria-label="Close"
              >
                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </div>

            {/* Modal Body */}
            <div className="p-5 overflow-y-auto">
              {/* Status Badge */}
              <div className="mb-4">
                <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
                  selectedItem.isRead ? 'bg-slate-100 text-slate-600' : 'bg-amber-100 text-amber-700'
                }`}>
                  {selectedItem.isRead
                    ? (locale === 'en' ? 'Read' : '已读')
                    : (locale === 'en' ? 'Unread' : '未读')}
                </span>
              </div>

              {/* Body */}
              <div className="text-slate-700 text-[15px] leading-relaxed whitespace-pre-wrap">
                {selectedItem.body}
              </div>
            </div>

            {/* Modal Footer */}
            <div className="p-5 border-t border-slate-100">
              <button
                onClick={closeModal}
                className="w-full py-2.5 bg-violet-600 text-white rounded-lg font-medium hover:bg-violet-700 transition-colors"
              >
                {locale === 'en' ? 'Close' : '关闭'}
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Toast */}
      {toast && (
        <div className="fixed bottom-8 left-1/2 -translate-x-1/2 bg-slate-800 text-white px-4 py-2 rounded-lg text-sm shadow-lg z-50">
          {toast}
        </div>
      )}
    </div>
  );
}