import React, { useState, useEffect } from ‘react’;

const LiveReservationSystem = () => {
// 状態管理のためのステート
const [reservations, setReservations] = useState([]);
const [formData, setFormData] = useState({
name: ”,
email: ”,
phone: ”,
eventDate: ”,
eventTime: ‘開場 18:00 / 開演 19:00’,
numberOfPeople: 1,
});
const [showConfirmation, setShowConfirmation] = useState(false);
const [currentReservation, setCurrentReservation] = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const [events, setEvents] = useState([
{ date: ‘2025-03-20’, title: ‘ジャズナイト’ },
{ date: ‘2025-03-22’, title: ‘アコースティックセッション’ },
{ date: ‘2025-03-27’, title: ‘ロックバンドライブ’ },
{ date: ‘2025-04-03’, title: ‘フォークミュージックナイト’ },
{ date: ‘2025-04-10’, title: ‘ブルースジャムセッション’ }
]);
const [selectedEvent, setSelectedEvent] = useState(null);

// 予約一覧の取得（デモ用）
useEffect(() => {
const dummyReservations = [
{
_id: ‘1’,
name: ‘山田太郎’,
email: ‘yamada@example.com’,
phone: ‘090-1234-5678’,
eventDate: ‘2025-03-20’,
eventTime: ‘開場 18:00 / 開演 19:00’,
numberOfPeople: 2,
reservationNumber: ‘MR0001’,
reservationDate: ‘2025-03-15T10:30:00’,
status: ‘confirmed’
},
{
_id: ‘2’,
name: ‘佐藤花子’,
email: ‘sato@example.com’,
phone: ‘090-8765-4321’,
eventDate: ‘2025-03-20’,
eventTime: ‘開場 18:00 / 開演 19:00’,
numberOfPeople: 3,
reservationNumber: ‘MR0002’,
reservationDate: ‘2025-03-15T11:45:00’,
status: ‘confirmed’
}
];

setReservations(dummyReservations);
}, []);

// フォーム入力の処理
const handleInputChange = (e) => {
const { name, value } = e.target;
setFormData({
…formData,
[name]: value
});

// イベント日付が変更された場合、対応するイベントを選択
if (name === ‘eventDate’) {
const event = events.find(e => e.date === value);
setSelectedEvent(event || null);
}
};

// 予約の送信
const handleSubmit = async (e) => {
e.preventDefault();
setLoading(true);
setError(null);

try {
// 実際の環境では下記のようなAPIリクエストを行います
// const response = await fetch(‘/api/reservations’, {
// method: ‘POST’,
// headers: {
// ‘Content-Type’: ‘application/json’,
// },
// body: JSON.stringify(formData),
// });
// const result = await response.json();

// APIリクエストをシミュレーション
await new Promise(resolve => setTimeout(resolve, 1000)); // 1秒待機してAPIレスポンスをシミュレーション

// 新しい整理番号を生成（実際の環境ではサーバー側で生成）
const nextNumber = reservations.length + 1;
const reservationNumber = `MR${String(nextNumber).padStart(4, ‘0’)}`;

// 新しい予約オブジェクトを作成
const newReservation = {
_id: String(Date.now()),
…formData,
reservationNumber,
reservationDate: new Date().toISOString(),
status: ‘confirmed’
};

// 成功レスポンスをシミュレーション
const simulatedResponse = {
success: true,
data: newReservation,
emailSent: true,
adminNotificationSent: true
};

if (simulatedResponse.success) {
// 予約が成功した場合
setCurrentReservation(simulatedResponse.data);

// 予約リストを更新
setReservations([…reservations, simulatedResponse.data]);

// フォームをリセット
setFormData({
name: ”,
email: ”,
phone: ”,
eventDate: ”,
eventTime: ‘開場 18:00 / 開演 19:00’,
numberOfPeople: 1,
});

// 予約確認画面を表示
setShowConfirmation(true);

// メール送信のシミュレーションログ
console.log(`メール送信シミュレーション:
宛先: ${formData.email}
件名: [Mosrite Cafe] ライブ予約確認 #${reservationNumber}
本文: ライブ予約の確認メール

CC: info@mosritecafe.com
`);
} else {
// エラーメッセージを設定
setError(simulatedResponse.message || ‘予約の作成に失敗しました。’);
}
} catch (err) {
console.error(‘予約送信エラー:’, err);
setError(‘予約の送信中にエラーが発生しました。後でもう一度お試しください。’);
} finally {
setLoading(false);
}
};

// 新しい予約フォームに戻る
const handleBackToForm = () => {
setShowConfirmation(false);
setSelectedEvent(null);
};

// 日本語の曜日を取得
const getJapaneseDayOfWeek = (dateString) => {
const days = [‘日’, ‘月’, ‘火’, ‘水’, ‘木’, ‘金’, ‘土’];
const date = new Date(dateString);
return days[date.getDay()];
};

// 日付を日本語表示形式に変換
const formatJapaneseDate = (dateString) => {
const date = new Date(dateString);
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
const dayOfWeek = getJapaneseDayOfWeek(dateString);

return `${year}年${month}月${day}日(${dayOfWeek})`;
};

return (

);
};

export default LiveReservationSystem;