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

export const ShearDiagram: 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">Shear Diagram</div>

            {/* Beam visualization with lateral bracing indicator */}
            <div style={{ marginBottom: '16px' }}>
                <svg width="100%" height="60" viewBox="0 0 1000 60">
                    <text x="50" y="35" fontSize="12" fill="#666">R = 3.1 kip</text>
                    <text x="950" y="35" fontSize="12" textAnchor="end" fill="#666">R = 3.1 kip</text>

                    <text x="500" y="20" fontSize="12" textAnchor="middle" fill="#666">15.00 ft</text>
                    <line x1="100" y1="25" x2="100" y2="30" stroke="#666" strokeWidth="1" />
                    <line x1="100" y1="27" x2="900" y2="27" stroke="#666" strokeWidth="1" />
                    <line x1="900" y1="25" x2="900" y2="30" stroke="#666" strokeWidth="1" />

                    {/* Green beam */}
                    <rect x="100" y="35" width="800" height="12" fill="#90ee90" stroke="#666" strokeWidth="1" />

                    {/* Supports */}
                    <polygon points="150,47 140,55 160,55" fill="white" stroke="#666" strokeWidth="2" />
                    <polygon points="850,47 840,55 860,55" fill="white" stroke="#666" strokeWidth="2" />

                    {/* Lateral bracing indicator */}
                    <circle cx="500" cy="41" r="6" fill="#ffd700" stroke="#666" strokeWidth="1" />
                    <text x="515" y="45" fontSize="10" fill="#666">◎ indicates lateral bracing</text>
                </svg>
            </div>

            {/* Shear diagram chart */}
            <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">3.1</text>
                    <text x="70" y="95" fontSize="12" textAnchor="end" fill="#333">2.1</text>
                    <text x="70" y="135" fontSize="12" textAnchor="end" fill="#333">1.0</text>
                    <text x="70" y="175" fontSize="12" textAnchor="end" fill="#333">0.0</text>
                    <text x="70" y="215" fontSize="12" textAnchor="end" fill="#333">-1.0</text>
                    <text x="70" y="235" fontSize="12" textAnchor="end" fill="#333">-2.1</text>
                    <text x="70" y="255" fontSize="12" textAnchor="end" fill="#333">-3.1</text>

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

                    {/* Title */}
                    <text x="500" y="265" fontSize="14" textAnchor="middle" fontWeight="600" fill="#333">
                        SHEAR DIAGRAM (kip)
                    </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>
    );
};