import { usePileCapStore } from '../../store/pileCapStore';
import { GeometryDiagram } from './GeometryDiagram';

export const GeometryInput = () => {
    const geometry = usePileCapStore(state => state.geometry);
    const setGeometry = usePileCapStore(state => state.setGeometry);

    // Calculate total number of piles
    const totalPiles = geometry.pileRows * geometry.pileColumns;

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

            {/* Number of Piles Preset Selector */}
            <div className="input-group">
                <label className="input-label">Number of Piles:</label>
                <select
                    className="input-field"
                    value={totalPiles}
                    onChange={e => {
                        const total = parseInt(e.target.value);
                        // Set to square configuration
                        const side = Math.sqrt(total);
                        setGeometry({ pileRows: side, pileColumns: side });
                    }}
                >
                    <option value="4">4 (2×2)</option>
                    <option value="9">9 (3×3)</option>
                    <option value="16">16 (4×4)</option>
                    <option value="25">25 (5×5)</option>
                </select>
                <span className="input-unit">piles</span>
            </div>

            {/* Custom Rows and Columns */}
            <div className="input-group">
                <label className="input-label">Custom Rows:</label>
                <input
                    type="number"
                    className="input-field"
                    value={geometry.pileRows}
                    onChange={e => setGeometry({ pileRows: parseInt(e.target.value) || 1 })}
                    min="1"
                />
                <span className="input-unit">rows</span>
            </div>

            <div className="input-group">
                <label className="input-label">Custom Columns:</label>
                <input
                    type="number"
                    className="input-field"
                    value={geometry.pileColumns}
                    onChange={e => setGeometry({ pileColumns: parseInt(e.target.value) || 1 })}
                    min="1"
                />
                <span className="input-unit">columns</span>
            </div>

            {/* Pile Type */}
            <div className="input-group">
                <label className="input-label">Pile Type:</label>
                <select
                    className="input-field"
                    value={geometry.pileType}
                    onChange={e => setGeometry({ pileType: e.target.value as 'Round' | 'Square' })}
                >
                    <option value="Round">Round</option>
                    <option value="Square">Square</option>
                </select>
            </div>

            {/* Pile Size */}
            <div className="input-group">
                <label className="input-label">{geometry.pileType === 'Round' ? 'Pile Diameter:' : 'Pile Side:'}</label>
                <input
                    type="number"
                    className="input-field"
                    value={geometry.pileSize}
                    onChange={e => setGeometry({ pileSize: parseFloat(e.target.value) || 0 })}
                />
                <span className="input-unit">in</span>
            </div>

            {/* Pile Spacing */}
            <div className="input-group">
                <label className="input-label">Pile Spacing (X):</label>
                <input
                    type="number"
                    className="input-field"
                    value={geometry.pileSpacingX}
                    onChange={e => setGeometry({ pileSpacingX: parseFloat(e.target.value) || 0 })}
                    step="0.5"
                />
                <span className="input-unit">ft</span>
            </div>

            <div className="input-group">
                <label className="input-label">Pile Spacing (Z):</label>
                <input
                    type="number"
                    className="input-field"
                    value={geometry.pileSpacingY}
                    onChange={e => setGeometry({ pileSpacingY: parseFloat(e.target.value) || 0 })}
                    step="0.5"
                />
                <span className="input-unit">ft</span>
            </div>

            {/* Pile Edge Distance */}
            <div className="input-group">
                <label className="input-label">Pile Edge Distance:</label>
                <input
                    type="number"
                    className="input-field"
                    value={geometry.pileEdgeDistance}
                    onChange={e => setGeometry({ pileEdgeDistance: parseFloat(e.target.value) || 0 })}
                    step="0.1"
                />
                <span className="input-unit">ft</span>
            </div>

            {/* Pile Top Embed */}
            <div className="input-group">
                <label className="input-label">Pile Top Embed:</label>
                <input
                    type="number"
                    className="input-field"
                    value={geometry.pileTopEmbed}
                    onChange={e => setGeometry({ pileTopEmbed: parseFloat(e.target.value) || 0 })}
                />
                <span className="input-unit">in</span>
            </div>

            {/* Accidental Pile Offset */}
            <div className="input-group">
                <label className="input-label">Accidental Pile Offset:</label>
                <input
                    type="number"
                    className="input-field"
                    value={geometry.accidentalOffset}
                    onChange={e => setGeometry({ accidentalOffset: parseFloat(e.target.value) || 0 })}
                />
                <span className="input-unit">in</span>
            </div>

            <div className="card-header" style={{ marginTop: '16px' }}>Pile Capacities</div>

            {/* Compression Capacity */}
            <div className="input-group">
                <label className="input-label">Allowable Compression:</label>
                <input
                    type="number"
                    className="input-field"
                    value={geometry.pileCompressionCapacity}
                    onChange={e => setGeometry({ pileCompressionCapacity: parseFloat(e.target.value) || 0 })}
                />
                <span className="input-unit">kips</span>
            </div>

            {/* Tension Capacity */}
            <div className="input-group">
                <label className="input-label">Allowable Tension:</label>
                <input
                    type="number"
                    className="input-field"
                    value={geometry.pileTensionCapacity}
                    onChange={e => setGeometry({ pileTensionCapacity: parseFloat(e.target.value) || 0 })}
                />
                <span className="input-unit">kips</span>
            </div>

            {/* Lateral Capacity */}
            <div className="input-group">
                <label className="input-label">Allowable Lateral:</label>
                <input
                    type="number"
                    className="input-field"
                    value={geometry.pileLateralCapacity}
                    onChange={e => setGeometry({ pileLateralCapacity: parseFloat(e.target.value) || 0 })}
                />
                <span className="input-unit">kips</span>
            </div>

            <div className="card-header" style={{ marginTop: '16px' }}>Pile Cap Dimensions</div>

            <div className="input-group">
                <label className="input-label">Length (X-dir):</label>
                <input
                    type="number"
                    className="input-field"
                    value={geometry.length}
                    onChange={e => setGeometry({ length: parseFloat(e.target.value) || 0 })}
                    step="0.5"
                />
                <span className="input-unit">ft</span>
            </div>

            <div className="input-group">
                <label className="input-label">Width (Z-dir):</label>
                <input
                    type="number"
                    className="input-field"
                    value={geometry.width}
                    onChange={e => setGeometry({ width: parseFloat(e.target.value) || 0 })}
                    step="0.5"
                />
                <span className="input-unit">ft</span>
            </div>

            <div className="input-group">
                <label className="input-label">Thickness:</label>
                <input
                    type="number"
                    className="input-field"
                    value={geometry.depth}
                    onChange={e => setGeometry({ depth: parseFloat(e.target.value) || 0 })}
                />
                <span className="input-unit">in</span>
            </div>

            <div className="input-group">
                <label className="input-label">Soil Cover:</label>
                <input
                    type="number"
                    className="input-field"
                    value={geometry.soilCover}
                    onChange={e => setGeometry({ soilCover: parseFloat(e.target.value) || 0 })}
                    step="0.5"
                />
                <span className="input-unit">ft</span>
            </div>

            <div className="card-header" style={{ marginTop: '16px' }}>Column Dimensions</div>

            <div className="input-group">
                <label className="input-label">Column Length (X-dir):</label>
                <input
                    type="number"
                    className="input-field"
                    value={geometry.columnLength}
                    onChange={e => setGeometry({ columnLength: parseFloat(e.target.value) || 0 })}
                />
                <span className="input-unit">in</span>
            </div>

            <div className="input-group">
                <label className="input-label">Column Width (Z-dir):</label>
                <input
                    type="number"
                    className="input-field"
                    value={geometry.columnWidth}
                    onChange={e => setGeometry({ columnWidth: parseFloat(e.target.value) || 0 })}
                />
                <span className="input-unit">in</span>
            </div>

            <div className="input-group">
                <label className="input-label">Column Offset X:</label>
                <input
                    type="number"
                    className="input-field"
                    value={geometry.columnOffsetX}
                    onChange={e => setGeometry({ columnOffsetX: parseFloat(e.target.value) || 0 })}
                    step="0.1"
                />
                <span className="input-unit">ft</span>
                {geometry.columnOffsetX === 0 && <span className="status-pass" style={{ marginLeft: '8px' }}>✓ OK</span>}
            </div>

            <div className="input-group">
                <label className="input-label">Column Offset Z:</label>
                <input
                    type="number"
                    className="input-field"
                    value={geometry.columnOffsetZ}
                    onChange={e => setGeometry({ columnOffsetZ: parseFloat(e.target.value) || 0 })}
                    step="0.1"
                />
                <span className="input-unit">ft</span>
                {geometry.columnOffsetZ === 0 && <span className="status-pass" style={{ marginLeft: '8px' }}>✓ OK</span>}
            </div>

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