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

type LoadTab = 'Final' | 'Construction';
type LoadSubTab = 'Uniform' | 'Variable' | 'Concentrated' | 'Moments';

export const LoadsInput: React.FC = () => {
    const { loads, setLoads } = useBeamStore();
    const [activeTab, setActiveTab] = useState<LoadTab>('Final');
    const [activeSubTab, setActiveSubTab] = useState<LoadSubTab>('Uniform');

    const updateUniformLoad = (id: string, field: string, value: any) => {
        const updated = loads.uniformLoads.map(load =>
            load.id === id ? { ...load, [field]: value } : load
        );
        setLoads({ uniformLoads: updated });
    };

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

            {/* Main Tabs */}
            <div className="tabs">
                <button
                    className={`tab ${activeTab === 'Final' ? 'active' : ''}`}
                    onClick={() => setActiveTab('Final')}
                >
                    Final Loads
                </button>
                <button
                    className={`tab ${activeTab === 'Construction' ? 'active' : ''}`}
                    onClick={() => setActiveTab('Construction')}
                >
                    Construction Loads
                </button>
            </div>

            {/* Sub Tabs */}
            <div className="tabs" style={{ borderTop: 'none', marginTop: '-1px' }}>
                <button
                    className={`tab ${activeSubTab === 'Uniform' ? 'active' : ''}`}
                    onClick={() => setActiveSubTab('Uniform')}
                >
                    Uniform
                </button>
                <button
                    className={`tab ${activeSubTab === 'Variable' ? 'active' : ''}`}
                    onClick={() => setActiveSubTab('Variable')}
                >
                    Variable
                </button>
                <button
                    className={`tab ${activeSubTab === 'Concentrated' ? 'active' : ''}`}
                    onClick={() => setActiveSubTab('Concentrated')}
                >
                    Concentrated
                </button>
                <button
                    className={`tab ${activeSubTab === 'Moments' ? 'active' : ''}`}
                    onClick={() => setActiveSubTab('Moments')}
                >
                    Moments
                </button>
            </div>

            {activeSubTab === 'Uniform' && (
                <>
                    <div style={{ marginBottom: '12px' }}>
                        <label style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                            <input
                                type="checkbox"
                                checked={loads.calculateSelfweight}
                                onChange={(e) => setLoads({ calculateSelfweight: e.target.checked })}
                            />
                            Let ASDIP calculate selfweight
                        </label>
                    </div>

                    <div style={{ overflowX: 'auto' }}>
                        <table style={{ fontSize: '11px' }}>
                            <thead>
                                <tr>
                                    <th rowSpan={2}></th>
                                    <th rowSpan={2}>Full</th>
                                    <th colSpan={2}>Length</th>
                                    <th rowSpan={2}>Trib (ft)</th>
                                    <th colSpan={6} style={{ textAlign: 'center' }}>Loads (psf)</th>
                                    <th rowSpan={2}></th>
                                </tr>
                                <tr>
                                    <th>Start</th>
                                    <th>End</th>
                                    <th>Dead</th>
                                    <th>Live</th>
                                    <th>R Live</th>
                                    <th>Snow</th>
                                    <th>Wind</th>
                                    <th>Seismic</th>
                                </tr>
                            </thead>
                            <tbody>
                                {loads.uniformLoads.map((load) => (
                                    <tr key={load.id}>
                                        <td style={{ fontWeight: 600 }}>{load.id}</td>
                                        <td className="text-center">
                                            <input
                                                type="checkbox"
                                                checked={load.full}
                                                onChange={(e) => updateUniformLoad(load.id, 'full', e.target.checked)}
                                            />
                                        </td>
                                        <td>
                                            <input
                                                type="number"
                                                value={load.start}
                                                onChange={(e) => updateUniformLoad(load.id, 'start', parseFloat(e.target.value) || 0)}
                                                style={{ width: '60px' }}
                                                step="0.1"
                                                disabled={load.full}
                                            />
                                        </td>
                                        <td>
                                            <input
                                                type="number"
                                                value={load.end}
                                                onChange={(e) => updateUniformLoad(load.id, 'end', parseFloat(e.target.value) || 0)}
                                                style={{ width: '60px' }}
                                                step="0.1"
                                                disabled={load.full}
                                            />
                                        </td>
                                        <td>
                                            <input
                                                type="number"
                                                value={load.tributaryWidth}
                                                onChange={(e) => updateUniformLoad(load.id, 'tributaryWidth', parseFloat(e.target.value) || 0)}
                                                style={{ width: '60px' }}
                                                step="0.1"
                                            />
                                        </td>
                                        <td>
                                            <input
                                                type="number"
                                                value={load.dead}
                                                onChange={(e) => updateUniformLoad(load.id, 'dead', parseFloat(e.target.value) || 0)}
                                                style={{ width: '60px' }}
                                                step="1"
                                            />
                                        </td>
                                        <td>
                                            <input
                                                type="number"
                                                value={load.live}
                                                onChange={(e) => updateUniformLoad(load.id, 'live', parseFloat(e.target.value) || 0)}
                                                style={{ width: '60px' }}
                                                step="1"
                                            />
                                        </td>
                                        <td>
                                            <input
                                                type="number"
                                                value={load.rLive}
                                                onChange={(e) => updateUniformLoad(load.id, 'rLive', parseFloat(e.target.value) || 0)}
                                                style={{ width: '60px' }}
                                                step="1"
                                            />
                                        </td>
                                        <td>
                                            <input
                                                type="number"
                                                value={load.snow}
                                                onChange={(e) => updateUniformLoad(load.id, 'snow', parseFloat(e.target.value) || 0)}
                                                style={{ width: '60px' }}
                                                step="1"
                                            />
                                        </td>
                                        <td>
                                            <input
                                                type="number"
                                                value={load.wind}
                                                onChange={(e) => updateUniformLoad(load.id, 'wind', parseFloat(e.target.value) || 0)}
                                                style={{ width: '60px' }}
                                                step="1"
                                            />
                                        </td>
                                        <td>
                                            <input
                                                type="number"
                                                value={load.seismic}
                                                onChange={(e) => updateUniformLoad(load.id, 'seismic', parseFloat(e.target.value) || 0)}
                                                style={{ width: '60px' }}
                                                step="1"
                                            />
                                        </td>
                                        <td className="text-error" style={{ fontWeight: 600, cursor: 'pointer' }}>x</td>
                                    </tr>
                                ))}
                            </tbody>
                        </table>
                    </div>

                    {/* Load Diagram */}
                    <div style={{ marginTop: '16px', padding: '12px', background: '#fafafa', borderRadius: '4px' }}>
                        <svg width="100%" height="100" viewBox="0 0 600 100">
                            {/* End labels */}
                            <text x="100" y="30" fontSize="10" fill="#666">Start</text>
                            <text x="500" y="30" fontSize="10" textAnchor="end" fill="#666">End</text>

                            {/* Load label */}
                            <text x="300" y="50" fontSize="12" textAnchor="middle" fill="#0078d4" fontWeight="600">w</text>

                            {/* Blue load area */}
                            <rect x="200" y="55" width="200" height="25" fill="#0078d4" opacity="0.3" />

                            {/* Green beam with supports */}
                            <rect x="100" y="80" width="400" height="12" fill="#90ee90" stroke="#666" strokeWidth="1" />
                            <polygon points="150,92 140,100 160,100" fill="white" stroke="#666" strokeWidth="2" />
                            <polygon points="450,92 440,100 460,100" fill="white" stroke="#666" strokeWidth="2" />

                            {/* Dimension lines */}
                            <line x1="100" y1="35" x2="200" y2="35" stroke="#666" strokeWidth="1" />
                            <line x1="100" y1="30" x2="100" y2="40" stroke="#666" strokeWidth="1" />
                            <line x1="200" y1="30" x2="200" y2="55" stroke="#666" strokeWidth="1" strokeDasharray="2,2" />

                            <line x1="400" y1="35" x2="500" y2="35" stroke="#666" strokeWidth="1" />
                            <line x1="500" y1="30" x2="500" y2="40" stroke="#666" strokeWidth="1" />
                            <line x1="400" y1="30" x2="400" y2="55" stroke="#666" strokeWidth="1" strokeDasharray="2,2" />
                        </svg>
                    </div>
                </>
            )}

            {activeSubTab === 'Variable' && (
                <div style={{ padding: '20px', textAlign: 'center', color: '#999' }}>
                    Variable loads tab (not implemented in this demo)
                </div>
            )}

            {activeSubTab === 'Concentrated' && (
                <div style={{ padding: '20px', textAlign: 'center', color: '#999' }}>
                    Concentrated loads tab (not implemented in this demo)
                </div>
            )}

            {activeSubTab === 'Moments' && (
                <div style={{ padding: '20px', textAlign: 'center', color: '#999' }}>
                    Moments tab (not implemented in this demo)
                </div>
            )}
        </div>
    );
};