import React, { useMemo } from 'react';
import { useCalculatorStore } from '../../store/calculatorStore';
import { calculateApproxFrequency } from '../../utils/windLogic';

export const GustFactorInput: React.FC = () => {
    const { wind, setWind, buildingGeometry } = useCalculatorStore();
    const { gust } = wind;

    // Calculate approximate frequency
    const calculatedFreq = useMemo(() => {
        return calculateApproxFrequency(buildingGeometry.meanRoofHeight, gust.buildingType);
    }, [buildingGeometry.meanRoofHeight, gust.buildingType]);

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

    const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
        const val = e.target.type === 'number' ? parseFloat(e.target.value) : e.target.value;
        updateGust({ [e.target.name]: val });
    };



    return (
        <div className="card">
            <div className="card-header">Gust Effect Factor (G)</div>
            <div className="flex-col gap-sm">
                <div className="report-report" style={{ fontSize: '0.9em', color: '#666', marginBottom: '8px' }}>
                    h = {buildingGeometry.meanRoofHeight} ft (from Code tab)
                </div>

                {/* Approx Lower Bound Frequency Section */}
                <div style={{ background: '#f5f5f5', padding: '10px', borderRadius: '4px', marginBottom: '10px' }}>
                    <div style={{ fontWeight: 600, marginBottom: '4px' }}>Approx Lower Bound Natural Frequency</div>
                    <div style={{ fontSize: '0.85em', color: '#666', marginBottom: '8px' }}>
                        (from ASCE 7-10+ Eq 12.8-7: Ta = Ct * h^x, na = 1/Ta)
                    </div>

                    <div className="input-group">
                        <select name="buildingType" className="input-field" style={{ width: '100%' }} value={gust.buildingType} onChange={handleChange}>
                            <option value="Steel MRF">Structural Steel moment-resisting frame buildings</option>
                            <option value="Concrete MRF">Concrete moment-resisting frame buildings</option>
                            <option value="Other">Steel and concrete bldgs w/ other lateral-force-resisting systems</option>
                        </select>
                    </div>

                    <div style={{ marginTop: '8px', fontWeight: 500, color: '#333' }}>
                        Calc na = {calculatedFreq} Hz
                    </div>
                </div>

                <div className="input-group">
                    <label className="input-label">Structure Type:</label>
                    <select name="type" className="input-field" value={gust.type} onChange={handleChange}>
                        <option value="Rigid">Rigid (T &lt; 1s)</option>
                        <option value="Flexible">Flexible (T &gt; 1s)</option>
                    </select>
                </div>

                {gust.type === 'Flexible' && (
                    <div className="flex-col gap-sm fade-in">
                        <div className="input-group">
                            <label className="input-label">Natural Freq (n1):</label>
                            <input type="number" step="0.1" name="naturalFrequency" className="input-field" value={gust.naturalFrequency} onChange={handleChange} />
                            <span className="input-unit">Hz</span>
                        </div>
                        <div className="input-group">
                            <label className="input-label">Damping Ratio (&beta;):</label>
                            <input type="number" step="0.001" name="dampingRatio" className="input-field" value={gust.dampingRatio} onChange={handleChange} />
                        </div>
                    </div>
                )}

                <div className="input-group">
                    <label className="input-label" style={{ minWidth: 'auto', marginRight: '10px' }}>Use G =</label>
                    <input type="number" step="0.01" name="factor" className="input-field" value={gust.factor} onChange={handleChange} />
                </div>
            </div>
        </div>
    );
};