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

import { DraggableLabel } from './DraggableLabel';

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

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

    // --- Drawing Logic ---
    const scale = 25;
    const padding = 80; // Increased padding

    // Dimensions
    const capWidthPx = geometry.length * scale;
    const capHeightPx = geometry.width * scale; // Plan view height
    const capDepthPx = (geometry.depth / 12) * scale; // Corrected: geometry.depth
    const colWidthPx = (geometry.columnLength / 12) * scale;
    const colDepthPx = (geometry.columnWidth / 12) * scale; // Plan view column depth

    // Layout
    const elevationY = padding + 60; // More space at top
    const planY = elevationY + capDepthPx + padding + 40;

    const centerX = padding + capWidthPx / 2;

    const svgWidth = capWidthPx + 2 * padding + 100; // Extra space for side labels
    const svgHeight = planY + capHeightPx + padding + 40; // Extra space at bottom

    // --- Elevation View ---
    // Cap
    const capRect = { x: padding, y: elevationY, w: capWidthPx, h: capDepthPx };
    // Column Stub
    const colStubH = 40;
    const colStubRect = {
        x: centerX - colWidthPx / 2,
        y: elevationY - colStubH,
        w: colWidthPx,
        h: colStubH
    };

    const pileDepth = 60;
    const pileWidth = (geometry.pileSize / 12) * scale;

    // --- Plan View ---
    const planRect = { x: padding, y: planY, w: capWidthPx, h: capHeightPx };
    const colPlanRect = {
        x: centerX - colWidthPx / 2,
        y: planY + capHeightPx / 2 - colDepthPx / 2,
        w: colWidthPx,
        h: colDepthPx
    };

    return (
        <div className="diagram-container" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: '100%' }}>

            {/* Controls */}
            <div style={{ marginBottom: '10px', display: 'flex', gap: '10px' }}>
                <button
                    onClick={() => setDiagramLocked(!isLocked)}
                    style={{
                        padding: '8px 16px',
                        background: isLocked ? '#e0e0e0' : '#4caf50',
                        color: isLocked ? '#333' : 'white',
                        border: 'none',
                        borderRadius: '4px',
                        cursor: 'pointer',
                        fontWeight: 'bold'
                    }}
                >
                    {isLocked ? '🔒 Locked' : '🔓 Unlocked (Drag Labels)'}
                </button>
            </div>

            <div className="diagram-svg-container" style={{ border: '1px solid #eee', borderRadius: '8px', padding: '20px', background: 'white', width: '100%', overflow: 'auto' }}>
                <svg viewBox={`0 0 ${svgWidth} ${svgHeight}`} style={{ width: '100%', height: 'auto', maxHeight: '800px' }}>
                    <defs>
                        <marker id="arrow-con" 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>

                    {/* --- Elevation View --- */}

                    {/* Piles */}
                    {/* Just drawing 4 schematic piles for now to match the "look" */}
                    {[0.2, 0.4, 0.6, 0.8].map((f, i) => (
                        <rect
                            key={`pile-el-${i}`}
                            x={padding + capWidthPx * f - pileWidth / 2}
                            y={elevationY + capDepthPx}
                            width={pileWidth}
                            height={pileDepth}
                            fill="#cd853f"
                            stroke="black"
                        />
                    ))}

                    {/* Cap */}
                    <rect x={capRect.x} y={capRect.y} width={capRect.w} height={capRect.h} fill="#f4a460" stroke="black" />

                    {/* Column Stub */}
                    <rect x={colStubRect.x} y={colStubRect.y} width={colStubRect.w} height={colStubRect.h} fill="#f4a460" stroke="black" />
                    {/* Column Reinf Schematic */}
                    <line x1={colStubRect.x + 5} y1={colStubRect.y} x2={colStubRect.x + 5} y2={elevationY + capDepthPx - 10} stroke="black" strokeWidth="2" />
                    <line x1={colStubRect.x + colStubRect.w - 5} y1={colStubRect.y} x2={colStubRect.x + colStubRect.w - 5} y2={elevationY + capDepthPx - 10} stroke="black" strokeWidth="2" />
                    <line x1={colStubRect.x + 5} y1={elevationY + capDepthPx - 10} x2={colStubRect.x + 20} y2={elevationY + capDepthPx - 10} stroke="black" strokeWidth="2" />
                    <line x1={colStubRect.x + colStubRect.w - 5} y1={elevationY + capDepthPx - 10} x2={colStubRect.x + colStubRect.w - 20} y2={elevationY + capDepthPx - 10} stroke="black" strokeWidth="2" />
                    {/* Ties */}
                    <line x1={colStubRect.x} y1={colStubRect.y + 10} x2={colStubRect.x + colStubRect.w} y2={colStubRect.y + 10} stroke="black" strokeWidth="1" />
                    <line x1={colStubRect.x} y1={colStubRect.y + 25} x2={colStubRect.x + colStubRect.w} y2={colStubRect.y + 25} stroke="black" strokeWidth="1" />

                    {/* Bottom Reinf Schematic */}
                    <line x1={capRect.x + 10} y1={capRect.y + capRect.h - 10} x2={capRect.x + capRect.w - 10} y2={capRect.y + capRect.h - 10} stroke="black" strokeWidth="2" />
                    {[0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9].map((f, i) => (
                        <circle key={`bar-${i}`} cx={capRect.x + capRect.w * f} cy={capRect.y + capRect.h - 10} r={2} fill="black" />
                    ))}
                    {/* Hooks */}
                    <line x1={capRect.x + 10} y1={capRect.y + capRect.h - 10} x2={capRect.x + 10} y2={capRect.y + capRect.h - 30} stroke="black" strokeWidth="2" />
                    <line x1={capRect.x + capRect.w - 10} y1={capRect.y + capRect.h - 10} x2={capRect.x + capRect.w - 10} y2={capRect.y + capRect.h - 30} stroke="black" strokeWidth="2" />

                    {/* Dimensions Elevation */}
                    {/* Depth */}
                    <line x1={padding - 15} y1={elevationY} x2={padding - 15} y2={elevationY + capDepthPx} stroke="black" markerStart="url(#arrow-con)" markerEnd="url(#arrow-con)" />
                    <DraggableLabel
                        id="depth-label"
                        text={`${geometry.depth} in`}
                        {...getLabelPos("depth-label", padding - 20, elevationY + capDepthPx / 2)}
                        isLocked={isLocked} onPositionChange={updateLabelPosition}
                        anchor="end" rotation={-90}
                    />

                    {/* --- Plan View --- */}
                    <rect x={planRect.x} y={planRect.y} width={planRect.w} height={planRect.h} fill="#eee8aa" stroke="black" />

                    {/* Piles Plan */}
                    {/* Schematic grid of piles */}
                    {[0.2, 0.5, 0.8].map(fx => (
                        [0.2, 0.5, 0.8].map(fy => (
                            <circle
                                key={`pile-plan-${fx}-${fy}`}
                                cx={planRect.x + planRect.w * fx}
                                cy={planRect.y + planRect.h * fy}
                                r={pileWidth / 2}
                                fill="#d2b48c"
                                stroke="black"
                            />
                        ))
                    ))}

                    {/* Column Plan */}
                    <rect x={colPlanRect.x} y={colPlanRect.y} width={colPlanRect.w} height={colPlanRect.h} fill="#f4a460" stroke="black" />
                    {/* Column Reinf Plan */}
                    <rect x={colPlanRect.x + 4} y={colPlanRect.y + 4} width={colPlanRect.w - 8} height={colPlanRect.h - 8} fill="none" stroke="black" />
                    <circle cx={colPlanRect.x + 4} cy={colPlanRect.y + 4} r={2} fill="black" />
                    <circle cx={colPlanRect.x + colPlanRect.w - 4} cy={colPlanRect.y + 4} r={2} fill="black" />
                    <circle cx={colPlanRect.x + 4} cy={colPlanRect.y + colPlanRect.h - 4} r={2} fill="black" />
                    <circle cx={colPlanRect.x + colPlanRect.w - 4} cy={colPlanRect.y + colPlanRect.h - 4} r={2} fill="black" />

                    {/* Centerlines */}
                    <line x1={centerX} y1={planY - 10} x2={centerX} y2={planY + capHeightPx + 10} stroke="black" strokeDasharray="4 4" />
                    <line x1={padding - 10} y1={planY + capHeightPx / 2} x2={padding + capWidthPx + 10} y2={planY + capHeightPx / 2} stroke="black" strokeDasharray="4 4" />

                    <text x={centerX} y={planY - 15} textAnchor="middle" fontSize="12">Z</text>
                    <text x={padding + capWidthPx + 15} y={planY + capHeightPx / 2} alignmentBaseline="middle" fontSize="12">X</text>

                    {/* Dimensions Plan */}
                    {/* Length */}
                    <line x1={padding} y1={planY + capHeightPx + 20} x2={padding + capWidthPx} y2={planY + capHeightPx + 20} stroke="black" markerStart="url(#arrow-con)" markerEnd="url(#arrow-con)" />
                    <DraggableLabel
                        id="length-label"
                        text={`${geometry.length} ft`}
                        {...getLabelPos("length-label", centerX, planY + capHeightPx + 35)}
                        isLocked={isLocked} onPositionChange={updateLabelPosition}
                        anchor="middle"
                    />

                    {/* Width */}
                    <line x1={padding - 20} y1={planY} x2={padding - 20} y2={planY + capHeightPx} stroke="black" markerStart="url(#arrow-con)" markerEnd="url(#arrow-con)" />
                    <DraggableLabel
                        id="width-label"
                        text={`${geometry.width} ft`}
                        {...getLabelPos("width-label", padding - 25, planY + capHeightPx / 2)}
                        isLocked={isLocked} onPositionChange={updateLabelPosition}
                        anchor="end" rotation={-90}
                    />

                    {/* Reinf Callouts */}
                    {/* Bottom Bars X */}
                    <line x1={padding + 20} y1={planY + capHeightPx - 30} x2={padding + capWidthPx - 20} y2={planY + capHeightPx - 30} stroke="black" strokeDasharray="5 5" />
                    <DraggableLabel
                        id="reinf-x-label"
                        text={`${reinforcement.bottomXBarCount} ${reinforcement.bottomXBarSize} (B)`}
                        {...getLabelPos("reinf-x-label", centerX + 40, planY + capHeightPx - 35)}
                        isLocked={isLocked} onPositionChange={updateLabelPosition}
                        anchor="start"
                    />

                    {/* Bottom Bars Z */}
                    <line x1={padding + 30} y1={planY + 20} x2={padding + 30} y2={planY + capHeightPx - 20} stroke="black" strokeDasharray="5 5" />
                    <DraggableLabel
                        id="reinf-z-label"
                        text={`${reinforcement.bottomZBarCount} ${reinforcement.bottomZBarSize} (B)`}
                        {...getLabelPos("reinf-z-label", padding + 35, planY + capHeightPx / 2 - 40)}
                        isLocked={isLocked} onPositionChange={updateLabelPosition}
                        anchor="start" rotation={-90}
                    />

                    {/* Column Reinf Label */}
                    <DraggableLabel
                        id="col-reinf-label"
                        text="Column Reinf."
                        {...getLabelPos("col-reinf-label", centerX - 40, elevationY - 45)}
                        isLocked={isLocked} onPositionChange={updateLabelPosition}
                        anchor="end"
                    />

                </svg>
            </div>
        </div>
    );
};