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 PunchingShearDiagram = () => {
    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'); // Default to factored for punching checks usually
    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 Punching Shear ---
    const d = geometry.depth - geometry.coverBottom; // inches
    const d_ft = d / 12;

    // 1. Critical Section at d/2
    const c1 = geometry.columnLength / 12; // ft
    const c2 = geometry.columnWidth / 12; // ft
    const critDimX_d2 = c1 + d_ft; // ft
    const critDimY_d2 = c2 + d_ft; // ft
    const b0_d2 = 2 * (critDimX_d2 + critDimY_d2) * 12; // inches

    // Identify piles inside d/2 perimeter
    const pilesInside_d2 = pileReactions.filter(p => {
        const dx = Math.abs(p.x - geometry.length / 2);
        const dy = Math.abs(p.y - geometry.width / 2);
        return dx <= critDimX_d2 / 2 && dy <= critDimY_d2 / 2;
    });

    const P_u = activeCombination ? activeCombination.axialLoad : 0;
    const reactionInside_d2 = pilesInside_d2.reduce((sum, p) => sum + p.reaction, 0);
    const V_u_d2 = P_u - reactionInside_d2; // kips
    const stress_d2 = (V_u_d2 * 1000) / (b0_d2 * d); // psi

    // 2. Critical Section at Column Face
    const critDimX_face = c1; // ft
    const critDimY_face = c2; // ft
    const b0_face = 2 * (critDimX_face + critDimY_face) * 12; // inches

    // Identify piles inside face perimeter (unlikely, but possible for large columns)
    const pilesInside_face = pileReactions.filter(p => {
        const dx = Math.abs(p.x - geometry.length / 2);
        const dy = Math.abs(p.y - geometry.width / 2);
        return dx <= critDimX_face / 2 && dy <= critDimY_face / 2;
    });

    const reactionInside_face = pilesInside_face.reduce((sum, p) => sum + p.reaction, 0);
    const V_u_face = P_u - reactionInside_face; // kips
    const stress_face = (V_u_face * 1000) / (b0_face * d); // psi


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

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

    // We render two diagrams side-by-side or stacked. Stacked matches user image better.
    const svgWidth = planWidth + 2 * padding;
    const svgHeight = (planHeight + padding + 40) * 2 + padding; // Two diagrams

    const originX = padding;
    const originY1 = padding + 20; // Top diagram
    const originY2 = originY1 + planHeight + padding + 60; // Bottom diagram

    const renderDiagram = (yOffset: number, title: string, critDimX: number, critDimY: number, stress: number, pilesInside: typeof pileReactions) => {
        return (
            <g transform={`translate(${originX}, ${yOffset})`}>
                {/* Title */}
                <DraggableLabel
                    id={`punch-title-${title.replace(/\s+/g, '-')}`}
                    text={title}
                    {...getLabelPos(`punch-title-${title.replace(/\s+/g, '-')}`, 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" />

                {/* 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={`punch-axis-x-${title.replace(/\s+/g, '-')}`}
                    text="X"
                    {...getLabelPos(`punch-axis-x-${title.replace(/\s+/g, '-')}`, planWidth + 15, planHeight / 2)}
                    isLocked={isLocked} onPositionChange={updateLabelPosition}
                    anchor="start"
                />
                <DraggableLabel
                    id={`punch-axis-z-${title.replace(/\s+/g, '-')}`}
                    text="Z"
                    {...getLabelPos(`punch-axis-z-${title.replace(/\s+/g, '-')}`, planWidth / 2, -15)}
                    isLocked={isLocked} onPositionChange={updateLabelPosition}
                    anchor="middle"
                />

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

                    // Check if this pile is inside the critical perimeter
                    // We already calculated pilesInside for calculation, but need to match by ID or position
                    // Simple check again for visual highlighting
                    const isInside = pilesInside.some(pi => pi.pileNumber === p.pileNumber);

                    return (
                        <circle
                            key={i}
                            cx={px}
                            cy={py}
                            r={pileRadius}
                            fill={isInside ? "#d2b48c" : "#a0522d"} // Tan if inside (ignored), Brown if outside (active) - actually usually other way around?
                            // User image: Piles inside are lighter/faded. Piles outside are solid.
                            // Let's match user image: Inside = light brown/tan. Outside = dark brown.
                            stroke="black"
                            strokeWidth="1"
                            opacity={isInside ? 0.5 : 1}
                        />
                    );
                })}

                {/* Critical Perimeter (Dashed Area) */}
                {/* Centered rect */}
                <rect
                    x={(planWidth - critDimX * scale) / 2}
                    y={(planHeight - critDimY * scale) / 2}
                    width={critDimX * scale}
                    height={critDimY * scale}
                    fill="url(#pattern-dots)"
                    stroke="black"
                    strokeDasharray="4 4"
                />

                {/* 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"
                />

                {/* Dimensions for Critical Section */}
                {/* Width */}
                <line
                    x1={(planWidth - critDimX * scale) / 2} y1={-15}
                    x2={(planWidth + critDimX * scale) / 2} y2={-15}
                    stroke="black"
                    markerStart="url(#arrow)" markerEnd="url(#arrow)"
                />
                <DraggableLabel
                    id={`punch-dim-x-${title.replace(/\s+/g, '-')}`}
                    text={`${critDimX.toFixed(2)} ft`}
                    {...getLabelPos(`punch-dim-x-${title.replace(/\s+/g, '-')}`, planWidth / 2, -25)}
                    isLocked={isLocked} onPositionChange={updateLabelPosition}
                    anchor="middle"
                />

                {/* Height */}
                <line
                    x1={-15} y1={(planHeight - critDimY * scale) / 2}
                    x2={-15} y2={(planHeight + critDimY * scale) / 2}
                    stroke="black"
                    markerStart="url(#arrow)" markerEnd="url(#arrow)"
                />
                <DraggableLabel
                    id={`punch-dim-y-${title.replace(/\s+/g, '-')}`}
                    text={`${critDimY.toFixed(2)} ft`}
                    {...getLabelPos(`punch-dim-y-${title.replace(/\s+/g, '-')}`, -25, planHeight / 2)}
                    isLocked={isLocked} onPositionChange={updateLabelPosition}
                    anchor="end" rotation={-90}
                />

                {/* Stress Callout */}
                {/* Draw a line from the critical perimeter to a label */}
                <line
                    x1={(planWidth + critDimX * scale) / 2}
                    y1={planHeight / 2}
                    x2={(planWidth + critDimX * scale) / 2 + 40}
                    y2={planHeight / 2 - 20}
                    stroke="black"
                />
                <DraggableLabel
                    id={`punch-stress-${title.replace(/\s+/g, '-')}`}
                    text={`${Math.round(stress)} psi`}
                    {...getLabelPos(`punch-stress-${title.replace(/\s+/g, '-')}`, (planWidth + critDimX * scale) / 2 + 45, planHeight / 2 - 20)}
                    isLocked={isLocked} onPositionChange={updateLabelPosition}
                    anchor="start" 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="combTypePunching"
                            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="combTypePunching"
                            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" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
                            <circle cx="2" cy="2" r="1" fill="#999" opacity="0.5" />
                        </pattern>
                    </defs>

                    {renderDiagram(originY1, "Punching at d/2", critDimX_d2, critDimY_d2, stress_d2, pilesInside_d2)}
                    {renderDiagram(originY2, "Punching at Column Face", critDimX_face, critDimY_face, stress_face, pilesInside_face)}

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