import React from 'react';
import { useBeamStore } from '../../store/useBeamStore';

export const CompositeBeamInput: React.FC = () => {
    const { composite, setCompositeSettings } = useBeamStore();

    return (
        <div className="card">
            <div className="flex-row gap-md" style={{ marginBottom: '16px' }}>
                <label style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                    <input
                        type="checkbox"
                        checked={composite.isComposite}
                        onChange={(e) => setCompositeSettings({ isComposite: e.target.checked })}
                    />
                    Composite Beam
                </label>

                <label style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                    <input
                        type="checkbox"
                        checked={composite.temporaryShoring}
                        onChange={(e) => setCompositeSettings({ temporaryShoring: e.target.checked })}
                    />
                    Temporary Shoring Construction
                </label>
            </div>

            {composite.isComposite && (
                <>
                    <div className="card-header" style={{ marginTop: 0 }}>Metal Deck</div>

                    <div className="input-group">
                        <label className="input-label">Manufacturer</label>
                        <select
                            className="input-field-wide"
                            value={composite.metalDeck.manufacturer}
                            onChange={(e) => setCompositeSettings({
                                metalDeck: { ...composite.metalDeck, manufacturer: e.target.value }
                            })}
                        >
                            <option value="VULCRAFT">VULCRAFT</option>
                            <option value="VERCO">VERCO</option>
                            <option value="ASC">ASC</option>
                        </select>
                    </div>

                    <div className="input-group">
                        <label className="input-label">Type</label>
                        <select
                            className="input-field-wide"
                            value={composite.metalDeck.type}
                            onChange={(e) => setCompositeSettings({
                                metalDeck: { ...composite.metalDeck, type: e.target.value }
                            })}
                        >
                            <option value="2 VLI">2 VLI</option>
                            <option value="3 VLI">3 VLI</option>
                            <option value="1.5 VLR">1.5 VLR</option>
                        </select>
                    </div>

                    <div style={{ marginBottom: '16px' }}>
                        <div style={{ fontWeight: 600, marginBottom: '8px', fontSize: '13px' }}>Deck Orientation</div>
                        <label style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '4px' }}>
                            <input
                                type="radio"
                                name="deckOrientation"
                                checked={composite.metalDeck.orientation === 'Transverse'}
                                onChange={() => setCompositeSettings({
                                    metalDeck: { ...composite.metalDeck, orientation: 'Transverse' }
                                })}
                            />
                            Transverse
                        </label>
                        <label style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                            <input
                                type="radio"
                                name="deckOrientation"
                                checked={composite.metalDeck.orientation === 'Longitudinal'}
                                onChange={() => setCompositeSettings({
                                    metalDeck: { ...composite.metalDeck, orientation: 'Longitudinal' }
                                })}
                            />
                            Longitudinal
                        </label>
                    </div>

                    {/* Composite Section Diagram */}
                    <div style={{ marginBottom: '16px', padding: '16px', background: '#fafafa', borderRadius: '4px' }}>
                        <svg width="100%" height="150" viewBox="0 0 300 150">
                            {/* Labels */}
                            <text x="270" y="20" fontSize="10" textAnchor="end" fill="#666">1/2" min</text>
                            <text x="270" y="80" fontSize="10" textAnchor="end" fill="#666">1-1/2" min</text>

                            {/* Dimension lines */}
                            <line x1="250" y1="10" x2="290" y2="10" stroke="#666" strokeWidth="1" />
                            <line x1="270" y1="10" x2="270" y2="25" stroke="#666" strokeWidth="1" strokeDasharray="2,2" />

                            <line x1="250" y1="70" x2="290" y2="70" stroke="#666" strokeWidth="1" />
                            <line x1="270" y1="55" x2="270" y2="85" stroke="#666" strokeWidth="1" strokeDasharray="2,2" />

                            {/* Metal Deck (orange) */}
                            <rect x="20" y="25" width="220" height="30" fill="#f5a742" stroke="#333" strokeWidth="1.5" />

                            {/* Deck profile */}
                            <path d="M 40,55 L 40,65 L 50,65 L 50,55" fill="white" stroke="#333" strokeWidth="1" />
                            <path d="M 70,55 L 70,65 L 80,65 L 80,55" fill="white" stroke="#333" strokeWidth="1" />
                            <path d="M 100,55 L 100,65 L 110,65 L 110,55" fill="white" stroke="#333" strokeWidth="1" />
                            <path d="M 130,55 L 130,65 L 140,65 L 140,55" fill="white" stroke="#333" strokeWidth="1" />
                            <path d="M 160,55 L 160,65 L 170,65 L 170,55" fill="white" stroke="#333" strokeWidth="1" />
                            <path d="M 190,55 L 190,65 L 200,65 L 200,65" fill="white" stroke="#333" strokeWidth="1" />

                            {/* Shear Stud (yellow) */}
                            <rect x="115" y="55" width="8" height="30" fill="#ffd700" stroke="#333" strokeWidth="1.5" />
                            <rect x="113" y="85" width="12" height="4" fill="#ffd700" stroke="#333" strokeWidth="1.5" />

                            {/* Steel I-Beam (green) */}
                            <g>
                                {/* Top flange */}
                                <rect x="95" y="85" width="50" height="8" fill="#90ee90" stroke="#333" strokeWidth="1.5" />
                                {/* Web */}
                                <rect x="117" y="93" width="6" height="35" fill="#90ee90" stroke="#333" strokeWidth="1.5" />
                                {/* Bottom flange */}
                                <rect x="95" y="128" width="50" height="8" fill="#90ee90" stroke="#333" strokeWidth="1.5" />
                            </g>
                        </svg>
                    </div>

                    <div className="card-header">Shear Studs</div>

                    <div className="input-group">
                        <label className="input-label">Stud Diameter</label>
                        <select
                            className="input-field"
                            value={composite.shearStuds.diameter}
                            onChange={(e) => setCompositeSettings({
                                shearStuds: { ...composite.shearStuds, diameter: e.target.value }
                            })}
                        >
                            <option value="1/2&quot;">1/2"</option>
                            <option value="5/8&quot;">5/8"</option>
                            <option value="3/4&quot;">3/4"</option>
                            <option value="7/8&quot;">7/8"</option>
                        </select>
                    </div>

                    <div className="input-group">
                        <label className="input-label">Stud Length</label>
                        <input
                            type="number"
                            className="input-field"
                            value={composite.shearStuds.length}
                            onChange={(e) => setCompositeSettings({
                                shearStuds: { ...composite.shearStuds, length: parseFloat(e.target.value) || 0 }
                            })}
                            step="0.1"
                        />
                        <span className="input-unit">in</span>
                    </div>

                    <div className="input-group">
                        <label className="input-label">Tensile Strength Fu</label>
                        <input
                            type="number"
                            className="input-field"
                            value={composite.shearStuds.fu}
                            onChange={(e) => setCompositeSettings({
                                shearStuds: { ...composite.shearStuds, fu: parseFloat(e.target.value) || 0 }
                            })}
                            step="0.1"
                        />
                        <span className="input-unit">ksi</span>
                    </div>

                    <div className="input-group">
                        <label className="input-label"># of Studs in a Rib</label>
                        <select
                            className="input-field"
                            value={composite.shearStuds.studsPerRib}
                            onChange={(e) => setCompositeSettings({
                                shearStuds: { ...composite.shearStuds, studsPerRib: parseInt(e.target.value) }
                            })}
                        >
                            {[1, 2, 3, 4].map(n => (
                                <option key={n} value={n}>{n}</option>
                            ))}
                        </select>
                    </div>

                    <div style={{ marginTop: '16px' }}>
                        <div style={{ fontWeight: 600, marginBottom: '8px', fontSize: '13px' }}>Partial Composite %</div>
                        <label style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '4px' }}>
                            <input
                                type="radio"
                                name="partialComposite"
                                checked={composite.partialComposite === 'calculated'}
                                onChange={() => setCompositeSettings({ partialComposite: 'calculated' })}
                            />
                            Let ASDIP calculate
                        </label>
                        <label style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                            <input
                                type="radio"
                                name="partialComposite"
                                checked={composite.partialComposite === 'specified'}
                                onChange={() => setCompositeSettings({ partialComposite: 'specified', partialCompositePercent: 100 })}
                            />
                            Specify partial composite %
                            {composite.partialComposite === 'specified' && (
                                <input
                                    type="number"
                                    style={{ width: '80px', marginLeft: '8px' }}
                                    value={composite.partialCompositePercent || 100}
                                    onChange={(e) => setCompositeSettings({ partialCompositePercent: parseFloat(e.target.value) || 100 })}
                                    step="1"
                                    min="0"
                                    max="100"
                                />
                            )}
                        </label>
                    </div>
                </>
            )}
        </div>
    );
};