dpot-frontend/app/studio/donation/crew/widget/_components/CrewWidgetListPanel.tsx

'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { fetchApi } from '@/lib/utils/client';
import { useStudioContext } from '@/app/studio/context';
import { useCrewWidgetConfigContext } from '../context';
import { CREW_PERIODS, CREW_WIDGET_THEMES } from '../constants';
import { formatDateTime } from '../types';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';

export default function CrewWidgetListPanel()
{
	const router = useRouter();
	const { channelID } = useStudioContext();
	const { items, loading, fetchList } = useCrewWidgetConfigContext();
	const [selected, setSelected] = useState<Set<number>>(new Set());

	const toggleSelect = (id: number) => {
		setSelected(prev => {
			const next = new Set(prev);
			if (next.has(id)) next.delete(id); else next.add(id);
			return next;
		});
	};

	const toggleAll = () => {
		if (selected.size === items.length) {
			setSelected(new Set());
		} else {
			setSelected(new Set(items.map(i => i.id)));
		}
	};

	const handleBatchDelete = async () => {
		if (selected.size === 0) {
			return;
		}

		if (!confirm(`${selected.size}개 설정을 삭제하시겠습니까?`)) {
			return;
		}

		for (const id of selected) {
			try {
				await fetchApi(`/api/studio/crew/widget/config/${id}/${channelID}`, { method: 'DELETE' });
			} catch {}
		}

		setSelected(new Set());
		fetchList();
	};

	const getPeriodLabel = (p: number) => CREW_PERIODS.find(x => x.value === p)?.label ?? '-';
	const getThemeLabel = (t: number) => CREW_WIDGET_THEMES.find(x => x.value === t)?.label ?? '-';

	if (loading) return <p className="studio-page__empty">준비 중...</p>;

	return (
		<div className="studio-page">
			<div className="studio-page__header">
				<h1 className="studio-page__title">크루 위젯 설정</h1>
				<div className="studio-page__header-actions">
					{selected.size > 0 && (
						<Button variant="destructive" size="sm" onClick={handleBatchDelete}>
							{selected.size}개 삭제
						</Button>
					)}
					<Button size="sm" onClick={() => router.push('/studio/donation/crew/widget/add')}>
						+ 추가
					</Button>
				</div>
			</div>

			<div className="studio-page__table-wrap">
				<table className="studio-page__table">
					<thead>
						<tr>
							<th>
								<Checkbox checked={items.length > 0 && selected.size === items.length} onCheckedChange={toggleAll} />
							</th>
							<th>제목</th>
							<th>기간</th>
							<th>테마</th>
							<th>최대 표시</th>
							<th>활성</th>
							<th>작업</th>
						</tr>
					</thead>
					<tbody>
						{items.length === 0 ? (
							<tr><td colSpan={7} className="studio-page__empty">등록된 위젯 설정이 없습니다.</td></tr>
						) : items.map(item => (
							<tr key={item.id}>
								<td>
									<Checkbox checked={selected.has(item.id)} onCheckedChange={() => toggleSelect(item.id)} />
								</td>
								<td>{item.title}</td>
								<td>
									{getPeriodLabel(item.period)}
									{item.period === 5 && item.startAt && item.endAt && (
										<div style={{ fontSize: '0.75rem', color: 'var(--muted-foreground)' }}>
											{formatDateTime(item.startAt)} ~ {formatDateTime(item.endAt)}
										</div>
									)}
								</td>
								<td>{getThemeLabel(item.theme)}</td>
								<td>{item.maxDisplayCount}명</td>
								<td>
									<span className={`studio-page__badge studio-page__badge--${item.isActive ? 'active' : 'inactive'}`}>
										{item.isActive ? '활성' : '비활성'}
									</span>
								</td>
								<td>
									<Button variant="outline" size="sm" onClick={() => router.push(`/studio/donation/crew/widget/edit/${item.id}`)}>
										수정
									</Button>
								</td>
							</tr>
						))}
					</tbody>
				</table>
			</div>
		</div>
	);
}