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';
// import type { LoadCombinationResult } from '../../types/pileCap';

export const PileReactionsDiagram = () => {
    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'>('service');
    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 if none selected or invalid
    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]);

    const maxReaction = Math.max(...pileReactions.map(p => p.reaction), 0);
    // const minReaction = Math.min(...pileReactions.map(p => p.reaction), 0);

    // --- Drawing Logic ---
    const scale = 35;
    const padding = 60;

    // Plan View Dimensions
    const planWidth = geometry.length * scale;
    const planHeight = geometry.width * scale;

    // Elevation View Dimensions
    const elevHeight = (geometry.depth / 12 + 4) * scale; // Cap + piles

    // Total SVG Size
    const svgWidth = planWidth + 2 * padding + 100; // Extra for legend/labels
    const svgHeight = planHeight + elevHeight + 3 * padding;

    const planOriginX = padding + 50;
    const planOriginY = padding + elevHeight + 20;

    const elevOriginX = planOriginX;
    const elevOriginY = padding;

    // Helper for pile color
    const getPileColor = (reaction: number) => {
        if (reaction < 0) return '#ffcccc'; // Uplift
        const ratio = maxReaction > 0 ? reaction / maxReaction : 0;
        const opacity = 0.1 + (ratio * 0.9);
        return `rgba(255, 165, 0, ${opacity})`; // Orange base to match user image
    };

    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="combType"
                            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="combType"
                            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>
                    </defs>

                    {/* --- Elevation View --- */}
                    <g transform={`translate(${elevOriginX}, ${elevOriginY})`}>
                        {/* Cap */}
                        <rect
                            x={0}
                            y={3 * scale} // Start below column
                            width={geometry.length * scale}
                            height={(geometry.depth / 12) * scale}
                            fill="#f4a460" // Sandy brown
                            stroke="black"
                            strokeWidth="2"
                        />

                        {/* Column */}
                        <rect
                            x={(geometry.length * scale - (geometry.columnLength / 12) * scale) / 2 + geometry.columnOffsetX * scale}
                            y={3 * scale - 2 * scale} // Stick up 2ft
                            width={(geometry.columnLength / 12) * scale}
                            height={2 * scale}
                            fill="#f4a460"
                            stroke="black"
                            strokeWidth="2"
                        />

                        {/* Piles (Projected) */}
                        {Array.from({ length: geometry.pileColumns }).map((_, col) => {
                            const x = ((geometry.length - (geometry.pileColumns - 1) * geometry.pileSpacingX) / 2 + col * geometry.pileSpacingX) * scale;
                            const w = (geometry.pileSize / 12) * scale;
                            return (
                                <rect
                                    key={col}
                                    x={x - w / 2}
                                    y={3 * scale + (geometry.depth / 12) * scale}
                                    width={w}
                                    height={2.5 * scale}
                                    fill="#cd853f" // Darker brown
                                    stroke="black"
                                    strokeWidth="1.5"
                                />
                            );
                        })}

                        {/* Dimensions */}
                        {/* Depth */}
                        <line x1={-15} y1={3 * scale} x2={-15} y2={3 * scale + (geometry.depth / 12) * scale} stroke="black" markerStart="url(#arrow)" markerEnd="url(#arrow)" />
                        <DraggableLabel
                            id="reactions-depth"
                            text={`${geometry.depth.toFixed(1)} in`}
                            {...getLabelPos("reactions-depth", -20, 3 * scale + (geometry.depth / 12) * scale / 2)}
                            isLocked={isLocked} onPositionChange={updateLabelPosition}
                            anchor="end"
                        />

                        {/* Column Height above cap (arbitrary 3ft in user image) */}
                        <line x1={-15} y1={3 * scale - 2 * scale} x2={-15} y2={3 * scale} stroke="black" markerStart="url(#arrow)" markerEnd="url(#arrow)" />
                        <DraggableLabel
                            id="reactions-col-height"
                            text="3.00 ft"
                            {...getLabelPos("reactions-col-height", -20, 3 * scale - scale)}
                            isLocked={isLocked} onPositionChange={updateLabelPosition}
                            anchor="end"
                        />
                    </g>


                    {/* --- Plan View --- */}
                    <g transform={`translate(${planOriginX}, ${planOriginY})`}>
                        {/* Cap Outline */}
                        <rect
                            x={0}
                            y={0}
                            width={planWidth}
                            height={planHeight}
                            fill="#f0e68c" // Khaki
                            stroke="black"
                            strokeWidth="2"
                        />

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

                        <DraggableLabel
                            id="reactions-axis-x"
                            text="X"
                            {...getLabelPos("reactions-axis-x", planWidth + 25, planHeight / 2)}
                            isLocked={isLocked} onPositionChange={updateLabelPosition}
                            anchor="start" fontSize={14}
                        />
                        <DraggableLabel
                            id="reactions-axis-z"
                            text="Z"
                            {...getLabelPos("reactions-axis-z", planWidth / 2, -25)}
                            isLocked={isLocked} onPositionChange={updateLabelPosition}
                            anchor="middle" fontSize={14}
                        />

                        {/* 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 & Reactions */}
                        {pileReactions.map((p, i) => {
                            // Transform coordinates relative to top-left of cap
                            // p.x is from left edge, p.y is from bottom edge (standard math coords)
                            // But SVG y is from top.
                            // Wait, PileReaction definition: y: number; // ft from bottom edge
                            // So SVG y = height - p.y * scale
                            // Let's verify startY calculation in pileReactions.ts
                            // startY = (width - ...)/2. This is from "bottom" if we assume standard grid generation.
                            // Let's assume p.y is from bottom.

                            const px = p.x * scale;
                            const py = (geometry.width - p.y) * scale; // Flip Y for SVG

                            const pileRadius = (geometry.pileSize / 12 / 2) * scale;

                            return (
                                <g key={i}>
                                    <circle
                                        cx={px}
                                        cy={py}
                                        r={pileRadius}
                                        fill={getPileColor(p.reaction)}
                                        stroke="black"
                                        strokeWidth="1"
                                    />
                                    <DraggableLabel
                                        id={`reactions-pile-val-${p.pileNumber}`}
                                        text={`${Math.round(p.reaction)} kip`}
                                        {...getLabelPos(`reactions-pile-val-${p.pileNumber}`, px, py - pileRadius - 5)}
                                        isLocked={isLocked} onPositionChange={updateLabelPosition}
                                        anchor="middle" fontSize={11}
                                    />
                                    <DraggableLabel
                                        id={`reactions-pile-num-${p.pileNumber}`}
                                        text={`#${p.pileNumber}`}
                                        {...getLabelPos(`reactions-pile-num-${p.pileNumber}`, px, py + pileRadius + 12)}
                                        isLocked={isLocked} onPositionChange={updateLabelPosition}
                                        anchor="middle" fontSize={10} color="#666"
                                    />
                                </g>
                            );
                        })}

                        {/* Dimensions */}
                        {/* Width */}
                        <line x1={-15} y1={0} x2={-15} y2={planHeight} stroke="black" markerStart="url(#arrow)" markerEnd="url(#arrow)" />
                        <DraggableLabel
                            id="reactions-dim-width"
                            text={`${geometry.width.toFixed(2)} ft`}
                            {...getLabelPos("reactions-dim-width", -20, planHeight / 2)}
                            isLocked={isLocked} onPositionChange={updateLabelPosition}
                            anchor="end" rotation={-90}
                        />

                        {/* Length */}
                        <line x1={0} y1={planHeight + 15} x2={planWidth} y2={planHeight + 15} stroke="black" markerStart="url(#arrow)" markerEnd="url(#arrow)" />
                        <DraggableLabel
                            id="reactions-dim-length"
                            text={`${geometry.length.toFixed(2)} ft`}
                            {...getLabelPos("reactions-dim-length", planWidth / 2, planHeight + 30)}
                            isLocked={isLocked} onPositionChange={updateLabelPosition}
                            anchor="middle"
                        />

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