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

export const TopographyInput: React.FC = () => {
    const { wind, setWind } = useCalculatorStore();
    const { topography } = wind;

    // Helper to update nested topography state
    const updateTopo = (updates: Partial<typeof topography>) => {
        // Use functional update if possible to avoid stale state, but store only supports direct set.
        // We rely on 'topography' being fresh from the hook.
        setWind({ topography: { ...topography, ...updates } });
    };

    const handleShapeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
        const newShape = e.target.value;
        updateTopo({ shape: newShape as any });
    };

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

    return (
        <div className="card">
            <div className="card-header">Topographic Factor (Kzt)</div>
            <div className="flex-col gap-sm">
                <div className="flex-row gap-md">
                    <div className="input-group">
                        <label className="input-label">Topography:</label>
                        <select name="shape" className="input-field" value={topography.shape} onChange={handleShapeChange}>
                            <option value="Flat">Flat</option>
                            <option value="Ridge">Ridge</option>
                            <option value="Escarpment">Escarpment</option>
                            <option value="Hill">Hill</option>
                        </select>
                    </div>
                    {/* Placeholder for graphic if needed */}
                </div>

                {topography.shape !== 'Flat' && (
                    <div className="flex-col gap-sm fade-in">
                        <div className="input-group">
                            <label className="input-label">Hill Height (H):</label>
                            <input type="number" name="hillHeight" className="input-field" value={topography.hillHeight} onChange={handleChange} />
                            <span className="input-unit">ft</span>
                        </div>
                        <div className="input-group">
                            <label className="input-label">Half Hill Length (Lh):</label>
                            <input type="number" name="halfHillLength" className="input-field" value={topography.halfHillLength} onChange={handleChange} />
                            <span className="input-unit">ft</span>
                        </div>
                        <div className="input-group">
                            <label className="input-label">Crest Dist (x):</label>
                            <input type="number" name="crestDistance" className="input-field" value={topography.crestDistance} onChange={handleChange} />
                            <span className="input-unit">ft</span>
                        </div>
                        <div className="input-group">
                            <label className="input-label">Condition:</label>
                            <select name="condition" className="input-field" value={topography.condition} onChange={handleChange}>
                                <option value="Upwind">Upwind</option>
                                <option value="Downwind">Downwind</option>
                            </select>
                        </div>
                    </div>
                )}

                <div style={{ marginTop: '1rem' }}>
                    {topography.shape === 'Escarpment' && (
                        <EscarpmentDiagram
                            H={topography.hillHeight}
                            Lh={topography.halfHillLength}
                            x={topography.crestDistance}
                            condition={topography.condition}
                        />
                    )}
                    {(topography.shape === 'Ridge' || topography.shape === 'Hill') && (
                        <RidgeDiagram
                            H={topography.hillHeight}
                            Lh={topography.halfHillLength}
                            x={topography.crestDistance}
                            condition={topography.condition}
                        />
                    )}
                </div>

                <div className="report-item" style={{ marginTop: '10px', background: '#e0f7fa' }}>
                    <span className="report-label">Kzt (Calculated):</span>
                    <span className="report-value">{topography.factor.toFixed(2)}</span>
                </div>
            </div>
        </div>
    );
};