import React, { useEffect, useState } from 'react';
import { api } from '../lib/api';
import { NotificationDto } from '../types';

export default function Notifications() {
  const [list, setList] = useState<NotificationDto[]>([]);

  const load = () => api.get<NotificationDto[]>('/notifications').then(setList);

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

  const markRead = async (id: number) => {
    await api.post(`/notifications/${id}/read`);
    load();
  };

  return (
    <div className="page animate-in">
      <div className="page-header">
        <h1>通知</h1>
        <p>系统与业务提醒</p>
      </div>

      <div className="grid cols-2">
        {list.map((n) => (
          <div key={n.id} className={`card ${n.readAt ? 'read' : ''}`}>
            <div className="card-title">{n.title}</div>
            <div className="muted">{n.type}</div>
            <div className="card-content">{n.content}</div>
            <div className="card-footer">
              <span className="muted">{new Date(n.createdAt).toLocaleString()}</span>
              {!n.readAt && (
                <button className="btn btn-outline" onClick={() => markRead(n.id)}>
                  标记已读
                </button>
              )}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}