ANTOOZA-FRONTEND/app/studio/donation/alert/_components/AlertPreviewPanel.tsx

'use client';

import { useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPlay } from '@fortawesome/free-solid-svg-icons';
import View from '@/app/widget/alert/[widgetToken]/view';
import { DonationAlertConfig, DonationAlertData } from '@/types/donation';
import {
	DONATION_AMOUNT_MIN, DONATION_AMOUNT_MAX, DONATION_AMOUNT_STEP, DONATION_AMOUNT_DEFAULT,
	ALERT_NAME_MAX_LENGTH, ALERT_MESSAGE_MAX_LENGTH,
	PREVIEW_DEFAULT_NAME, PREVIEW_DEFAULT_MESSAGE
} from '@/constants/donation';
import type { FormState } from '../types';

type Props = {
	form: FormState;
};

export default function AlertPreviewPanel({ form }: Props) {
	const [previewName, setPreviewName] = useState(PREVIEW_DEFAULT_NAME);
	const [previewAmount, setPreviewAmount] = useState(DONATION_AMOUNT_DEFAULT);
	const [previewMessage, setPreviewMessage] = useState(PREVIEW_DEFAULT_MESSAGE);
	const [previewKey, setPreviewKey] = useState(0);
	const [showPreview, setShowPreview] = useState(false);

	// form → DonationAlertConfig 매핑 (id만 추가)
	const config: DonationAlertConfig = { id: 0, ...form };

	const fakeAlert: DonationAlertData = {
		alertID: previewKey,
		donationID: 0,
		correlationID: '',
		sponsorMemberID: 0,
		sendName: previewName || PREVIEW_DEFAULT_NAME,
		amount: previewAmount || DONATION_AMOUNT_DEFAULT,
		netAmount: previewAmount || DONATION_AMOUNT_DEFAULT,
		message: previewMessage || null,
		channelID: 0,
		channelName: '',
		crewMemberID: null,
		crewMemberNickname: null,
		isTest: true,
		createdAt: new Date().toISOString()
	};

	const handlePreview = () => {
		setShowPreview(false);
		// 다음 tick에 다시 마운트해서 애니메이션 재실행 (key + show 토글)
		requestAnimationFrame(() => {
			setPreviewKey(prev => prev + 1);
			setShowPreview(true);
		});
	};

	const handleComplete = () => {
		setShowPreview(false);
	};

	return (
		<aside className="alert-config__preview-panel">
			<div className="alert-config__widget">
				<div className="alert-config__widget-label">미리보기</div>
				<div className="alert-config__widget-frame">
					{showPreview && (
						<View
							key={previewKey}
							alert={fakeAlert}
							config={config}
							isAudioOnly={false}
							isVideoOnly={false}
							onComplete={handleComplete}
						/>
					)}
				</div>
			</div>

			<fieldset className="alert-config__fieldset">
				<legend className="alert-config__legend">미리보기</legend>
				<div className="alert-config__preview-form">
					<div className="alert-config__field">
						<label htmlFor="preview-amount" className="alert-config__field-label">후원 금액 (원)</label>
						<input
							id="preview-amount"
							type="number"
							className="alert-config__input"
							min={DONATION_AMOUNT_MIN}
							max={DONATION_AMOUNT_MAX}
							step={DONATION_AMOUNT_STEP}
							value={previewAmount}
							onChange={e => setPreviewAmount(parseInt(e.target.value) || DONATION_AMOUNT_DEFAULT)}
						/>
					</div>
					<div className="alert-config__field">
						<label htmlFor="preview-name" className="alert-config__field-label">이름</label>
						<input
							id="preview-name"
							type="text"
							className="alert-config__input"
							maxLength={ALERT_NAME_MAX_LENGTH}
							value={previewName}
							onChange={e => setPreviewName(e.target.value)}
							placeholder="후원자 이름"
						/>
					</div>
					<div className="alert-config__field">
						<label htmlFor="preview-message" className="alert-config__field-label">보낼 내용</label>
						<input
							id="preview-message"
							type="text"
							className="alert-config__input"
							maxLength={ALERT_MESSAGE_MAX_LENGTH}
							value={previewMessage}
							onChange={e => setPreviewMessage(e.target.value)}
							placeholder="후원 메시지"
						/>
					</div>
					<button
						type="button"
						className="alert-config__btn alert-config__btn--primary alert-config__preview-btn"
						onClick={handlePreview}
					>
						<FontAwesomeIcon icon={faPlay} />
						미리보기
					</button>
				</div>
			</fieldset>
		</aside>
	);
}