import { useState, useMemo } from 'react';
import { usePileCapStore } from '../../store/pileCapStore';
import { calculatePileReactions } from '../../calculations/pileReactions';
import { calculateLoadCombinations, calculateServiceCombinations } from '../../calculations/loadCombinations';
import { DraggableLabel } from './DraggableLabel';

export const FlexuralDiagram = () => {
    const geometry = usePileCapStore(state => state.geometry);
    const loads = usePileCapStore(state => state.loads);
    const design = usePileCapStore(state => state.design);

    // Global Diagram State
    const isLocked = usePileCapStore(state => state.diagramState.isLocked);
    const labelPositions = usePileCapStore(state => state.diagramState.labelPositions);
    const setDiagramLocked = usePileCapStore(state => state.setDiagramLocked);
    const updateLabelPosition = usePileCapStore(state => state.updateLabelPosition);

    const getLabelPos = (id: string, defaultX: number, defaultY: number) => {
        return labelPositions[id] || { x: defaultX, y: defaultY };
    };

    const [combType, setCombType] = useState<'service' | 'factored'>('factored');
    const [selectedCombName, setSelectedCombName] = useState<string>('');

    // Calculate combinations based on type
    const combinations = useMemo(() => {
        return combType === 'service'
            ? calculateServiceCombinations(loads.cases)
            : calculateLoadCombinations(loads.cases);
    }, [loads.cases, combType]);

    // Select default combination
    useMemo(() => {
        if (combinations.length > 0) {
            const exists = combinations.find(c => c.combinationName === selectedCombName);
            if (!exists) {
                setSelectedCombName(combinations[0].combinationName);
            }
        }
    }, [combinations, selectedCombName]);

    const activeCombination = combinations.find(c => c.combinationName === selectedCombName) || combinations[0];

    // Calculate reactions for active combination
    const pileReactions = useMemo(() => {
        if (!activeCombination) return [];
        return calculatePileReactions(geometry, activeCombination, design);
    }, [geometry, activeCombination, design]);

    // --- Calculations for Flexure ---
    const columnCenterX = geometry.length / 2;
    const columnCenterY = geometry.width / 2;
    const colDimX = geometry.columnLength / 12; // ft
    const colDimY = geometry.columnWidth / 12; // ft

    // Critical locations (face of column)
    const critX = colDimX / 2; // ft from center
    const critY = colDimY / 2; // ft from center

    // Calculate Moments
    let momentX = 0; // Moment about X axis (due to Y distance) - Bending about X
    let momentZ = 0; // Moment about Z axis (due to X distance) - Bending about Z

    // Identify piles contributing to moment
    const pilesContributingX: number[] = []; // Pile IDs
    const pilesContributingZ: number[] = []; // Pile IDs

    pileReactions.forEach(pile => {
        // Bending about X (uses Y distances)
        const distY = pile.y - columnCenterY;
        if (Math.abs(distY) > critY) {
            const leverArm = Math.abs(distY) - critY;
            if (pile.reaction > 0) {
                momentX += pile.reaction * leverArm;
                pilesContributingX.push(pile.pileNumber);
            }
        }

        // Bending about Z (uses X distances)
        const distX = pile.x - columnCenterX;
        if (Math.abs(distX) > critX) {
            const leverArm = Math.abs(distX) - critX;
            if (pile.reaction > 0) {
                momentZ += pile.reaction * leverArm;
                pilesContributingZ.push(pile.pileNumber);
            }
        }
    });


    // --- Drawing Logic ---
    const scale = 30;
    const padding = 40;

    const planWidth = geometry.length * scale;
    const planHeight = geometry.width * scale;

    const svgWidth = planWidth + 2 * padding;
    const svgHeight = (planHeight + padding + 40) * 2 + padding; // Two diagrams

    const originX = padding;
    const originY1 = padding + 20; // Top diagram (Bending about Z)
    const originY2 = originY1 + planHeight + padding + 60; // Bottom diagram (Bending about X)

    const renderDiagram = (yOffset: number, title: string, axis: 'X' | 'Z', moment: number, contributingPiles: number[]) => {
        // Axis 'Z' means bending about Z axis -> Critical section is vertical lines at +/- critX
        // Axis 'X' means bending about X axis -> Critical section is horizontal lines at +/- critY

        const isZ = axis === 'Z';
        // const critDist = isZ ? critX : critY;

        // Shaded regions (contributing areas)
        // For Z axis: Left and Right of column
        // For X axis: Top and Bottom of column

        return (
            <g transform={`translate(${originX}, ${yOffset})`}>
                {/* Title */}
                <DraggableLabel
                    id={`flex-title-${axis}`}
                    text={title}
                    {...getLabelPos(`flex-title-${axis}`, planWidth / 2, planHeight + 30)}
                    isLocked={isLocked} onPositionChange={updateLabelPosition}
                    anchor="middle" fontSize={14}
                />

                {/* Cap Outline */}
                <rect x={0} y={0} width={planWidth} height={planHeight} fill="#87CEEB" stroke="black" strokeWidth="2" />

                {/* Shaded Areas */}
                {isZ ? (
                    <>
                        {/* Left Area */}
                        <rect
                            x={0} y={0}
                            width={(planWidth - colDimX * scale) / 2} height={planHeight}
                            fill="url(#pattern-dots-flex)" opacity="0.5"
                        />
                        {/* Right Area */}
                        <rect
                            x={(planWidth + colDimX * scale) / 2} y={0}
                            width={(planWidth - colDimX * scale) / 2} height={planHeight}
                            fill="url(#pattern-dots-flex)" opacity="0.5"
                        />
                    </>
                ) : (
                    <>
                        {/* Top Area */}
                        <rect
                            x={0} y={0}
                            width={planWidth} height={(planHeight - colDimY * scale) / 2}
                            fill="url(#pattern-dots-flex)" opacity="0.5"
                        />
                        {/* Bottom Area */}
                        <rect
                            x={0} y={(planHeight + colDimY * scale) / 2}
                            width={planWidth} height={(planHeight - colDimY * scale) / 2}
                            fill="url(#pattern-dots-flex)" opacity="0.5"
                        />
                    </>
                )}

                {/* Centerlines */}
                <line x1={planWidth / 2} y1={-10} x2={planWidth / 2} y2={planHeight + 10} stroke="black" strokeDasharray="4 4" />
                <line x1={-10} y1={planHeight / 2} x2={planWidth + 10} y2={planHeight / 2} stroke="black" strokeDasharray="4 4" />

                <DraggableLabel
                    id={`flex-axis-x-${axis}`}
                    text="X"
                    {...getLabelPos(`flex-axis-x-${axis}`, planWidth + 15, planHeight / 2)}
                    isLocked={isLocked} onPositionChange={updateLabelPosition}
                    anchor="start"
                />
                <DraggableLabel
                    id={`flex-axis-z-${axis}`}
                    text="Z"
                    {...getLabelPos(`flex-axis-z-${axis}`, planWidth / 2, -15)}
                    isLocked={isLocked} onPositionChange={updateLabelPosition}
                    anchor="middle"
                />

                {/* Critical Section Lines */}
                {isZ ? (
                    <>
                        <line x1={(planWidth - colDimX * scale) / 2} y1={0} x2={(planWidth - colDimX * scale) / 2} y2={planHeight} stroke="black" strokeDasharray="5 5" strokeWidth="1.5" />
                        <line x1={(planWidth + colDimX * scale) / 2} y1={0} x2={(planWidth + colDimX * scale) / 2} y2={planHeight} stroke="black" strokeDasharray="5 5" strokeWidth="1.5" />
                    </>
                ) : (
                    <>
                        <line x1={0} y1={(planHeight - colDimY * scale) / 2} x2={planWidth} y2={(planHeight - colDimY * scale) / 2} stroke="black" strokeDasharray="5 5" strokeWidth="1.5" />
                        <line x1={0} y1={(planHeight + colDimY * scale) / 2} x2={planWidth} y2={(planHeight + colDimY * scale) / 2} stroke="black" strokeDasharray="5 5" strokeWidth="1.5" />
                    </>
                )}

                {/* Column */}
                <rect
                    x={(planWidth - (geometry.columnLength / 12) * scale) / 2 + geometry.columnOffsetX * scale}
                    y={(planHeight - (geometry.columnWidth / 12) * scale) / 2 + geometry.columnOffsetZ * scale}
                    width={(geometry.columnLength / 12) * scale}
                    height={(geometry.columnWidth / 12) * scale}
                    fill="#f4a460"
                    stroke="black"
                    strokeWidth="1.5"
                />

                {/* Piles */}
                {pileReactions.map((p, i) => {
                    const px = p.x * scale;
                    const py = (geometry.width - p.y) * scale;
                    const pileRadius = (geometry.pileSize / 12 / 2) * scale;

                    const isContributing = contributingPiles.includes(p.pileNumber);

                    return (
                        <circle
                            key={i}
                            cx={px}
                            cy={py}
                            r={pileRadius}
                            fill={isContributing ? "#d2b48c" : "#a0522d"} // Tan if contributing, Brown if not (matching user image style roughly)
                            stroke="black"
                            strokeWidth="1"
                            opacity={isContributing ? 1 : 0.5}
                        />
                    );
                })}

                {/* Dimensions */}
                {isZ ? (
                    <>
                        {/* Width of critical section (Column Width) */}
                        <line
                            x1={(planWidth - colDimX * scale) / 2} y1={-25}
                            x2={(planWidth + colDimX * scale) / 2} y2={-25}
                            stroke="black"
                            markerStart="url(#arrow)" markerEnd="url(#arrow)"
                        />
                        <DraggableLabel
                            id={`flex-dim-${axis}`}
                            text={`${colDimX.toFixed(2)} ft`}
                            {...getLabelPos(`flex-dim-${axis}`, planWidth / 2, -35)}
                            isLocked={isLocked} onPositionChange={updateLabelPosition}
                            anchor="middle"
                        />
                    </>
                ) : (
                    <>
                        {/* Height of critical section (Column Depth) */}
                        <line
                            x1={-25} y1={(planHeight - colDimY * scale) / 2}
                            x2={-25} y2={(planHeight + colDimY * scale) / 2}
                            stroke="black"
                            markerStart="url(#arrow)" markerEnd="url(#arrow)"
                        />
                        <DraggableLabel
                            id={`flex-dim-${axis}`}
                            text={`${colDimY.toFixed(2)} ft`}
                            {...getLabelPos(`flex-dim-${axis}`, -35, planHeight / 2)}
                            isLocked={isLocked} onPositionChange={updateLabelPosition}
                            anchor="end" rotation={-90}
                        />
                    </>
                )}

                {/* Moment Callout */}
                <DraggableLabel
                    id={`flex-moment-${axis}`}
                    text={`${Math.round(moment)} k-ft`}
                    {...getLabelPos(`flex-moment-${axis}`, planWidth - 10, 30)}
                    isLocked={isLocked} onPositionChange={updateLabelPosition}
                    anchor="end" fontSize={14}
                />

            </g>
        );
    };

    return (
        <div className="diagram-container" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>

            {/* Controls */}
            <div style={{ marginBottom: '20px', display: 'flex', gap: '20px', alignItems: 'center', background: '#f5f5f5', padding: '10px', borderRadius: '8px' }}>
                <button
                    onClick={() => setDiagramLocked(!isLocked)}
                    style={{
                        padding: '8px 16px',
                        background: isLocked ? '#e0e0e0' : '#4caf50',
                        color: isLocked ? '#333' : 'white',
                        border: 'none',
                        borderRadius: '4px',
                        cursor: 'pointer',
                        fontWeight: 'bold'
                    }}
                >
                    {isLocked ? '🔒 Locked' : '🔓 Unlocked (Drag Labels)'}
                </button>

                <div style={{ display: 'flex', flexDirection: 'column', gap: '5px' }}>
                    <label style={{ display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer' }}>
                        <input
                            type="radio"
                            name="combTypeFlex"
                            checked={combType === 'service'}
                            onChange={() => setCombType('service')}
                        />
                        <span style={{ fontWeight: 500 }}>Service combs</span>
                    </label>
                    <label style={{ display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer' }}>
                        <input
                            type="radio"
                            name="combTypeFlex"
                            checked={combType === 'factored'}
                            onChange={() => setCombType('factored')}
                        />
                        <span style={{ fontWeight: 500 }}>Factored combs</span>
                    </label>
                </div>

                <div style={{ display: 'flex', flexDirection: 'column', gap: '5px' }}>
                    <label style={{ fontSize: '12px', fontWeight: 600, color: '#666' }}>Load Combination:</label>
                    <select
                        value={selectedCombName}
                        onChange={(e) => setSelectedCombName(e.target.value)}
                        style={{ padding: '6px', borderRadius: '4px', border: '1px solid #ccc', minWidth: '200px' }}
                    >
                        {combinations.map((c, i) => (
                            <option key={i} value={c.combinationName}>{c.combinationName}</option>
                        ))}
                    </select>
                </div>
            </div>

            {/* Diagram */}
            <div className="diagram-svg-container" style={{ border: '1px solid #eee', borderRadius: '8px', padding: '20px', background: 'white' }}>
                <svg width={svgWidth} height={svgHeight}>
                    <defs>
                        <marker id="arrow" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" markerUnits="strokeWidth">
                            <path d="M0,0 L0,6 L9,3 z" fill="#333" />
                        </marker>
                        <pattern id="pattern-dots-flex" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
                            <circle cx="2" cy="2" r="1" fill="#333" opacity="0.3" />
                        </pattern>
                    </defs>

                    {renderDiagram(originY1, "Bending about Z", 'Z', momentZ, pilesContributingZ)}
                    {renderDiagram(originY2, "Bending about X", 'X', momentX, pilesContributingX)}

                </svg>
            </div>
        </div>
    );
};