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

export const BeamGeometryInput: React.FC = () => {
    const { geometry, setGeometry } = useBeamStore();

    const updateSpanLength = (spanId: number, length: number) => {
        const updatedSpans = geometry.spans.map(s =>
            s.id === spanId ? { ...s, length } : s
        );
        setGeometry({ spans: updatedSpans });
    };

    const updateSupportType = (supportId: number, type: 'Pinned' | 'Fixed' | 'Roller') => {
        const updatedSupports = geometry.supports.map(s =>
            s.id === supportId ? { ...s, type } : s
        );
        setGeometry({ supports: updatedSupports });
    };

    // Calculate total span for visualization
    const totalSpan = geometry.spans.reduce((sum, span) => sum + span.length, 0);

    return (
        <div className="card">
            <div className="card-header">Beam Geometry</div>

            {/* Beam Visualization */}
            <div style={{ marginBottom: '16px' }}>
                <svg width="100%" height="120" viewBox="0 0 700 120">
                    {/* Beam span labels */}
                    <text x="50" y="20" fontSize="12" fill="#666">L Cant</text>
                    <text x="350" y="20" fontSize="12" textAnchor="middle" fill="#666">
                        Span ①
                    </text>
                    <text x="650" y="20" fontSize="12" textAnchor="end" fill="#666">R Cant</text>

                    {/* Cantilever and main span dimensions */}
                    <line x1="100" y1="30" x2="100" y2="50" stroke="#666" strokeWidth="1" />
                    <line x1="100" y1="40" x2="600" y2="40" stroke="#666" strokeWidth="1" />
                    <line x1="600" y1="30" x2="600" y2="50" stroke="#666" strokeWidth="1" />
                    <text x="350" y="60" fontSize="12" textAnchor="middle" fill="#666">
                        {totalSpan > 0 ? `${totalSpan.toFixed(2)} ft` : '15.00 ft'}
                    </text>

                    {/* Green beam */}
                    <rect x="50" y="70" width="600" height="15" fill="#90ee90" stroke="#666" strokeWidth="1" />

                    {/* Supports */}
                    <g>
                        {/* Support 1 */}
                        <polygon points="150,85 140,100 160,100" fill="white" stroke="#666" strokeWidth="2" />
                        <circle cx="150" cy="105" r="8" fill="white" stroke="#666" strokeWidth="2" />
                        <text x="150" y="112" fontSize="10" textAnchor="middle" fill="#666">①</text>
                    </g>

                    <g>
                        {/* Support 2 */}
                        <polygon points="550,85 540,100 560,100" fill="white" stroke="#666" strokeWidth="2" />
                        <circle cx="550" cy="105" r="8" fill="white" stroke="#666" strokeWidth="2" />
                        <text x="550" y="112" fontSize="10" textAnchor="middle" fill="#666">②</text>
                    </g>
                </svg>
            </div>

            {/* Cantilever checkboxes */}
            <div className="flex-row gap-md" style={{ marginBottom: '16px' }}>
                <label style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
                    <input
                        type="checkbox"
                        checked={geometry.leftCantilever}
                        onChange={(e) => setGeometry({ leftCantilever: e.target.checked })}
                    />
                    Left Cantilever
                </label>

                <div className="input-group" style={{ flex: 1, marginBottom: 0 }}>
                    <label className="input-label">Number of Supports:</label>
                    <select
                        className="input-field"
                        value={geometry.numberOfSupports}
                        onChange={(e) => setGeometry({ numberOfSupports: parseInt(e.target.value) })}
                    >
                        {[2, 3, 4, 5, 6, 7].map(n => (
                            <option key={n} value={n}>{n}</option>
                        ))}
                    </select>
                </div>

                <label style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
                    <input
                        type="checkbox"
                        checked={geometry.rightCantilever}
                        onChange={(e) => setGeometry({ rightCantilever: e.target.checked })}
                    />
                    Right Cantilever
                </label>
            </div>

            {/* Spans and Supports Tables */}
            <div className="flex-row gap-md">
                {/* Span Table */}
                <div style={{ flex: 1 }}>
                    <table>
                        <thead>
                            <tr>
                                <th>Span</th>
                                <th>Length</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            {geometry.spans.map((span) => (
                                <tr key={span.id}>
                                    <td className="text-center">
                                        <div style={{
                                            width: '20px',
                                            height: '20px',
                                            borderRadius: '50%',
                                            border: '2px solid #666',
                                            display: 'inline-flex',
                                            alignItems: 'center',
                                            justifyContent: 'center',
                                            fontSize: '11px'
                                        }}>
                                            {span.id}
                                        </div>
                                    </td>
                                    <td>
                                        <input
                                            type="number"
                                            value={span.length}
                                            onChange={(e) => updateSpanLength(span.id, parseFloat(e.target.value) || 0)}
                                            step="0.1"
                                        />
                                    </td>
                                    <td className="text-muted">ft</td>
                                </tr>
                            ))}
                            {geometry.spans.length < 5 && Array.from({ length: 5 - geometry.spans.length }).map((_, i) => (
                                <tr key={`empty-${i}`}>
                                    <td className="text-center">
                                        <div style={{
                                            width: '20px',
                                            height: '20px',
                                            borderRadius: '50%',
                                            border: '2px solid #ccc',
                                            display: 'inline-flex',
                                            alignItems: 'center',
                                            justifyContent: 'center',
                                            fontSize: '11px',
                                            color: '#ccc'
                                        }}>
                                            {geometry.spans.length + i + 1}
                                        </div>
                                    </td>
                                    <td className="text-muted">0.00</td>
                                    <td className="text-muted">ft</td>
                                </tr>
                            ))}
                            {geometry.leftCantilever && (
                                <tr>
                                    <td className="text-center">L Cant</td>
                                    <td>
                                        <input
                                            type="number"
                                            value={geometry.leftCantileverLength}
                                            onChange={(e) => setGeometry({ leftCantileverLength: parseFloat(e.target.value) || 0 })}
                                            step="0.1"
                                        />
                                    </td>
                                    <td className="text-muted">ft</td>
                                </tr>
                            )}
                            {geometry.rightCantilever && (
                                <tr>
                                    <td className="text-center">R Cant</td>
                                    <td>
                                        <input
                                            type="number"
                                            value={geometry.rightCantileverLength}
                                            onChange={(e) => setGeometry({ rightCantileverLength: parseFloat(e.target.value) || 0 })}
                                            step="0.1"
                                        />
                                    </td>
                                    <td className="text-muted">ft</td>
                                </tr>
                            )}
                        </tbody>
                    </table>
                </div>

                {/* Support Table */}
                <div style={{ flex: 1 }}>
                    <table>
                        <thead>
                            <tr>
                                <th>Support</th>
                                <th>Type</th>
                            </tr>
                        </thead>
                        <tbody>
                            {geometry.supports.map((support) => (
                                <tr key={support.id}>
                                    <td className="text-center">
                                        <div style={{
                                            width: '20px',
                                            height: '20px',
                                            borderRadius: '50%',
                                            border: '2px solid #666',
                                            display: 'inline-flex',
                                            alignItems: 'center',
                                            justifyContent: 'center',
                                            fontSize: '11px'
                                        }}>
                                            {support.id}
                                        </div>
                                    </td>
                                    <td>
                                        <select
                                            value={support.type}
                                            onChange={(e) => updateSupportType(support.id, e.target.value as any)}
                                            style={{ width: '100%' }}
                                        >
                                            <option value="Pinned">Pinned</option>
                                            <option value="Fixed">Fixed</option>
                                            <option value="Roller">Roller</option>
                                        </select>
                                    </td>
                                </tr>
                            ))}
                            {geometry.supports.length < 6 && Array.from({ length: 6 - geometry.supports.length }).map((_, i) => (
                                <tr key={`empty-${i}`}>
                                    <td className="text-center">
                                        <div style={{
                                            width: '20px',
                                            height: '20px',
                                            borderRadius: '50%',
                                            border: '2px solid #ccc',
                                            display: 'inline-flex',
                                            alignItems: 'center',
                                            justifyContent: 'center',
                                            fontSize: '11px',
                                            color: '#ccc'
                                        }}>
                                            {geometry.supports.length + i + 1}
                                        </div>
                                    </td>
                                    <td className="text-muted"></td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    );
};