import React from 'react';
import { useDesignStore } from '../../store/useDesignStore';

export const SectionView: React.FC = () => {
    const { geometry, anchorage } = useDesignStore();
    const { plateShape, widthZ, lengthX, diameter, thickness, support } = geometry;
    const { hef, diameter: rodDiameter } = anchorage;

    // Viewport calculation
    // Width: Support width + margin
    // Height: Support thickness + Plate thickness + margin
    const supportWidth = Math.max(support.widthWp1, support.lengthLp1); // Simplified
    const plateWidth = plateShape === 'rectangular' ? Math.max(widthZ, lengthX) : diameter;

    // Assume support depth is at least 1.5 * hef for visualization if not specified
    // Or just use a fixed visual depth
    const supportDepth = Math.max(support.groutThickness + hef * 1.5, 20);

    const totalHeight = thickness + supportDepth + 10;
    const totalWidth = supportWidth * 1.5;

    const viewBox = `${-totalWidth / 2} ${-10} ${totalWidth} ${totalHeight}`;

    return (
        <div className="flex-col align-center" style={{ width: '100%', height: '100%' }}>
            <svg viewBox={viewBox} style={{ width: '100%', height: '100%', maxHeight: '300px' }}>

                {/* Concrete Support */}
                <path
                    d={`M ${-supportWidth / 2} ${thickness + support.groutThickness} 
                L ${supportWidth / 2} ${thickness + support.groutThickness} 
                L ${supportWidth / 2} ${thickness + supportDepth} 
                L ${-supportWidth / 2} ${thickness + supportDepth} Z`}
                    fill="#e0e0e0" stroke="#999" strokeWidth="0.5"
                />

                {/* Grout */}
                <rect
                    x={-plateWidth / 2} y={thickness}
                    width={plateWidth} height={support.groutThickness}
                    fill="#d3d3d3" stroke="#999" strokeWidth="0.2"
                />

                {/* Base Plate */}
                <rect
                    x={-plateWidth / 2} y={0}
                    width={plateWidth} height={thickness}
                    fill="var(--plate-color)" stroke="#005a9e" strokeWidth="0.5"
                />

                {/* Anchor Rods (Side View) */}
                {/* Draw two rods representing the outer bounds */}
                <rect
                    x={-plateWidth / 2 + 2} y={thickness}
                    width={rodDiameter} height={hef + support.groutThickness}
                    fill="white" stroke="#333" strokeWidth="0.2"
                />
                <rect
                    x={plateWidth / 2 - 2 - rodDiameter} y={thickness}
                    width={rodDiameter} height={hef + support.groutThickness}
                    fill="white" stroke="#333" strokeWidth="0.2"
                />

                {/* Heads/Nuts */}
                <rect
                    x={-plateWidth / 2 + 2 - 0.2} y={thickness + support.groutThickness + hef - 0.5}
                    width={rodDiameter + 0.4} height={0.5}
                    fill="#333"
                />
                <rect
                    x={plateWidth / 2 - 2 - rodDiameter - 0.2} y={thickness + support.groutThickness + hef - 0.5}
                    width={rodDiameter + 0.4} height={0.5}
                    fill="#333"
                />

                {/* Breakout Cone (Schematic) */}
                <path
                    d={`M ${-plateWidth / 2 + 2 + rodDiameter / 2} ${thickness + support.groutThickness + hef} 
                L ${-plateWidth / 2 + 2 + rodDiameter / 2 - hef * 1.5} ${thickness + support.groutThickness}
                `}
                    stroke="red" strokeDasharray="2 2" strokeWidth="0.2" fill="none"
                />
                <path
                    d={`M ${plateWidth / 2 - 2 - rodDiameter / 2} ${thickness + support.groutThickness + hef} 
                L ${plateWidth / 2 - 2 - rodDiameter / 2 + hef * 1.5} ${thickness + support.groutThickness}
                `}
                    stroke="red" strokeDasharray="2 2" strokeWidth="0.2" fill="none"
                />

                {/* Dimensions */}
                <line x1={-totalWidth / 2} y1={thickness} x2={-plateWidth / 2} y2={thickness} stroke="#666" strokeWidth="0.1" />
                <line x1={-totalWidth / 2} y1={thickness + support.groutThickness + hef} x2={-plateWidth / 2} y2={thickness + support.groutThickness + hef} stroke="#666" strokeWidth="0.1" />

                <text x={-plateWidth / 2 - 5} y={thickness + support.groutThickness + hef / 2} fontSize="1.5" fill="#666">hef = {hef}"</text>

            </svg>
            <h4 style={{ marginTop: '-10px' }}>SECTION</h4>
        </div>
    );
};