/** 訂票表單組件 */

const BookingForm = ({ 
    date, 
    startTime, 
    endTime, 
    startStation, 
    endStation,
    puyumaOnly,
    window,
    swapSeat,
    t3k,
    note,
    onDateChange,
    onStartTimeChange,
    onEndTimeChange,
    onStartStationChange,
    onEndStationChange,
    onPuyumaOnlyChange,
    onWindowChange,
    onSwapSeatChange,
    onT3kChange,
    onNoteChange,
    onSubmit,
    isSubmitting
}) => {
    const stations = TRA_STATIONS;

    const handleSubmit = (e) => {
        e.preventDefault();
        onSubmit();
    };

    return (
        <form onSubmit={handleSubmit}>
            <h2 className="text-xl font-bold text-gray-800 mb-6">訂票資訊</h2>
            
            <DatePicker value={date} onChange={onDateChange} />
            
            <div className="grid grid-cols-2 gap-4 mb-4">
                <TimePicker 
                    label="出發時間" 
                    value={startTime} 
                    onChange={onStartTimeChange} 
                />
                <TimePicker 
                    label="到達時間" 
                    value={endTime} 
                    onChange={onEndTimeChange} 
                />
            </div>
            
            <StationSelector
                label="出發站"
                value={startStation}
                onChange={onStartStationChange}
                stations={stations}
            />
            
            <StationSelector
                label="終點站"
                value={endStation}
                onChange={onEndStationChange}
                stations={stations}
            />
            
            <div className="mb-6">
                <label className="block text-sm font-medium text-gray-700 mb-3">
                    特需選項
                </label>
                <div className="space-y-2">
                    <label className="flex items-center">
                        <input
                            type="checkbox"
                            checked={puyumaOnly}
                            onChange={(e) => onPuyumaOnlyChange(e.target.checked)}
                            className="w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
                        />
                        <span className="ml-2 text-gray-700">限普悠瑪</span>
                    </label>
                    <label className="flex items-center">
                        <input
                            type="checkbox"
                            checked={window}
                            onChange={(e) => onWindowChange(e.target.checked)}
                            className="w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
                        />
                        <span className="ml-2 text-gray-700">靠窗座位</span>
                    </label>
                    <label className="flex items-center">
                        <input
                            type="checkbox"
                            checked={swapSeat}
                            onChange={(e) => onSwapSeatChange(e.target.checked)}
                            className="w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
                        />
                        <span className="ml-2 text-gray-700">同車換坐</span>
                    </label>
                    <label className="flex items-center">
                        <input
                            type="checkbox"
                            checked={t3k}
                            onChange={(e) => onT3kChange(e.target.checked)}
                            className="w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
                        />
                        <span className="ml-2 text-gray-700">自強 3000</span>
                    </label>
                </div>
            </div>
            
            {/* 備註欄位 */}
            <div className="mb-6">
                <label className="block text-sm font-medium text-gray-700 mb-2">
                    備註（選填）
                </label>
                <textarea
                    value={note || ''}
                    onChange={(e) => onNoteChange(e.target.value)}
                    placeholder="輸入備註（最多 200 字）"
                    maxLength={200}
                    rows={3}
                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-base resize-none"
                />
                <div className="text-xs text-gray-500 mt-1 text-right">
                    {(note || '').length}/200
                </div>
            </div>
            
            <button
                type="submit"
                disabled={isSubmitting || !startStation || !endStation}
                className="w-full bg-blue-500 hover:bg-blue-600 disabled:bg-gray-400 disabled:cursor-not-allowed text-white font-bold py-3 px-4 rounded-lg transition-colors text-base"
            >
                {isSubmitting ? '提交中...' : '提交訂票'}
            </button>
        </form>
    );
};