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

export const ReinforcementDiagram = () => {
    const { geometry, reinforcement } = usePileCapStore();

    // 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 = 25;
    const padding = 40;

    // Dimensions
    const width = geometry.length * scale;
    const height = (geometry.depth / 12) * scale;
    const colW = (geometry.columnWidth / 12) * scale;
    const colH = (geometry.columnLength / 12) * scale; // For plan view

    const svgWidth = width + padding * 2;
    const svgHeight = height + padding * 2 + 150; // Extra space for plan view

    // Bar properties
    const topCover = (reinforcement.topConcreteCover / 12) * scale;
    const bottomCover = (reinforcement.bottomConcreteCover / 12) * scale;

    return (
        <div className="diagram-container" style={{ marginTop: '20px', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
            <div className="diagram-title" style={{ marginBottom: '10px' }}>Reinforcement Schematic</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}>
                    <defs>
                        <pattern id="concrete" patternUnits="userSpaceOnUse" width="10" height="10">
                            <path d="M0,10 L10,0 M-2,2 L2,-2 M8,12 L12,8" stroke="#e0e0e0" strokeWidth="1" />
                        </pattern>
                    </defs>

                    {/* --- SECTION VIEW (Top) --- */}
                    <g transform={`translate(${padding}, ${padding})`}>
                        {/* Concrete Body */}
                        <rect x="0" y="0" width={width} height={height} fill="#f4e1d2" stroke="#333" strokeWidth="2" />

                        {/* Column Stub */}
                        <rect
                            x={(width - colW) / 2}
                            y={-30}
                            width={colW}
                            height={30}
                            fill="#f4e1d2"
                            stroke="#333"
                            strokeWidth="2"
                            strokeDasharray="none"
                            style={{ borderBottom: 'none' }}
                        />
                        <line x1={(width - colW) / 2} y1="0" x2={(width + colW) / 2} y2="0" stroke="#f4e1d2" strokeWidth="3" />

                        {/* Top Reinforcement */}
                        {reinforcement.hasTopMat && (
                            <g>
                                {/* Longitudinal (Dots) */}
                                {Array.from({ length: reinforcement.topXBarCount }).map((_, i) => (
                                    <circle
                                        key={`top-x-${i}`}
                                        cx={10 + i * ((width - 20) / (Math.max(1, reinforcement.topXBarCount - 1)))}
                                        cy={topCover}
                                        r="3"
                                        fill="#333"
                                    />
                                ))}
                                {/* Transverse (Line) */}
                                <line
                                    x1="10" y1={topCover + 4}
                                    x2={width - 10} y2={topCover + 4}
                                    stroke="#333" strokeWidth="2"
                                />
                                <DraggableLabel
                                    id="reinf-top-label"
                                    text="Top Reinf."
                                    {...getLabelPos("reinf-top-label", -10, topCover)}
                                    isLocked={isLocked} onPositionChange={updateLabelPosition}
                                    anchor="end" fontSize={10} color="#666"
                                />
                                <line x1="-5" y1={topCover} x2="5" y2={topCover} stroke="#666" strokeWidth="1" />
                            </g>
                        )}

                        {/* Bottom Reinforcement */}
                        {reinforcement.hasBottomMat && (
                            <g>
                                {/* Longitudinal (Dots) */}
                                {Array.from({ length: reinforcement.bottomXBarCount }).map((_, i) => (
                                    <circle
                                        key={`bot-x-${i}`}
                                        cx={10 + i * ((width - 20) / (Math.max(1, reinforcement.bottomXBarCount - 1)))}
                                        cy={height - bottomCover}
                                        r="3"
                                        fill="#333"
                                    />
                                ))}
                                {/* Transverse (Line) */}
                                <line
                                    x1="10" y1={height - bottomCover - 4}
                                    x2={width - 10} y2={height - bottomCover - 4}
                                    stroke="#333" strokeWidth="2"
                                />
                                <DraggableLabel
                                    id="reinf-bot-label"
                                    text="Bot Reinf."
                                    {...getLabelPos("reinf-bot-label", -10, height - bottomCover)}
                                    isLocked={isLocked} onPositionChange={updateLabelPosition}
                                    anchor="end" fontSize={10} color="#666"
                                />
                                <line x1="-5" y1={height - bottomCover} x2="5" y2={height - bottomCover} stroke="#666" strokeWidth="1" />
                            </g>
                        )}

                        {/* Piles (Schematic) */}
                        {Array.from({ length: geometry.pileColumns }).map((_, i) => {
                            const spacing = (width - 40) / (Math.max(1, geometry.pileColumns - 1));
                            const x = 20 + i * spacing;
                            return (
                                <rect key={`pile-${i}`} x={x - 10} y={height} width="20" height="30" fill="#c08040" stroke="#333" />
                            );
                        })}
                    </g>

                    {/* --- PLAN VIEW (Bottom) --- */}
                    <g transform={`translate(${padding}, ${height + padding + 50})`}>
                        <DraggableLabel
                            id="reinf-plan-title"
                            text="Plan View (Reinforcement)"
                            {...getLabelPos("reinf-plan-title", 0, -10)}
                            isLocked={isLocked} onPositionChange={updateLabelPosition}
                            anchor="start" fontSize={12} fontWeight="bold" color="#333"
                        />

                        {/* Cap Outline */}
                        <rect x="0" y="0" width={width} height={(geometry.width / 12) * scale} fill="#f9f9f9" stroke="#333" strokeWidth="2" />

                        {/* Column */}
                        <rect
                            x={(width - colW) / 2}
                            y={((geometry.width / 12) * scale - colH) / 2}
                            width={colW}
                            height={colH}
                            fill="#e0e0e0"
                            stroke="#333"
                            strokeDasharray="4 2"
                        />

                        {/* Bottom Bars (X-Direction) - Horizontal Lines */}
                        {reinforcement.hasBottomMat && Array.from({ length: reinforcement.bottomZBarCount }).map((_, i) => {
                            const y = 10 + i * (((geometry.width / 12) * scale - 20) / (Math.max(1, reinforcement.bottomZBarCount - 1)));
                            return (
                                <line
                                    key={`plan-bot-z-${i}`}
                                    x1="10" y1={y}
                                    x2={width - 10} y2={y}
                                    stroke="#333" strokeWidth="1"
                                />
                            );
                        })}

                        {/* Bottom Bars (Z-Direction) - Vertical Lines */}
                        {reinforcement.hasBottomMat && Array.from({ length: reinforcement.bottomXBarCount }).map((_, i) => {
                            const x = 10 + i * ((width - 20) / (Math.max(1, reinforcement.bottomXBarCount - 1)));
                            return (
                                <line
                                    key={`plan-bot-x-${i}`}
                                    x1={x} y1="10"
                                    x2={x} y2={(geometry.width / 12) * scale - 10}
                                    stroke="#333" strokeWidth="1"
                                />
                            );
                        })}

                        {/* Labels */}
                        <DraggableLabel
                            id="reinf-x-bars"
                            text="X-Bars"
                            {...getLabelPos("reinf-x-bars", width / 2, (geometry.width / 12) * scale + 15)}
                            isLocked={isLocked} onPositionChange={updateLabelPosition}
                            anchor="middle" fontSize={10} color="#666"
                        />
                        <DraggableLabel
                            id="reinf-z-bars"
                            text="Z-Bars"
                            {...getLabelPos("reinf-z-bars", -10, (geometry.width / 12) * scale / 2)}
                            isLocked={isLocked} onPositionChange={updateLabelPosition}
                            anchor="middle" rotation={-90} fontSize={10} color="#666"
                        />
                    </g>
                </svg>
            </div>
        </div>
    );
};