import { usePileCapStore } from '../../store/pileCapStore';
import { ReinforcementDiagram } from '../diagrams/ReinforcementDiagram';
import type { ReinforcementConfig } from '../../types/pileCap';

export const ReinforcementInput = () => {
    const reinforcement = usePileCapStore(state => state.reinforcement);
    const setReinforcement = usePileCapStore(state => state.setReinforcement);

    const barSizes = ['#3', '#4', '#5', '#6', '#7', '#8', '#9', '#10', '#11'];

    const updateField = <K extends keyof ReinforcementConfig>(
        field: K,
        value: ReinforcementConfig[K]
    ) => {
        setReinforcement({ [field]: value });
    };

    return (
        <div className="card">
            <div className="card-header">Pile Cap Reinforcement</div>

            {/* Top Mat */}
            <div style={{ marginTop: '16px' }}>
                <div className="input-group">
                    <label className="input-label">
                        <input
                            type="checkbox"
                            checked={reinforcement.hasTopMat}
                            onChange={e => updateField('hasTopMat', e.target.checked)}
                            style={{ marginRight: '8px' }}
                        />
                        Top Mat
                    </label>
                </div>

                {reinforcement.hasTopMat && (
                    <div style={{ marginLeft: '24px', marginTop: '8px', display: 'flex', flexDirection: 'column', gap: '8px' }}>
                        <div className="input-group">
                            <label className="input-label">Concrete Cover:</label>
                            <input
                                type="number"
                                className="input-field"
                                value={reinforcement.topConcreteCover}
                                onChange={e => updateField('topConcreteCover', parseFloat(e.target.value) || 0)}
                                step="0.25"
                            />
                            <span className="input-unit">in</span>
                        </div>

                        <div className="input-group">
                            <label className="input-label">X-Bars Size:</label>
                            <select
                                className="input-field"
                                value={reinforcement.topXBarSize}
                                onChange={e => updateField('topXBarSize', e.target.value)}
                            >
                                {barSizes.map(size => <option key={size} value={size}>{size}</option>)}
                            </select>
                        </div>

                        <div className="input-group">
                            <label className="input-label">X-Bars Count:</label>
                            <input
                                type="number"
                                className="input-field"
                                value={reinforcement.topXBarCount}
                                onChange={e => updateField('topXBarCount', parseInt(e.target.value) || 0)}
                                min="0"
                            />
                            <span className="input-unit">bars</span>
                        </div>

                        <div className="input-group">
                            <label className="input-label">
                                <input
                                    type="checkbox"
                                    checked={reinforcement.topXBarHooks}
                                    onChange={e => updateField('topXBarHooks', e.target.checked)}
                                    style={{ marginRight: '8px' }}
                                />
                                X-Bars with Hooks
                            </label>
                        </div>

                        <div className="input-group">
                            <label className="input-label">Z-Bars Size:</label>
                            <select
                                className="input-field"
                                value={reinforcement.topZBarSize}
                                onChange={e => updateField('topZBarSize', e.target.value)}
                            >
                                {barSizes.map(size => <option key={size} value={size}>{size}</option>)}
                            </select>
                        </div>

                        <div className="input-group">
                            <label className="input-label">Z-Bars Count:</label>
                            <input
                                type="number"
                                className="input-field"
                                value={reinforcement.topZBarCount}
                                onChange={e => updateField('topZBarCount', parseInt(e.target.value) || 0)}
                                min="0"
                            />
                            <span className="input-unit">bars</span>
                        </div>

                        <div className="input-group">
                            <label className="input-label">
                                <input
                                    type="checkbox"
                                    checked={reinforcement.topZBarHooks}
                                    onChange={e => updateField('topZBarHooks', e.target.checked)}
                                    style={{ marginRight: '8px' }}
                                />
                                Z-Bars with Hooks
                            </label>
                        </div>
                    </div>
                )}
            </div>

            {/* Bottom Mat */}
            <div style={{ marginTop: '16px' }}>
                <div className="input-group">
                    <label className="input-label">
                        <input
                            type="checkbox"
                            checked={reinforcement.hasBottomMat}
                            onChange={e => updateField('hasBottomMat', e.target.checked)}
                            style={{ marginRight: '8px' }}
                        />
                        Bottom Mat
                    </label>
                </div>

                {reinforcement.hasBottomMat && (
                    <div style={{ marginLeft: '24px', marginTop: '8px', display: 'flex', flexDirection: 'column', gap: '8px' }}>
                        <div className="input-group">
                            <label className="input-label">Concrete Cover:</label>
                            <input
                                type="number"
                                className="input-field"
                                value={reinforcement.bottomConcreteCover}
                                onChange={e => updateField('bottomConcreteCover', parseFloat(e.target.value) || 0)}
                                step="0.25"
                            />
                            <span className="input-unit">in</span>
                        </div>

                        <div className="input-group">
                            <label className="input-label">X-Bars Size:</label>
                            <select
                                className="input-field"
                                value={reinforcement.bottomXBarSize}
                                onChange={e => updateField('bottomXBarSize', e.target.value)}
                            >
                                {barSizes.map(size => <option key={size} value={size}>{size}</option>)}
                            </select>
                        </div>

                        <div className="input-group">
                            <label className="input-label">X-Bars Count:</label>
                            <input
                                type="number"
                                className="input-field"
                                value={reinforcement.bottomXBarCount}
                                onChange={e => updateField('bottomXBarCount', parseInt(e.target.value) || 0)}
                                min="0"
                            />
                            <span className="input-unit">bars</span>
                        </div>

                        <div className="input-group">
                            <label className="input-label">
                                <input
                                    type="checkbox"
                                    checked={reinforcement.bottomXBarHooks}
                                    onChange={e => updateField('bottomXBarHooks', e.target.checked)}
                                    style={{ marginRight: '8px' }}
                                />
                                X-Bars with Hooks
                            </label>
                        </div>

                        <div className="input-group">
                            <label className="input-label">Z-Bars Size:</label>
                            <select
                                className="input-field"
                                value={reinforcement.bottomZBarSize}
                                onChange={e => updateField('bottomZBarSize', e.target.value)}
                            >
                                {barSizes.map(size => <option key={size} value={size}>{size}</option>)}
                            </select>
                        </div>

                        <div className="input-group">
                            <label className="input-label">Z-Bars Count:</label>
                            <input
                                type="number"
                                className="input-field"
                                value={reinforcement.bottomZBarCount}
                                onChange={e => updateField('bottomZBarCount', parseInt(e.target.value) || 0)}
                                min="0"
                            />
                            <span className="input-unit">bars</span>
                        </div>

                        <div className="input-group">
                            <label className="input-label">
                                <input
                                    type="checkbox"
                                    checked={reinforcement.bottomZBarHooks}
                                    onChange={e => updateField('bottomZBarHooks', e.target.checked)}
                                    style={{ marginRight: '8px' }}
                                />
                                Z-Bars with Hooks
                            </label>
                        </div>
                    </div>
                )}
            </div>

            {/* Column Reinforcement */}
            <div className="input-group" style={{ marginTop: '16px' }}>
                <h3>Column Reinforcement</h3>
                <div className="input-row">
                    <label>Longitudinal Bar Size:</label>
                    <select
                        value={reinforcement.columnBarSize}
                        onChange={(e) => updateField('columnBarSize', e.target.value)}
                    >
                        {barSizes.map(size => (
                            <option key={size} value={size}>{size}</option>
                        ))}
                    </select>
                </div>
                <div className="input-row">
                    <label>Number of Bars:</label>
                    <input
                        type="number"
                        min="4"
                        step="1"
                        value={reinforcement.columnBarCount}
                        onChange={(e) => updateField('columnBarCount', parseInt(e.target.value) || 4)}
                    />
                </div>
            </div>

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