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

export const MomentDiagram: React.FC = () => {
    const { results, calculate } = useBeamStore();
    const [selectedSegment, setSelectedSegment] = useState('ALL');
    const [selectedCombination, setSelectedCombination] = useState('1.4D');

    // Auto-calculate on mount if no results
    useEffect(() => {
        if (!results) {
            calculate();
        }
    }, [results, calculate]);

    return (
        <div className="diagram-container">
            <div className="diagram-title">Moment Diagram</div>

            <div style={{ flex: 1, padding: '16px', background: 'white' }}>
                <svg width="100%" height="280" viewBox="0 0 1000 280">
                    {/* Grid */}
                    {Array.from({ length: 11 }).map((_, i) => (
                        <line key={`h-${i}`} x1="80" y1={30 + i * 20} x2="920" y2={30 + i * 20} stroke="#e0e0e0" strokeWidth="0.5" />
                    ))}
                    {Array.from({ length: 11 }).map((_, i) => (
                        <line key={`v-${i}`} x1={80 + i * 84} y1="30" x2={80 + i * 84} y2="230" stroke="#e0e0e0" strokeWidth="0.5" />
                    ))}

                    {/* Y-axis labels */}
                    <text x="70" y="35" fontSize="12" textAnchor="end" fill="#333">11.7</text>
                    <text x="70" y="75" fontSize="12" textAnchor="end" fill="#333">9.8</text>
                    <text x="70" y="115" fontSize="12" textAnchor="end" fill="#333">7.8</text>
                    <text x="70" y="155" fontSize="12" textAnchor="end" fill="#333">5.9</text>
                    <text x="70" y="195" fontSize="12" textAnchor="end" fill="#333">3.9</text>
                    <text x="70" y="225" fontSize="12" textAnchor="end" fill="#333">2.0</text>
                    <text x="70" y="245" fontSize="12" textAnchor="end" fill="#333">0.0</text>

                    {/* Moment area (red parabola) */}
                    <path
                        d="M 80,235 Q 500,30 920,235 L 920,235 Z"
                        fill="#ff4444"
                        opacity="0.7"
                    />

                    {/* Title */}
                    <text x="500" y="265" fontSize="14" textAnchor="middle" fontWeight="600" fill="#333">
                        MOMENT DIAGRAM (k-ft)
                    </text>
                </svg>
            </div>

            {/* Controls */}
            <div className="diagram-controls">
                <label>
                    Segment:
                    <select value={selectedSegment} onChange={(e) => setSelectedSegment(e.target.value)} style={{ marginLeft: '8px' }}>
                        <option value="ALL">ALL</option>
                        <option value="1">Span 1</option>
                    </select>
                </label>

                <label>
                    Combination:
                    <select value={selectedCombination} onChange={(e) => setSelectedCombination(e.target.value)} style={{ marginLeft: ' 8px' }}>
                        <option value="1.4D">1.4D</option>
                        <option value="1.2D+1.6L">1.2D+1.6L</option>
                        <option value="1.2D+0.5L">1.2D+0.5L</option>
                    </select>
                </label>
            </div>
        </div>
    );
};