import { useState } from 'react';
import elevationImg from '../../assets/diagrams/building-geo-elevation.png';
import planImg from '../../assets/diagrams/building-geo-plan.png';
import { useWindStore } from '../../store/windStore';

export const BuildingGeometryDiagram = () => {
    const [activeTab, setActiveTab] = useState<'elevation' | 'plan'>('elevation');
    const { inputs } = useWindStore();
    const { width, length, eaveHeight, ridgeHeight, roofType } = inputs.dimensions;

    const imgSrc = activeTab === 'elevation' ? elevationImg : planImg;
    const label = activeTab === 'elevation' ? "Elevation View" : "Plan View";

    return (
        <div className="card report-section">
            <div className="report-section-title">Building Geometry</div>

            {/* Tabs */}
            <div className="tabs">
                <button
                    className={`tab-button ${activeTab === 'elevation' ? 'active' : ''}`}
                    onClick={() => setActiveTab('elevation')}
                >
                    Elevation
                </button>
                <button
                    className={`tab-button ${activeTab === 'plan' ? 'active' : ''}`}
                    onClick={() => setActiveTab('plan')}
                >
                    Plan
                </button>
            </div>

            <div className="tab-content flex-row justify-center" style={{ padding: '20px' }}>
                <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={imgSrc}
                                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' }}>
                            Dimensions
                        </div>
                        <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', fontSize: '14px' }}>
                            <div className="flex-row justify-between">
                                <span>Width (B):</span>
                                <strong>{width} ft</strong>
                            </div>
                            <div className="flex-row justify-between">
                                <span>Length (L):</span>
                                <strong>{length} ft</strong>
                            </div>
                            <div className="flex-row justify-between">
                                <span>Eave Height (he):</span>
                                <strong>{eaveHeight} ft</strong>
                            </div>
                            <div className="flex-row justify-between">
                                <span>Ridge Height (hr):</span>
                                <strong>{ridgeHeight} ft</strong>
                            </div>
                            <div className="flex-row justify-between">
                                <span>Roof Type:</span>
                                <strong>{roofType}</strong>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};