import { usePileCapStore } from '../../store/pileCapStore';
import { LoadsDiagram } from './LoadsDiagram';
import type { LoadCase } from '../../types/pileCap';

export const LoadsInput = () => {
    const loads = usePileCapStore(state => state.loads);
    const setLoads = usePileCapStore(state => state.setLoads);

    const activeCase = loads.cases.find(c => c.id === loads.activeLoadCase) || loads.cases[0];

    const updateCase = (updates: Partial<LoadCase>) => {
        const newCases = loads.cases.map(c =>
            c.id === activeCase.id ? { ...c, ...updates } : c
        );
        setLoads({ cases: newCases });
    };

    const addCase = () => {
        const newId = `case-${loads.cases.length + 1}`;
        const newCase: LoadCase = {
            id: newId,
            name: `Load Case ${loads.cases.length + 1}`,
            deadLoad: 0,
            liveLoad: 0,
            roofLiveLoad: 0,
            snowLoad: 0,
            rainLoad: 0,
            seismicLoad: 0,
            windLoad: 0,
            momentX: 0,
            momentY: 0,
            shearX: 0,
            shearY: 0
        };
        setLoads({
            cases: [...loads.cases, newCase],
            activeLoadCase: newId
        });
    };

    const deleteCase = (id: string) => {
        if (loads.cases.length <= 1) return;
        const newCases = loads.cases.filter(c => c.id !== id);
        setLoads({
            cases: newCases,
            activeLoadCase: newCases[0].id
        });
    };

    return (
        <div className="card">
            <div className="card-header">
                <span>Load Cases</span>
                <button
                    className="button secondary"
                    onClick={addCase}
                    style={{ fontSize: '12px', padding: '4px 8px' }}
                >
                    + Add Case
                </button>
            </div>

            {/* Case Tabs */}
            <div style={{ display: 'flex', gap: '4px', marginBottom: '16px', flexWrap: 'wrap' }}>
                {loads.cases.map(c => (
                    <button
                        key={c.id}
                        className={`button ${c.id === loads.activeLoadCase ? 'primary' : 'secondary'}`}
                        onClick={() => setLoads({ activeLoadCase: c.id })}
                        style={{
                            fontSize: '12px',
                            padding: '4px 8px',
                            opacity: c.id === loads.activeLoadCase ? 1 : 0.7
                        }}
                    >
                        {c.name}
                    </button>
                ))}
            </div>

            {/* Case Name & Delete */}
            <div style={{ display: 'flex', gap: '8px', marginBottom: '16px', alignItems: 'center' }}>
                <input
                    type="text"
                    className="input-field"
                    value={activeCase.name}
                    onChange={e => updateCase({ name: e.target.value })}
                    style={{ flex: 1 }}
                />
                {loads.cases.length > 1 && (
                    <button
                        className="button danger"
                        onClick={() => deleteCase(activeCase.id)}
                        style={{ padding: '4px 8px' }}
                    >
                        Delete
                    </button>
                )}
            </div>

            <div className="section-header">Axial Loads (kips)</div>

            <div className="input-group">
                <label className="input-label">Dead Load (D):</label>
                <input
                    type="number"
                    className="input-field"
                    value={activeCase.deadLoad}
                    onChange={e => updateCase({ deadLoad: parseFloat(e.target.value) || 0 })}
                />
            </div>

            <div className="input-group">
                <label className="input-label">Live Load (L):</label>
                <input
                    type="number"
                    className="input-field"
                    value={activeCase.liveLoad}
                    onChange={e => updateCase({ liveLoad: parseFloat(e.target.value) || 0 })}
                />
            </div>

            <div className="input-group">
                <label className="input-label">Roof Live (Lr):</label>
                <input
                    type="number"
                    className="input-field"
                    value={activeCase.roofLiveLoad}
                    onChange={e => updateCase({ roofLiveLoad: parseFloat(e.target.value) || 0 })}
                />
            </div>

            <div className="input-group">
                <label className="input-label">Snow (S):</label>
                <input
                    type="number"
                    className="input-field"
                    value={activeCase.snowLoad}
                    onChange={e => updateCase({ snowLoad: parseFloat(e.target.value) || 0 })}
                />
            </div>

            <div className="input-group">
                <label className="input-label">Rain (R):</label>
                <input
                    type="number"
                    className="input-field"
                    value={activeCase.rainLoad}
                    onChange={e => updateCase({ rainLoad: parseFloat(e.target.value) || 0 })}
                />
            </div>

            <div className="input-group">
                <label className="input-label">Wind (W):</label>
                <input
                    type="number"
                    className="input-field"
                    value={activeCase.windLoad}
                    onChange={e => updateCase({ windLoad: parseFloat(e.target.value) || 0 })}
                />
            </div>

            <div className="input-group">
                <label className="input-label">Seismic (E):</label>
                <input
                    type="number"
                    className="input-field"
                    value={activeCase.seismicLoad}
                    onChange={e => updateCase({ seismicLoad: parseFloat(e.target.value) || 0 })}
                />
            </div>

            <div className="section-header" style={{ marginTop: '16px' }}>Moments & Shears</div>

            <div className="input-group">
                <label className="input-label">Moment X (ft-kips):</label>
                <input
                    type="number"
                    className="input-field"
                    value={activeCase.momentX}
                    onChange={e => updateCase({ momentX: parseFloat(e.target.value) || 0 })}
                />
            </div>

            <div className="input-group">
                <label className="input-label">Moment Y (ft-kips):</label>
                <input
                    type="number"
                    className="input-field"
                    value={activeCase.momentY}
                    onChange={e => updateCase({ momentY: parseFloat(e.target.value) || 0 })}
                />
            </div>

            <div className="input-group">
                <label className="input-label">Shear X (kips):</label>
                <input
                    type="number"
                    className="input-field"
                    value={activeCase.shearX}
                    onChange={e => updateCase({ shearX: parseFloat(e.target.value) || 0 })}
                />
            </div>

            <div className="input-group">
                <label className="input-label">Shear Y (kips):</label>
                <input
                    type="number"
                    className="input-field"
                    value={activeCase.shearY}
                    onChange={e => updateCase({ shearY: parseFloat(e.target.value) || 0 })}
                />
            </div>

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