import { useState } from 'react';
import { useWindStore } from '../../store/windStore';
import case1 from '../../assets/diagrams/case-1.png';
import case2 from '../../assets/diagrams/case-2.png';
import case3 from '../../assets/diagrams/case-3.png';
import case4 from '../../assets/diagrams/case-4.png';

export const LoadCaseDiagrams = () => {
    const [activeTab, setActiveTab] = useState(1);

    const renderContent = () => {
        switch (activeTab) {
            case 1: return <LoadCaseImage src={case1} label="Case 1: Transverse" />;
            case 2: return <LoadCaseImage src={case2} label="Case 2: Longitudinal" />;
            case 3: return <LoadCaseImage src={case3} label="Case 3: Transverse (Torsion)" />;
            case 4: return <LoadCaseImage src={case4} label="Case 4: Longitudinal (Torsion)" />;
            default: return null;
        }
    };

    return (
        <div className="card report-section">
            <div className="report-section-title">Load Case Visualization</div>

            {/* Tabs */}
            <div className="tabs">
                <button
                    className={`tab-button ${activeTab === 1 ? 'active' : ''}`}
                    onClick={() => setActiveTab(1)}
                >
                    Case 1
                </button>
                <button
                    className={`tab-button ${activeTab === 2 ? 'active' : ''}`}
                    onClick={() => setActiveTab(2)}
                >
                    Case 2
                </button>
                <button
                    className={`tab-button ${activeTab === 3 ? 'active' : ''}`}
                    onClick={() => setActiveTab(3)}
                >
                    Case 3
                </button>
                <button
                    className={`tab-button ${activeTab === 4 ? 'active' : ''}`}
                    onClick={() => setActiveTab(4)}
                >
                    Case 4
                </button>
            </div>

            <div className="tab-content flex-row justify-center" style={{ padding: '20px' }}>
                {renderContent()}
            </div>
        </div>
    );
};

const LoadCaseImage = ({ src, label }: { src: string; label: string }) => {
    const { results } = useWindStore();

    // Safety check if results aren't ready
    if (!results) {
        return (
            <div style={{ padding: '20px', textAlign: 'center' }}>
                Calculating Parameters...
            </div>
        );
    }

    const { meanRoofHeight, zoneWidth } = results;
    const h = meanRoofHeight.toFixed(1);
    const a = zoneWidth.toFixed(1);
    const two_a = (zoneWidth * 2).toFixed(1);

    return (
        <div className="flex-row gap-md align-start wrap justify-center" style={{ width: '100%' }}>
            {/* Left: Image */}
            <div style={{ textAlign: 'center', flex: '1 1 500px', maxWidth: '800px' }}>
                <div style={{ fontWeight: 600, marginBottom: '12px' }}>{label}</div>
                <div style={{
                    border: '1px solid #eee',
                    background: '#fff',
                    padding: '10px',
                    borderRadius: '8px'
                }}>
                    <img
                        src={src}
                        alt={label}
                        style={{
                            width: '100%',
                            height: 'auto',
                            maxHeight: '400px',
                            objectFit: 'contain'
                        }}
                    />
                </div>
            </div>

            {/* Right: Info Panel */}
            <div className="card" style={{ flex: '0 0 250px', padding: '15px', background: '#f8f9fa' }}>
                <div style={{ fontWeight: 600, marginBottom: '10px', borderBottom: '1px solid #ddd', paddingBottom: '5px' }}>
                    Zoning Parameters
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', fontSize: '14px' }}>
                    <div className="flex-row justify-between">
                        <span>Mean Roof Height (h) =</span>
                        <strong>{h} ft</strong>
                    </div>
                    <div className="flex-row justify-between">
                        <span>Zone Width (a) =</span>
                        <strong>{a} ft</strong>
                    </div>
                    <div className="flex-row justify-between">
                        <span>End Width (2a) =</span>
                        <strong>{two_a} ft</strong>
                    </div>
                    <div className="flex-row justify-between">
                        <span>0.6h =</span>
                        <strong>{(meanRoofHeight * 0.6).toFixed(1)} ft</strong>
                    </div>
                </div>
            </div>
        </div>
    );
};