import React, { useState } from 'react';
import { useCalculatorStore } from '../../store/calculatorStore';

export const EnclosureClassification: React.FC = () => {
    const { wind, setWind } = useCalculatorStore();
    const { enclosure, groundElevationFactor } = wind;

    // Internal state for temporary enclosure test inputs (Ao, Ag, etc.)
    // In a full implementation, these might be in the store too.
    const [testInputs, setTestInputs] = useState({
        ao: 500,
        ag: 600,
        aoi: 1000,
        agi: 10000
    });

    const updateEnclosure = (updates: Partial<typeof enclosure>) => {
        setWind({ enclosure: { ...enclosure, ...updates } });
    };

    const handleTestChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setTestInputs({ ...testInputs, [e.target.name]: parseFloat(e.target.value) });
        // Trigger re-eval logic here if needed
    };

    return (
        <div className="card">
            <div className="card-header">Enclosure & Elevation</div>

            <div className="input-group" style={{ marginBottom: '1rem' }}>
                <label className="input-label">Ground Elevation Factor (Ke):</label>
                <input
                    type="number"
                    step="0.01"
                    className="input-field"
                    value={groundElevationFactor}
                    onChange={(e) => setWind({ groundElevationFactor: parseFloat(e.target.value) })}
                />
            </div>

            <div className="flex-col gap-sm">
                <div className="input-group">
                    <label className="input-label">Classification:</label>
                    <select
                        name="classification"
                        className="input-field"
                        value={enclosure.classification}
                        onChange={(e) => updateEnclosure({ classification: e.target.value as any })}
                    >
                        <option value="Enclosed">Enclosed</option>
                        <option value="Partially Enclosed">Partially Enclosed</option>
                        <option value="Open">Open</option>
                    </select>
                </div>

                <div className="input-group">
                    <label className="input-label">Internal Pressure (GCpi):</label>
                    <input
                        type="number"
                        step="0.01"
                        className="input-field"
                        value={wind.internalPressure}
                        onChange={(e) => setWind({ internalPressure: parseFloat(e.target.value) })}
                    />
                </div>

                <div style={{ marginTop: '10px', fontSize: '0.85em', border: '1px solid #ddd', padding: '8px' }}>
                    <strong>Test for Classification (Optional):</strong>
                    <div style={{ display: 'grid', gridTemplateColumns: 'min-content 1fr', gap: '5px', marginTop: '5px' }}>
                        <span>Ao:</span> <input type="number" name="ao" value={testInputs.ao} onChange={handleTestChange} style={{ width: '60px' }} />
                        <span>Ag:</span> <input type="number" name="ag" value={testInputs.ag} onChange={handleTestChange} style={{ width: '60px' }} />
                        {/* More inputs as per screenshot */}
                    </div>
                </div>
            </div>
        </div>
    );
};