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

export const LiveLoadsSection: React.FC = () => {
    const { liveLoads, setLiveLoads } = useCalculatorStore();

    // specific handler for nested liveLoads state
    const handleRoofChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setLiveLoads({
            roof: {
                ...liveLoads.roof,
                [e.target.name]: e.target.type === 'number' ? parseFloat(e.target.value) : e.target.value
            }
        });
    };

    const handleFloorChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setLiveLoads({
            floor: {
                ...liveLoads.floor,
                [e.target.name]: parseFloat(e.target.value)
            }
        });
    };

    return (
        <div className="card">
            <div className="card-header">Live Loads</div>
            <div className="flex-col gap-sm">

                {/* Roof Section */}
                <div style={{ display: 'grid', gridTemplateColumns: '150px 1fr', gap: '1rem', alignItems: 'center' }}>
                    <div className="input-label" style={{ fontWeight: 'bold' }}>Roof</div>
                    <div className="flex-col gap-xs">
                        <div className="flex-row items-center gap-sm">
                            <span className="input-label" style={{ minWidth: '100px' }}>0 to 200 sf:</span>
                            <input type="number" name="range1" className="input-field-sm" value={liveLoads.roof.range1} onChange={handleRoofChange} />
                            <span className="input-unit">psf</span>
                        </div>
                        <div className="flex-row items-center gap-sm">
                            <span className="input-label" style={{ minWidth: '100px' }}>200 to 600 sf:</span>
                            <input type="text" name="range2" className="input-field-wide" value={liveLoads.roof.range2} onChange={handleRoofChange} style={{ flex: 1 }} />
                        </div>
                        <div className="flex-row items-center gap-sm">
                            <span className="input-label" style={{ minWidth: '100px' }}>over 600 sf:</span>
                            <input type="number" name="range3" className="input-field-sm" value={liveLoads.roof.range3} onChange={handleRoofChange} />
                            <span className="input-unit">psf</span>
                        </div>
                    </div>
                </div>

                <hr style={{ margin: '10px 0', border: 0, borderTop: '1px solid #ccc' }} />

                {/* Floor Section */}
                <div style={{ display: 'grid', gridTemplateColumns: '150px 1fr 1fr', gap: '1rem', alignItems: 'center' }}>
                    <div className="input-label" style={{ fontWeight: 'bold', alignSelf: 'start', paddingTop: '5px' }}>Floor:</div>

                    {/* Column 1: Labels */}
                    <div className="flex-col gap-sm">
                        <div className="input-label">Typical Floor</div>
                        <div className="input-label">Partitions</div>
                        <div className="input-label">Corridors above first floor</div>
                        <div className="input-label">Lobbies & first floor corridors</div>
                    </div>

                    {/* Column 2: Inputs & Dropdowns */}
                    <div className="flex-col gap-sm">
                        <div className="flex-row gap-sm">
                            <input type="number" name="typical" className="input-field-sm" value={liveLoads.floor.typical} onChange={handleFloorChange} />
                            <span className="input-unit">psf</span>
                            <select className="input-field" style={{ width: '150px' }}>
                                <option>Offices</option>
                                {/* Add more options as needed */}
                            </select>
                        </div>
                        <div className="flex-row gap-sm">
                            <input type="number" name="partitions" className="input-field-sm" value={liveLoads.floor.partitions} onChange={handleFloorChange} />
                            <span className="input-unit">psf</span>
                            <select className="input-field" style={{ width: '150px' }}>
                                <option>Partitions</option>
                            </select>
                        </div>
                        <div className="flex-row gap-sm">
                            <input type="number" name="corridorsUpper" className="input-field-sm" value={liveLoads.floor.corridorsUpper} onChange={handleFloorChange} />
                            <span className="input-unit">psf</span>
                            <select className="input-field" style={{ width: '150px' }}>
                                <option>Corridors above first floor</option>
                            </select>
                        </div>
                        <div className="flex-row gap-sm">
                            <input type="number" name="lobbies" className="input-field-sm" value={liveLoads.floor.lobbies} onChange={handleFloorChange} />
                            <span className="input-unit">psf</span>
                            <select className="input-field" style={{ width: '150px' }}>
                                <option>Lobbies & first floor corridors</option>
                            </select>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    );
};