import React, { useState } from 'react';
import type { BuildingGeometry } from '../../types/wind';
import { WindLoadCase1Diagram } from './WindLoadCase1Diagram';
import { WindLoadCase2Diagram } from './WindLoadCase2Diagram';
import { WindLoadCase3Diagram } from './WindLoadCase3Diagram';
import { WindLoadCase4Diagram } from './WindLoadCase4Diagram';

interface MWFRSDiagramProps {
    geometry: BuildingGeometry;
    onZoneClick?: (zone: string, pressure: number) => void;
}

export const MWFRSDiagram: React.FC<MWFRSDiagramProps> = ({ geometry, onZoneClick }) => {
    void onZoneClick; // Suppress unused warning for now
    void geometry; // Geometry is illustrative in this diagram style
    const [activeCase, setActiveCase] = useState<1 | 2 | 3 | 4>(1);

    const getCaseTitle = (caseNum: number) => {
        const titles = [
            "Load Case 1: Transverse Wind Direction",
            "Load Case 2: Longitudinal Wind Direction",
            "Load Case 3: Torsional Load Case",
            "Load Case 4: Torsional Load Case",
        ];
        return titles[caseNum - 1];
    };

    const renderDiagram = () => {
        switch (activeCase) {
            case 1: return <WindLoadCase1Diagram />;
            case 2: return <WindLoadCase2Diagram />;
            case 3: return <WindLoadCase3Diagram />;
            case 4: return <WindLoadCase4Diagram />;
            default: return null;
        }
    };

    return (
        <div className="flex flex-col items-center justify-center h-full bg-white dark:bg-slate-50 p-4">
            {/* Case Selection Buttons */}
            <div className="flex gap-3 mb-8">
                {[1, 2, 3, 4].map((c) => (
                    <button
                        key={c}
                        onClick={() => setActiveCase(c as 1 | 2 | 3 | 4)}
                        className={`px-5 py-2 rounded-lg text-sm font-bold transition-all ${activeCase === c
                            ? 'bg-slate-800 text-white shadow-lg transform scale-105'
                            : 'bg-slate-200 text-slate-700 hover:bg-slate-300 hover:shadow-md'
                            }`}
                    >
                        Case {c}
                    </button>
                ))}
            </div>

            {/* Title */}
            <h3 className="text-xl font-bold text-slate-800 underline decoration-2 mb-6 text-center">
                {getCaseTitle(activeCase)}
            </h3>

            <div className="transform scale-125 origin-top">
                {renderDiagram()}
            </div>

            <p className="mt-12 text-sm text-slate-600 text-center max-w-2xl">
                Click the different load cases above to view wind pressure distributions for each MWFRS scenario.
                <br />
                <span className="text-xs italic">Diagrams based on ASCE 7-16 Figure 28.3-1</span>
            </p>
        </div>
    );
};
