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

export const ElevationDiagram = () => {
    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 };
    };

    const scale = 30; // pixels per foot
    const svgWidth = geometry.length * scale + 100;
    const svgHeight = (geometry.soilCover + geometry.depth / 12 + 3) * scale + 100; // Add space for piles below
    const offsetX = 50;
    const offsetY = 50;

    // Calculate heights
    const soilHeight = geometry.soilCover * scale;
    const pileCapHeight = (geometry.depth / 12) * scale;
    const pileExtension = 2 * scale; // Show 2 feet of pile below cap

    // Pile positions
    const startX = (geometry.length - (geometry.pileColumns - 1) * geometry.pileSpacingX) / 2;

    return (
        <div className="diagram-container" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
            <div className="diagram-title" style={{ marginBottom: '10px' }}>Pile Cap - Elevation View</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}>
                    {/* Ground level line */}
                    <line
                        x1={offsetX - 20}
                        y1={offsetY + soilHeight}
                        x2={offsetX + geometry.length * scale + 20}
                        y2={offsetY + soilHeight}
                        stroke="#8B4513"
                        strokeWidth="3"
                    />
                    <DraggableLabel
                        id="elev-gl"
                        text="GL"
                        {...getLabelPos("elev-gl", offsetX - 35, offsetY + soilHeight + 5)}
                        isLocked={isLocked} onPositionChange={updateLabelPosition}
                        anchor="end" fontSize={11} fontWeight="600" color="#666"
                    />

                    {/* Soil cover */}
                    {geometry.soilCover > 0 && (
                        <>
                            <rect
                                x={offsetX}
                                y={offsetY + soilHeight}
                                width={geometry.length * scale}
                                height={pileCapHeight}
                                fill="#f0e6d2"
                                fillOpacity="0.3"
                                stroke="none"
                            />
                            <DraggableLabel
                                id="elev-soil"
                                text={`Soil: ${geometry.soilCover}'-0"`}
                                {...getLabelPos("elev-soil", offsetX + geometry.length * scale + 10, offsetY + soilHeight / 2)}
                                isLocked={isLocked} onPositionChange={updateLabelPosition}
                                anchor="start" fontSize={10} color="#666"
                            />
                        </>
                    )}

                    {/* Pile Cap */}
                    <rect
                        x={offsetX}
                        y={offsetY + soilHeight}
                        width={geometry.length * scale}
                        height={pileCapHeight}
                        fill="#b0b0b0"
                        stroke="#333"
                        strokeWidth="2"
                    />

                    {/* Pile cap thickness label */}
                    <line
                        x1={offsetX + geometry.length * scale + 5}
                        y1={offsetY + soilHeight}
                        x2={offsetX + geometry.length * scale + 5}
                        y2={offsetY + soilHeight + pileCapHeight}
                        stroke="#333"
                        strokeWidth="1"
                        markerStart="url(#arrowStart)"
                        markerEnd="url(#arrowEnd)"
                    />
                    <DraggableLabel
                        id="elev-thickness"
                        text={`t = ${geometry.depth}"`}
                        {...getLabelPos("elev-thickness", offsetX + geometry.length * scale + 15, offsetY + soilHeight + pileCapHeight / 2)}
                        isLocked={isLocked} onPositionChange={updateLabelPosition}
                        anchor="start" fontSize={11} fontWeight="600" color="#333"
                    />

                    {/* Column/Pedestal */}
                    <rect
                        x={offsetX + (geometry.length / 2 - geometry.columnLength / 12 / 2) * scale}
                        y={offsetY + soilHeight - 20}
                        width={(geometry.columnLength / 12) * scale}
                        height={20 + pileCapHeight}
                        fill="#808080"
                        stroke="#333"
                        strokeWidth="2"
                    />
                    <DraggableLabel
                        id="elev-column"
                        text="Column"
                        {...getLabelPos("elev-column", offsetX + geometry.length * scale / 2, offsetY + soilHeight - 25)}
                        isLocked={isLocked} onPositionChange={updateLabelPosition}
                        anchor="middle" fontSize={11} fontWeight="600" color="#333"
                    />

                    {/* Piles - show centerline piles */}
                    {Array.from({ length: geometry.pileColumns }).map((_, col) => {
                        const x = startX + col * geometry.pileSpacingX;
                        const pileWidth = (geometry.pileSize / 12) * scale;

                        return (
                            <g key={`pile-${col}`}>
                                {/* Pile body */}
                                <rect
                                    x={offsetX + x * scale - pileWidth / 2}
                                    y={offsetY + soilHeight + pileCapHeight - (geometry.pileTopEmbed / 12) * scale}
                                    width={pileWidth}
                                    height={pileExtension + (geometry.pileTopEmbed / 12) * scale}
                                    fill="#606060"
                                    stroke="#333"
                                    strokeWidth="1.5"
                                />
                                {/* Pile embed indication */}
                                {geometry.pileTopEmbed > 0 && (
                                    <line
                                        x1={offsetX + x * scale - pileWidth / 2 - 3}
                                        y1={offsetY + soilHeight + pileCapHeight - (geometry.pileTopEmbed / 12) * scale}
                                        x2={offsetX + x * scale + pileWidth / 2 + 3}
                                        y2={offsetY + soilHeight + pileCapHeight - (geometry.pileTopEmbed / 12) * scale}
                                        stroke="#d13438"
                                        strokeWidth="1.5"
                                        strokeDasharray="3,3"
                                    />
                                )}
                            </g>
                        );
                    })}

                    {/* Pile cap length dimension */}
                    <line
                        x1={offsetX}
                        y1={offsetY + soilHeight + pileCapHeight + pileExtension + 15}
                        x2={offsetX + geometry.length * scale}
                        y2={offsetY + soilHeight + pileCapHeight + pileExtension + 15}
                        stroke="#333"
                        strokeWidth="1"
                    />
                    <line
                        x1={offsetX}
                        y1={offsetY + soilHeight + pileCapHeight + pileExtension + 10}
                        x2={offsetX}
                        y2={offsetY + soilHeight + pileCapHeight + pileExtension + 20}
                        stroke="#333"
                        strokeWidth="1"
                    />
                    <line
                        x1={offsetX + geometry.length * scale}
                        y1={offsetY + soilHeight + pileCapHeight + pileExtension + 10}
                        x2={offsetX + geometry.length * scale}
                        y2={offsetY + soilHeight + pileCapHeight + pileExtension + 20}
                        stroke="#333"
                        strokeWidth="1"
                    />
                    <DraggableLabel
                        id="elev-length"
                        text={`${geometry.length}'-0"`}
                        {...getLabelPos("elev-length", offsetX + geometry.length * scale / 2, offsetY + soilHeight + pileCapHeight + pileExtension + 35)}
                        isLocked={isLocked} onPositionChange={updateLabelPosition}
                        anchor="middle" fontSize={12} fontWeight="600"
                    />

                    {/* Arrow markers */}
                    <defs>
                        <marker
                            id="arrowStart"
                            markerWidth="10"
                            markerHeight="10"
                            refX="5"
                            refY="5"
                            orient="auto"
                        >
                            <polygon points="5,5 10,2 10,8" fill="#333" />
                        </marker>
                        <marker
                            id="arrowEnd"
                            markerWidth="10"
                            markerHeight="10"
                            refX="5"
                            refY="5"
                            orient="auto"
                        >
                            <polygon points="5,5 0,2 0,8" fill="#333" />
                        </marker>
                    </defs>
                </svg>
            </div>
        </div>
    );
};