/** 高鐵訂票表單組件 */

const HSRBookingForm = ({
    nationalId,
    departureStation,
    destinationStation,
    departureDate,
    departureTime,
    latestArrival,
    note,
    onNationalIdChange,
    onDepartureStationChange,
    onDestinationStationChange,
    onDepartureDateChange,
    onDepartureTimeChange,
    onLatestArrivalChange,
    onNoteChange,
    onSubmit,
    isSubmitting,
    message
}) => {
    // 高鐵站列表
    const hsrStations = [
        '南港', '台北', '板橋', '桃園', '新竹', '苗栗',
        '台中', '彰化', '雲林', '嘉義', '台南', '左營'
    ];

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

    return (
        <form onSubmit={handleSubmit}>
            <h2 className="text-xl font-bold text-gray-800 mb-6">訂票資訊</h2>
            
            {/* 身分證字號 */}
            <div className="mb-4">
                <label className="block text-sm font-medium text-gray-700 mb-2">
                    身分證字號
                </label>
                <input
                    type="text"
                    value={nationalId}
                    onChange={(e) => onNationalIdChange(e.target.value)}
                    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"
                    placeholder="請輸入身分證字號"
                />
            </div>

            {/* 出發站 */}
            <div className="mb-4">
                <label className="block text-sm font-medium text-gray-700 mb-2">
                    出發站
                </label>
                <select
                    value={departureStation}
                    onChange={(e) => onDepartureStationChange(e.target.value)}
                    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"
                >
                    <option value="">請選擇出發站</option>
                    {hsrStations.map((station) => (
                        <option key={station} value={station}>
                            {station}
                        </option>
                    ))}
                </select>
            </div>

            {/* 目的地站 */}
            <div className="mb-4">
                <label className="block text-sm font-medium text-gray-700 mb-2">
                    目的地站
                </label>
                <select
                    value={destinationStation}
                    onChange={(e) => onDestinationStationChange(e.target.value)}
                    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"
                >
                    <option value="">請選擇目的地站</option>
                    {hsrStations.map((station) => (
                        <option key={station} value={station}>
                            {station}
                        </option>
                    ))}
                </select>
            </div>

            {/* 出發日期 */}
            <DatePicker 
                value={departureDate} 
                onChange={onDepartureDateChange} 
            />
            
            {/* 出發時間 */}
            <HSRTimePicker
                label="出發時間"
                value={departureTime}
                onChange={onDepartureTimeChange}
            />

            {/* 最晚抵達時間 */}
            <HSRTimePicker
                label="最晚抵達時間（選填）"
                value={latestArrival}
                onChange={onLatestArrivalChange}
            />

            {/* 備註欄位 */}
            <div className="mb-4">
                <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>

            {/* 訊息顯示 */}
            {message && (
                <div className={`mb-4 p-3 rounded-lg ${
                    message.type === 'success' 
                        ? 'bg-green-100 text-green-800' 
                        : 'bg-red-100 text-red-800'
                }`}>
                    {message.text}
                </div>
            )}
            
            <button
                type="submit"
                disabled={isSubmitting || !nationalId || !departureStation || !destinationStation}
                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>
    );
};