import { usePileCapStore } from '../../store/pileCapStore';
import { DraggableLabel } from './DraggableLabel';

export const PileCapDiagram = () => {
    const geometry = usePileCapStore(state => state.geometry);
    const results = usePileCapStore(state => state.results);

    // 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 scale = 40;
    const svgWidth = geometry.length * scale + 150; // Increased width for legend
    const svgHeight = geometry.width * scale + 120;
    const offsetX = 50;
    const offsetY = 70; // Increased top margin for title

    const startX = (geometry.length - (geometry.pileColumns - 1) * geometry.pileSpacingX) / 2;
    const startY = (geometry.width - (geometry.pileRows - 1) * geometry.pileSpacingY) / 2;

    // Helper to get pile color based on reaction
    const getPileColor = (reaction: number, maxReaction: number) => {
        if (reaction < 0) return '#ffcccc'; // Uplift (Red tint)

        // Compression scaling (White to Dark Blue)
        // Normalize reaction between 0 and maxReaction
        const ratio = maxReaction > 0 ? reaction / maxReaction : 0;
        // Interpolate between White (#ffffff) and Blue (#2b5797)
        // Simple opacity approach on blue base
        const opacity = 0.1 + (ratio * 0.9);
        return `rgba(43, 87, 151, ${opacity})`;
    };

    return (
        <div className="diagram-container" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
            <div className="diagram-title" style={{ marginBottom: '10px', textAlign: 'center' }}>
                <div style={{ fontSize: '18px', fontWeight: 'bold' }}>Pile Cap Layout & Reactions</div>
                {results && (
                    <div style={{ fontSize: '12px', fontWeight: 'normal', marginTop: '4px', color: '#666' }}>
                        Governing: {results.governingCombination}
                    </div>
                )}
            </div>

            {/* Controls */}
            <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 className="diagram-svg-container" style={{ border: '1px solid #eee', borderRadius: '8px', padding: '20px', background: 'white' }}>
                <svg width={svgWidth} height={svgHeight}>
                    {/* Definitions for markers/gradients if needed */}
                    <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>

                    {/* Main Pile Cap Rect */}
                    <rect
                        x={offsetX}
                        y={offsetY}
                        width={geometry.length * scale}
                        height={geometry.width * scale}
                        fill="none"
                        stroke="#333"
                        strokeWidth="2"
                    />

                    {/* Dimensions */}
                    <DraggableLabel
                        id="pilecap-dim-length"
                        text={`${geometry.length}'-0"`}
                        {...getLabelPos("pilecap-dim-length", offsetX + geometry.length * scale / 2, offsetY - 10)}
                        isLocked={isLocked} onPositionChange={updateLabelPosition}
                        anchor="middle" fontWeight="600"
                    />
                    <DraggableLabel
                        id="pilecap-dim-width"
                        text={`${geometry.width}'-0"`}
                        {...getLabelPos("pilecap-dim-width", offsetX - 15, offsetY + geometry.width * scale / 2)}
                        isLocked={isLocked} onPositionChange={updateLabelPosition}
                        anchor="middle" fontWeight="600" rotation={-90}
                    />

                    {/* Column */}
                    <rect
                        x={offsetX + (geometry.length / 2 - geometry.columnWidth / 12 / 2) * scale}
                        y={offsetY + (geometry.width / 2 - geometry.columnLength / 12 / 2) * scale}
                        width={(geometry.columnWidth / 12) * scale}
                        height={(geometry.columnLength / 12) * scale}
                        fill="#e0e0e0"
                        stroke="#333"
                        strokeWidth="1.5"
                        strokeDasharray="4 2"
                    />

                    {/* Piles */}
                    {Array.from({ length: geometry.pileRows }).map((_, row) =>
                        Array.from({ length: geometry.pileColumns }).map((_, col) => {
                            const x = startX + col * geometry.pileSpacingX;
                            const y = startY + row * geometry.pileSpacingY;
                            const pileNumber = row * geometry.pileColumns + col + 1;

                            const pile = results?.pileReactions.find(p => p.pileNumber === pileNumber);
                            const reaction = pile?.reaction || 0;
                            const isUplift = reaction < 0;
                            const isMax = results && Math.abs(reaction - results.maxPileReaction) < 0.01;

                            const pileColor = results
                                ? getPileColor(reaction, results.maxPileReaction)
                                : '#f0f0f0';

                            return (
                                <g key={`pile-${row}-${col}`}>
                                    <circle
                                        cx={offsetX + x * scale}
                                        cy={offsetY + y * scale}
                                        r={(geometry.pileSize / 12 / 2) * scale}
                                        fill={pileColor}
                                        stroke={isMax ? "#d13438" : "#333"}
                                        strokeWidth={isMax ? "2.5" : "1"}
                                    />
                                    <text
                                        x={offsetX + x * scale}
                                        y={offsetY + y * scale + 4}
                                        textAnchor="middle"
                                        fontSize="10"
                                        fill={(results && reaction > results.maxPileReaction * 0.5) ? "white" : "black"}
                                        fontWeight="bold"
                                        pointerEvents="none"
                                    >
                                        {pileNumber}
                                    </text>
                                    {results && (
                                        <DraggableLabel
                                            id={`pilecap-reaction-${pileNumber}`}
                                            text={`${reaction.toFixed(1)}k`}
                                            {...getLabelPos(`pilecap-reaction-${pileNumber}`, offsetX + x * scale, offsetY + y * scale + (geometry.pileSize / 12 / 2) * scale + 14)}
                                            isLocked={isLocked} onPositionChange={updateLabelPosition}
                                            anchor="middle" fontSize={10}
                                            fontWeight={isMax ? "bold" : "normal"}
                                            color={isUplift ? '#d13438' : '#000'}
                                        />
                                    )}
                                </g>
                            );
                        })
                    )}

                    {/* Legend */}
                    {results && (
                        <g transform={`translate(${offsetX + geometry.length * scale + 20}, ${offsetY})`}>
                            <text x="0" y="0" fontSize="11" fontWeight="bold" textDecoration="underline">Legend</text>

                            <rect x="0" y="15" width="12" height="12" fill="rgba(43, 87, 151, 1)" stroke="#333" />
                            <text x="18" y="25" fontSize="10">Max Comp.</text>

                            <rect x="0" y="35" width="12" height="12" fill="rgba(43, 87, 151, 0.1)" stroke="#333" />
                            <text x="18" y="45" fontSize="10">Min Comp.</text>

                            <rect x="0" y="55" width="12" height="12" fill="#ffcccc" stroke="#333" />
                            <text x="18" y="65" fontSize="10">Uplift</text>

                            <circle cx="6" cy="85" r="5" fill="none" stroke="#d13438" strokeWidth="2.5" />
                            <text x="18" y="88" fontSize="10">Critical Pile</text>
                        </g>
                    )}
                </svg>
            </div>
        </div>
    );
};