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

export const InteractionDiagram = () => {
    const geometry = usePileCapStore(state => state.geometry);
    const materials = usePileCapStore(state => state.materials);
    const reinforcement = usePileCapStore(state => state.reinforcement);
    const loads = usePileCapStore(state => state.loads);

    // 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 [axis, setAxis] = useState<'X' | 'Y'>('X'); // X means bending about X-axis (using Y dimension)? No, usually X-axis means Moment Mux.
    // In columnDesign.ts:
    // Mux is moment about X axis.
    // capacityX is phiMnX (capacity about X axis).
    // So 'X' axis selection should show Mux vs PhiMnx.

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

    // Calculate combinations
    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];

    // Perform Design to get Interaction Points
    const designResult = useMemo(() => {
        if (!activeCombination) return null;
        return performColumnDesign(geometry, materials, reinforcement, activeCombination);
    }, [geometry, materials, reinforcement, activeCombination]);

    if (!designResult) return null;

    const points = axis === 'X' ? designResult.interactionPointsX : designResult.interactionPointsY;
    const demandM = axis === 'X' ? designResult.demandX : designResult.demandY;
    const demandP = designResult.axialLoad;

    // --- Drawing Logic ---
    const width = 400;
    const height = 500;
    const padding = 50;
    const graphWidth = width - 2 * padding;
    const graphHeight = height - 2 * padding;

    // Scales
    const maxP = Math.max(...points.map(p => p.p), demandP, 0) * 1.1;
    const minP = Math.min(...points.map(p => p.p), demandP, 0) * 1.1; // Handle tension
    // Ensure minP includes 0 if all P are positive, or goes negative if tension exists
    const pRange = maxP - minP;

    const maxM = Math.max(...points.map(p => p.m), demandM, 0) * 1.1;
    const mRange = maxM; // Start from 0

    const scaleX = graphWidth / mRange;
    const scaleY = graphHeight / pRange;

    // Coordinate transform
    // X is Moment (0 to maxM)
    // Y is Axial (minP to maxP)
    // SVG Y is inverted. 0 at top.
    // We want maxP at top, minP at bottom.

    const getX = (m: number) => padding + m * scaleX;
    const getY = (p: number) => padding + (maxP - p) * scaleY;

    // Generate Path
    const pathData = points.map((pt, i) => {
        return `${i === 0 ? 'M' : 'L'} ${getX(pt.m)} ${getY(pt.p)}`;
    }).join(' ');

    // Grid lines
    const xGrid = [0, 0.25, 0.5, 0.75, 1].map(f => maxM * f);
    const yGrid = [0, 0.25, 0.5, 0.75, 1].map(f => minP + pRange * f);

    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={{ fontSize: '12px', fontWeight: 600, color: '#666' }}>Axis:</label>
                    <div style={{ display: 'flex', gap: '10px' }}>
                        <label style={{ cursor: 'pointer' }}>
                            <input type="radio" checked={axis === 'X'} onChange={() => setAxis('X')} /> X-Axis (Mux)
                        </label>
                        <label style={{ cursor: 'pointer' }}>
                            <input type="radio" checked={axis === 'Y'} onChange={() => setAxis('Y')} /> Y-Axis (Muy)
                        </label>
                    </div>
                </div>

                <div style={{ display: 'flex', flexDirection: 'column', gap: '5px' }}>
                    <label style={{ fontSize: '12px', fontWeight: 600, color: '#666' }}>Comb Type:</label>
                    <div style={{ display: 'flex', gap: '10px' }}>
                        <label style={{ cursor: 'pointer' }}>
                            <input type="radio" checked={combType === 'service'} onChange={() => setCombType('service')} /> Service
                        </label>
                        <label style={{ cursor: 'pointer' }}>
                            <input type="radio" checked={combType === 'factored'} onChange={() => setCombType('factored')} /> Factored
                        </label>
                    </div>
                </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>

            <div className="diagram-svg-container" style={{ border: '1px solid #eee', borderRadius: '8px', padding: '20px', background: 'white' }}>
                <svg width={width} height={height}>
                    <defs>
                        <marker id="arrow-axis" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" markerUnits="strokeWidth">
                            <path d="M0,0 L0,6 L9,3 z" fill="#333" />
                        </marker>
                    </defs>

                    {/* Grid */}
                    {xGrid.map((x, i) => (
                        <line key={`x-${i}`} x1={getX(x)} y1={padding} x2={getX(x)} y2={height - padding} stroke="#eee" />
                    ))}
                    {yGrid.map((y, i) => (
                        <line key={`y-${i}`} x1={padding} y1={getY(y)} x2={width - padding} y2={getY(y)} stroke="#eee" />
                    ))}

                    {/* Axes */}
                    <line x1={padding} y1={getY(0)} x2={width - padding + 10} y2={getY(0)} stroke="black" markerEnd="url(#arrow-axis)" />
                    <line x1={padding} y1={height - padding} x2={padding} y2={padding - 10} stroke="black" markerEnd="url(#arrow-axis)" />

                    {/* Axis Labels */}
                    <DraggableLabel
                        id="inter-axis-x"
                        text="φMn (k-ft)"
                        {...getLabelPos("inter-axis-x", width - padding + 15, getY(0))}
                        isLocked={isLocked} onPositionChange={updateLabelPosition}
                        anchor="start"
                    />
                    <DraggableLabel
                        id="inter-axis-y"
                        text="φPn (kip)"
                        {...getLabelPos("inter-axis-y", padding, padding - 20)}
                        isLocked={isLocked} onPositionChange={updateLabelPosition}
                        anchor="middle"
                    />

                    {/* Labels for Grid */}
                    {xGrid.map((x, i) => (
                        <text key={`xl-${i}`} x={getX(x)} y={getY(0) + 15} textAnchor="middle" fontSize="10">{Math.round(x)}</text>
                    ))}
                    {yGrid.map((y, i) => (
                        <text key={`yl-${i}`} x={padding - 10} y={getY(y)} textAnchor="end" alignmentBaseline="middle" fontSize="10">{Math.round(y)}</text>
                    ))}

                    {/* Interaction Curve */}
                    <path d={pathData} fill="none" stroke="#2e7d32" strokeWidth="2" />

                    {/* Demand Point */}
                    <circle cx={getX(demandM)} cy={getY(demandP)} r="4" fill="red" stroke="black" />
                    <DraggableLabel
                        id="inter-demand"
                        text="Pu, Mu"
                        {...getLabelPos("inter-demand", getX(demandM) + 8, getY(demandP))}
                        isLocked={isLocked} onPositionChange={updateLabelPosition}
                        anchor="start" fontSize={12} color="red"
                    />

                    {/* Annotations */}
                    <DraggableLabel
                        id="inter-phiPo"
                        text="φPo"
                        {...getLabelPos("inter-phiPo", getX(points[0].m) + 10, getY(points[0].p))}
                        isLocked={isLocked} onPositionChange={updateLabelPosition}
                        anchor="start" fontSize={10}
                    />

                </svg>
            </div>

            <div style={{ marginTop: '10px', fontSize: '14px' }}>
                <strong>Controlling Load Comb:</strong> <span style={{ color: 'red' }}>{activeCombination.combinationName}</span>
            </div>
        </div>
    );
};