import React from 'react';
import { useCalculatorStore } from '../../../store/calculatorStore';
import { calculateWindPressure } from '../../../utils/windLogic';
import { TopographyInput } from '../TopographyInput';
import { GustFactorInput } from '../GustFactorInput';
import { EnclosureClassification } from '../EnclosureClassification';

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

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

    const qz = calculateWindPressure({
        speed: wind.speed,
        exposure: wind.exposure,
        height: buildingGeometry.meanRoofHeight,
        kzt: wind.topography.factor,
        kd: wind.directionality,
        ke: wind.groundElevationFactor,
        g: wind.gust.factor
    });

    return (
        <div className="sheet-content">
            <div className="flex-row justify-between items-center" style={{ marginBottom: '1rem' }}>
                <h2>Wind Loads (ASCE 7)</h2>
                <div className="flex-col text-right text-muted text-sm">
                    <div>Job: {general.jobNo}</div>
                    <div>Date: {general.date}</div>
                </div>
            </div>

            <div className="calculator-grid">
                {/* Main Inputs Column */}
                <div className="flex-col gap-md">
                    <div className="card">
                        <div className="card-header">Basic Parameters</div>
                        <div className="flex-col gap-sm">
                            <div className="input-group">
                                <label className="input-label">Ultimate Wind Speed (V):</label>
                                <input type="number" name="speed" className="input-field" value={wind.speed} onChange={handleChange} />
                                <span className="input-unit">mph</span>
                            </div>
                            <div className="input-group">
                                <label className="input-label">Risk Category:</label>
                                <span className="input-value-display">{general.riskCategory}</span>
                            </div>
                            <div className="input-group">
                                <label className="input-label">Exposure Category:</label>
                                <select name="exposure" className="input-field" value={wind.exposure} onChange={handleChange}>
                                    <option value="B">B</option>
                                    <option value="C">C</option>
                                    <option value="D">D</option>
                                </select>
                            </div>
                            <div className="input-group">
                                <label className="input-label">Directionality (Kd):</label>
                                <input type="number" step="0.01" name="directionality" className="input-field" value={wind.directionality} onChange={handleChange} />
                            </div>
                        </div>
                    </div>

                    <TopographyInput />
                </div>

                {/* Secondary Column */}
                <div className="flex-col gap-md">
                    <EnclosureClassification />
                    <GustFactorInput />

                    <div className="card" style={{ background: '#e0f2f1', borderColor: '#80cbc4' }}>
                        <div className="card-header">Calculated Pressures</div>
                        <div className="report-item">
                            <span className="report-label">Velocity Pressure (qz):</span>
                            <span className="report-value" style={{ fontSize: '1.2em' }}>{qz.toFixed(2)} psf</span>
                        </div>
                        <div className="text-xs text-muted mt-2">
                            qz = 0.00256 * Kz * Kzt * Kd * Ke * V^2
                        </div>
                    </div>

                    <div className="card">
                        <div className="card-header">Tools</div>
                        <div className="flex-col gap-xs text-sm">
                            <a href="https://asce7hazardtool.online/" target="_blank" rel="noreferrer">ASCE 7 Hazard Tool</a>
                            <a href="https://hazards.atcouncil.org/" target="_blank" rel="noreferrer">ATC Council Hazards</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};