import { usePileCapStore } from '../../store/pileCapStore';
import type { PileReaction } from '../../types/pileCap';
import { DraggableLabel } from './DraggableLabel';

interface OneWayShearDiagramProps {
    direction: 'X' | 'Y';
    criticalSectionDist: number; // in inches (e.g., d or 0)
    piles: PileReaction[];
}

export const OneWayShearDiagram = ({ direction, criticalSectionDist, piles }: OneWayShearDiagramProps) => {
    const geometry = usePileCapStore(state => state.geometry);

    // 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 };
    };

    // Dimensions
    const width = 300;
    const height = 300;
    const padding = 40;

    // Scale factors
    const scaleX = (width - 2 * padding) / geometry.length;
    const scaleZ = (height - 2 * padding) / geometry.width;
    const scale = Math.min(scaleX, scaleZ);

    // Center offsets
    const offsetX = (width - geometry.length * scale) / 2;
    const offsetZ = (height - geometry.width * scale) / 2;

    // Helper to transform coordinates
    const toPx = (x: number, z: number) => ({
        x: offsetX + x * scale,
        y: offsetZ + z * scale
    });

    // Column dimensions in ft
    const colLenFt = geometry.columnLength / 12;
    const colWidthFt = geometry.columnWidth / 12;
    const colX = (geometry.length - colLenFt) / 2 + geometry.columnOffsetX;
    const colZ = (geometry.width - colWidthFt) / 2 + geometry.columnOffsetZ;

    // Critical Section Lines
    // direction 'X' means shear force Vy (checking along X axis? No, One-Way Shear X usually means shear across the width, checking sections along length)
    // Wait, "One-Way Shear X" typically means Vux (shear force in X direction), so critical planes are perpendicular to X axis.
    // Let's assume direction 'X' means we are checking sections at x = ...

    // Critical section positions (in ft from left/bottom edge)
    const distFt = criticalSectionDist / 12;

    let critLine1 = 0;
    let critLine2 = 0;
    let shadeRects: { x: number, y: number, w: number, h: number }[] = [];

    if (direction === 'X') {
        // Critical planes are vertical lines
        // Col center X
        const colCenterX = colX + colLenFt / 2;

        // Planes at center +/- (colLen/2 + dist)
        const leftPlaneX = colCenterX - (colLenFt / 2 + distFt);
        const rightPlaneX = colCenterX + (colLenFt / 2 + distFt);

        critLine1 = leftPlaneX;
        critLine2 = rightPlaneX;

        // Shade outer regions
        // Left region: 0 to leftPlaneX
        if (leftPlaneX > 0) {
            shadeRects.push({ x: 0, y: 0, w: leftPlaneX, h: geometry.width });
        }
        // Right region: rightPlaneX to length
        if (rightPlaneX < geometry.length) {
            shadeRects.push({ x: rightPlaneX, y: 0, w: geometry.length - rightPlaneX, h: geometry.width });
        }

    } else {
        // Direction Y (Z in geometry)
        // Critical planes are horizontal lines
        const colCenterZ = colZ + colWidthFt / 2;

        const bottomPlaneZ = colCenterZ - (colWidthFt / 2 + distFt);
        const topPlaneZ = colCenterZ + (colWidthFt / 2 + distFt);

        critLine1 = bottomPlaneZ;
        critLine2 = topPlaneZ;

        // Shade outer regions
        // Bottom region: 0 to bottomPlaneZ
        if (bottomPlaneZ > 0) {
            shadeRects.push({ x: 0, y: 0, w: geometry.length, h: bottomPlaneZ });
        }
        // Top region: topPlaneZ to width
        if (topPlaneZ < geometry.width) {
            shadeRects.push({ x: 0, y: topPlaneZ, w: geometry.length, h: geometry.width - topPlaneZ });
        }
    }

    return (
        <div style={{ marginTop: '10px', marginBottom: '10px', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>

            {/* Controls (Mini version since this is usually embedded in a list) */}
            <div style={{ marginBottom: '10px' }}>
                <button
                    onClick={() => setDiagramLocked(!isLocked)}
                    style={{
                        padding: '4px 8px',
                        fontSize: '10px',
                        background: isLocked ? '#e0e0e0' : '#4caf50',
                        color: isLocked ? '#333' : 'white',
                        border: 'none',
                        borderRadius: '4px',
                        cursor: 'pointer',
                        fontWeight: 'bold'
                    }}
                >
                    {isLocked ? '🔒' : '🔓 Move Labels'}
                </button>
            </div>

            <div style={{ border: '1px solid #eee', borderRadius: '4px', padding: '10px', background: 'white' }}>
                <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} style={{ display: 'block', margin: '0 auto' }}>
                    {/* Pile Cap Outline */}
                    <rect
                        x={offsetX}
                        y={offsetZ}
                        width={geometry.length * scale}
                        height={geometry.width * scale}
                        fill="#fff"
                        stroke="black"
                        strokeWidth="2"
                    />

                    {/* Shaded Failure Areas */}
                    {shadeRects.map((r, i) => (
                        <rect
                            key={i}
                            x={offsetX + r.x * scale}
                            y={offsetZ + r.y * scale}
                            width={r.w * scale}
                            height={r.h * scale}
                            fill="#e6f3ff" // Light blue shade
                            stroke="none"
                        />
                    ))}

                    {/* Critical Section Lines */}
                    {direction === 'X' ? (
                        <>
                            <line
                                x1={offsetX + critLine1 * scale}
                                y1={offsetZ}
                                x2={offsetX + critLine1 * scale}
                                y2={offsetZ + geometry.width * scale}
                                stroke="#0066cc"
                                strokeWidth="2"
                                strokeDasharray="5 5"
                            />
                            <line
                                x1={offsetX + critLine2 * scale}
                                y1={offsetZ}
                                x2={offsetX + critLine2 * scale}
                                y2={offsetZ + geometry.width * scale}
                                stroke="#0066cc"
                                strokeWidth="2"
                                strokeDasharray="5 5"
                            />
                        </>
                    ) : (
                        <>
                            <line
                                x1={offsetX}
                                y1={offsetZ + critLine1 * scale}
                                x2={offsetX + geometry.length * scale}
                                y2={offsetZ + critLine1 * scale}
                                stroke="#0066cc"
                                strokeWidth="2"
                                strokeDasharray="5 5"
                            />
                            <line
                                x1={offsetX}
                                y1={offsetZ + critLine2 * scale}
                                x2={offsetX + geometry.length * scale}
                                y2={offsetZ + critLine2 * scale}
                                stroke="#0066cc"
                                strokeWidth="2"
                                strokeDasharray="5 5"
                            />
                        </>
                    )}

                    {/* Piles */}
                    {piles.map((p, i) => {
                        const pos = toPx(p.x, p.y); // Note: PileReaction uses y for Z direction
                        const pileSizePx = (geometry.pileSize / 12) * scale;

                        // Check if pile is in shaded region (contributing to shear)
                        let isContributing = false;
                        if (direction === 'X') {
                            if (p.x < critLine1 || p.x > critLine2) isContributing = true;
                        } else {
                            if (p.y < critLine1 || p.y > critLine2) isContributing = true;
                        }

                        const pileColor = isContributing ? "#ffcccc" : "#eee"; // Highlight contributing piles
                        const strokeColor = isContributing ? "#cc0000" : "#999";

                        if (geometry.pileType === 'Round') {
                            return (
                                <circle
                                    key={i}
                                    cx={pos.x}
                                    cy={pos.y}
                                    r={pileSizePx / 2}
                                    fill={pileColor}
                                    stroke={strokeColor}
                                    strokeWidth="1"
                                />
                            );
                        } else {
                            return (
                                <rect
                                    key={i}
                                    x={pos.x - pileSizePx / 2}
                                    y={pos.y - pileSizePx / 2}
                                    width={pileSizePx}
                                    height={pileSizePx}
                                    fill={pileColor}
                                    stroke={strokeColor}
                                    strokeWidth="1"
                                />
                            );
                        }
                    })}

                    {/* Column */}
                    <rect
                        x={offsetX + colX * scale}
                        y={offsetZ + colZ * scale}
                        width={colLenFt * scale}
                        height={colWidthFt * scale}
                        fill="#dcb" // Tan/brownish for column
                        stroke="black"
                        strokeWidth="2"
                    />

                    {/* Axes */}
                    <DraggableLabel
                        id={`oneway-${direction}-axis-x`}
                        text="X"
                        {...getLabelPos(`oneway-${direction}-axis-x`, width - 20, height / 2)}
                        isLocked={isLocked} onPositionChange={updateLabelPosition}
                        anchor="start"
                    />
                    <DraggableLabel
                        id={`oneway-${direction}-axis-z`}
                        text="Z"
                        {...getLabelPos(`oneway-${direction}-axis-z`, width / 2, 20)}
                        isLocked={isLocked} onPositionChange={updateLabelPosition}
                        anchor="middle"
                    />

                    {/* Critical Section Label */}
                    <DraggableLabel
                        id={`oneway-${direction}-crit-label`}
                        text={`Crit. Section (d=${criticalSectionDist.toFixed(1)}")`}
                        {...getLabelPos(`oneway-${direction}-crit-label`, width / 2, height - 10)}
                        isLocked={isLocked} onPositionChange={updateLabelPosition}
                        anchor="middle" fontSize={10} color="#0066cc"
                    />

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