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

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

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

    // Generate pile positions
    const piles = [];
    const startX = (geometry.length - (geometry.pileColumns - 1) * geometry.pileSpacingX) / 2;
    const startZ = (geometry.width - (geometry.pileRows - 1) * geometry.pileSpacingY) / 2;

    for (let i = 0; i < geometry.pileColumns; i++) {
        for (let j = 0; j < geometry.pileRows; j++) {
            piles.push({
                x: startX + i * geometry.pileSpacingX,
                z: startZ + j * geometry.pileSpacingY
            });
        }
    }

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

    return (
        <div style={{ marginTop: '20px', border: '1px solid #ccc', borderRadius: '4px', padding: '10px', background: 'white' }}>
            <h4 style={{ margin: '0 0 10px 0', textAlign: 'center' }}>Geometry Schematic (Plan View)</h4>
            <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="#f0f0f0"
                    stroke="black"
                    strokeWidth="2"
                />

                {/* Piles */}
                {piles.map((p, i) => {
                    const pos = toPx(p.x, p.z);
                    const pileSizePx = (geometry.pileSize / 12) * scale;

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

                {/* Column */}
                <rect
                    x={offsetX + colX * scale}
                    y={offsetZ + colZ * scale}
                    width={colLenFt * scale}
                    height={colWidthFt * scale}
                    fill="#bbb"
                    stroke="black"
                    strokeWidth="2"
                    strokeDasharray="4 2"
                />

                {/* Dimensions */}
                {/* Length */}
                <line
                    x1={offsetX}
                    y1={height - 10}
                    x2={offsetX + geometry.length * scale}
                    y2={height - 10}
                    stroke="black"
                    markerEnd="url(#arrow)"
                    markerStart="url(#arrow)"
                />
                <text x={width / 2} y={height - 15} textAnchor="middle" fontSize="12">
                    L = {geometry.length}'
                </text>

                {/* Width */}
                <line
                    x1={10}
                    y1={offsetZ}
                    x2={10}
                    y2={offsetZ + geometry.width * scale}
                    stroke="black"
                    markerEnd="url(#arrow)"
                    markerStart="url(#arrow)"
                />
                <text x={25} y={height / 2} transform={`rotate(-90, 25, ${height / 2})`} textAnchor="middle" fontSize="12">
                    W = {geometry.width}'
                </text>

                {/* Definitions */}
                <defs>
                    <marker id="arrow" markerWidth="10" markerHeight="10" refX="5" refY="5" orient="auto">
                        <path d="M0,0 L10,5 L0,10" fill="none" stroke="black" />
                    </marker>
                </defs>
            </svg>
            <div style={{ textAlign: 'center', fontSize: '12px', color: '#666', marginTop: '5px' }}>
                * Not to scale. Shows relative positions.
            </div>
        </div>
    );
};