dpot-frontend/app/(main)/notification/page.tsx

'use client';

import { useEffect, useState } from 'react';
import { fetchApi } from '@/lib/utils/client';
import { NotificationItem } from '@/types/notification';
import { NotificationListResponse } from '@/types/response/notification/list';
import { NotificationReadRequest } from '@/types/request/notification/read';

const TYPE_LABELS: Record<number, string> = {
	1: '후원 받음',
	2: '후원 보냄',
	10: '크루 초대',
	11: '크루 시작',
	12: '크루 종료',
	13: '크루 후원',
	20: '정산 승인',
	21: '정산 거부',
	30: '새 쪽지',
	99: '시스템'
};

export default function NotificationPage() {
	const [notifications, setNotifications] = useState<NotificationItem[]>([]);
	const [total, setTotal] = useState(0);
	const [page, setPage] = useState(1);
	const [loading, setLoading] = useState(true);

	useEffect(() => {
		loadNotifications();
	}, [page]);

	const loadNotifications = async () => {
		setLoading(true);
		try {
			const res = await fetchApi<NotificationListResponse>(`/api/notification/list?pageNum=${page}&perPage=20`, { silent: true });
			if (res.data) {
				setNotifications(res.data.list || []);
				setTotal(res.data.total || 0);
			}
		} catch {}
		setLoading(false);
	};

	const handleRead = async (item: NotificationItem) => {
		if (!item.isRead) {
			await fetchApi('/api/notification/read', {
				method: 'POST',
				body: { notificationID: item.id } as NotificationReadRequest,
				silent: true
			});
			setNotifications(prev => prev.map(n => n.id === item.id ? { ...n, isRead: true } : n));
		}
		if (item.actionUrl) {
			window.location.href = item.actionUrl;
		}
	};

	const handleReadAll = async () => {
		await fetchApi('/api/notification/read', {
			method: 'POST',
			body: {} as NotificationReadRequest,
			silent: true
		});
		setNotifications(prev => prev.map(n => ({ ...n, isRead: true })));
	};

	const formatDate = (dateStr: string) => {
		const d = new Date(dateStr);
		const now = new Date();
		const diff = Math.floor((now.getTime() - d.getTime()) / 60000);
		if (diff < 1) { return '방금'; }
		if (diff < 60) { return `${diff}분 전`; }
		if (diff < 1440) { return `${Math.floor(diff / 60)}시간 전`; }
		return `${d.getFullYear()}-${(d.getMonth() + 1).toString().padStart(2, '0')}-${d.getDate().toString().padStart(2, '0')}`;
	};

	return (
		<div className="container mx-auto max-w-2xl p-4">
			<div className="flex items-center justify-between mb-4">
				<h1 className="text-xl font-bold">알림</h1>
				<button type="button" onClick={handleReadAll} className="text-sm text-blue-500 hover:underline">모두 읽음</button>
			</div>

			{loading && <div className="text-center text-gray-500 py-10">로딩 중...</div>}

			{!loading && notifications.length === 0 && (
				<div className="text-center text-gray-500 py-10">알림이 없습니다</div>
			)}

			<div className="flex flex-col gap-2">
				{notifications.map(n => (
					<div key={n.id} onClick={() => handleRead(n)} className={`flex items-start gap-3 p-3 rounded-lg cursor-pointer border transition-colors ${n.isRead ? 'bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700' : 'bg-blue-50 dark:bg-blue-950 border-blue-200 dark:border-blue-800'}`}>
						{n.imageUrl ? (
							<img src={n.imageUrl} alt="" className="w-10 h-10 rounded-full object-cover flex-shrink-0" />
						) : (
							<div className="w-10 h-10 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center flex-shrink-0 text-lg">🔔</div>
						)}
						<div className="flex-1 overflow-hidden">
							<div className="flex items-center gap-2 mb-1">
								<span className="text-xs bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded text-gray-600 dark:text-gray-400">
									{TYPE_LABELS[n.type] || '알림'}
								</span>
								<span className="text-xs text-gray-400">{formatDate(n.createdAt)}</span>
							</div>
							<div className={`text-sm ${n.isRead ? 'font-normal' : 'font-semibold'}`}>{n.title}</div>
							<div className="text-xs text-gray-500 mt-0.5 overflow-hidden text-ellipsis whitespace-nowrap">{n.message}</div>
						</div>
						{!n.isRead && <div className="w-2 h-2 rounded-full bg-blue-500 flex-shrink-0 mt-2" />}
					</div>
				))}
			</div>

			{total > 20 && (
				<div className="flex justify-center gap-2 mt-4">
					<button type="button" onClick={() => setPage(p => Math.max(1, p - 1))} disabled={page <= 1} className="px-3 py-1 text-sm border rounded disabled:opacity-50">이전</button>
					<span className="px-3 py-1 text-sm">{page} / {Math.ceil(total / 20)}</span>
					<button type="button" onClick={() => setPage(p => p + 1)} disabled={page >= Math.ceil(total / 20)} className="px-3 py-1 text-sm border rounded disabled:opacity-50">다음</button>
				</div>
			)}
		</div>
	);
}