import React from 'react';
import { useDesignStore } from '../../store/useDesignStore';
import { getBoltCoordinates, getIShapePath } from '../../utils/geometry';

export const PlanView: React.FC = () => {
    const { geometry, anchorage } = useDesignStore();
    const { plateShape, widthZ, lengthX, diameter, columnDetails, support } = geometry;

    // Viewport calculation
    const maxDim = Math.max(
        plateShape === 'rectangular' ? Math.max(widthZ, lengthX) : diameter,
        Math.max(support.widthWp1, support.lengthLp1)
    ) * 1.5; // 1.5x zoom out

    const viewBox = `${-maxDim / 2} ${-maxDim / 2} ${maxDim} ${maxDim}`;

    const bolts = getBoltCoordinates(geometry, anchorage);

    return (
        <div className="flex-col align-center" style={{ width: '100%', height: '100%' }}>
            <svg viewBox={viewBox} style={{ width: '100%', height: '100%', maxHeight: '500px' }}>
                {/* Definitions for markers/patterns 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>

                {/* Concrete Support */}
                {plateShape === 'rectangular' ? (
                    <rect
                        x={-support.lengthLp1 / 2} y={-support.widthWp1 / 2}
                        width={support.lengthLp1} height={support.widthWp1}
                        fill="#e0e0e0" stroke="#999" strokeWidth="0.5"
                    />
                ) : (
                    <circle r={support.widthWp1 / 2} fill="#e0e0e0" stroke="#999" strokeWidth="0.5" />
                )}

                {/* Base Plate */}
                {plateShape === 'rectangular' ? (
                    <rect
                        x={-lengthX / 2} y={-widthZ / 2}
                        width={lengthX} height={widthZ}
                        fill="var(--plate-color)" stroke="#005a9e" strokeWidth="0.5"
                    />
                ) : (
                    <circle r={diameter / 2} fill="var(--plate-color)" stroke="#005a9e" strokeWidth="0.5" />
                )}

                {/* Column */}
                <path
                    d={getIShapePath(columnDetails.d, columnDetails.bf, columnDetails.tf, columnDetails.tw)}
                    fill="var(--column-color)" stroke="#107c10" strokeWidth="0.5"
                    transform="rotate(90)" /* Rotate to match standard structural plan orientation if needed */
                />

                {/* Anchor Rods */}
                {bolts.map((bolt, i) => (
                    <circle
                        key={i}
                        cx={bolt.x} cy={bolt.y}
                        r={anchorage.diameter / 2}
                        fill="var(--bolt-color)" stroke="#b8860b" strokeWidth="0.2"
                    />
                ))}

                {/* Axes */}
                <line x1={-maxDim / 2} y1="0" x2={maxDim / 2} y2="0" stroke="#999" strokeDasharray="4 4" strokeWidth="0.2" />
                <line x1="0" y1={-maxDim / 2} x2="0" y2={maxDim / 2} stroke="#999" strokeDasharray="4 4" strokeWidth="0.2" />

                <text x={maxDim / 2 - 2} y="-1" fontSize="1" fill="#666">X</text>
                <text x="1" y={-maxDim / 2 + 2} fontSize="1" fill="#666">Z</text>

            </svg>
            <h4 style={{ marginTop: '-20px', zIndex: 10 }}>PLAN</h4>
        </div>
    );
};