import { Bed } from './GrowRoomHeatmap';
import BedCell from './BedCell';

/**
 * FloorGrid - SVG-based grid visualization of grow room beds
 * 
 * Renders a grid of beds with color-coded health scores.
 * Uses SVG for crisp rendering at any size.
 * 
 * @param floor - Current floor being displayed
 * @param rows - Number of rows in the grid
 * @param columns - Number of columns in the grid
 * @param beds - Array of bed data for this floor
 */

interface FloorGridProps {
    floor: 'floor_1' | 'floor_2';
    rows: number;
    columns: number;
    beds: Bed[];
}

export default function FloorGrid({ floor, rows, columns, beds }: FloorGridProps) {
    // Cell dimensions
    const cellSize = 80;
    const cellGap = 8;
    const padding = 40;

    // Calculate SVG dimensions
    const width = columns * (cellSize + cellGap) - cellGap + padding * 2;
    const height = rows * (cellSize + cellGap) - cellGap + padding * 2;

    // Create a map for quick bed lookup
    const bedMap = new Map<string, Bed>();
    beds.forEach(bed => {
        const key = `${bed.row}_${bed.column}`;
        bedMap.set(key, bed);
    });

    return (
        <div className="overflow-x-auto">
            <svg
                width={width}
                height={height}
                className="mx-auto"
                style={{ minWidth: width }}
            >
                {/* Grid background */}
                <rect
                    x={0}
                    y={0}
                    width={width}
                    height={height}
                    fill="transparent"
                />

                {/* Row labels */}
                {Array.from({ length: rows }).map((_, row) => (
                    <text
                        key={`row-label-${row}`}
                        x={padding - 20}
                        y={padding + row * (cellSize + cellGap) + cellSize / 2}
                        textAnchor="middle"
                        dominantBaseline="middle"
                        className="text-sm font-medium fill-slate-600 dark:fill-slate-400"
                    >
                        {String.fromCharCode(65 + row)}
                    </text>
                ))}

                {/* Column labels */}
                {Array.from({ length: columns }).map((_, col) => (
                    <text
                        key={`col-label-${col}`}
                        x={padding + col * (cellSize + cellGap) + cellSize / 2}
                        y={padding - 20}
                        textAnchor="middle"
                        dominantBaseline="middle"
                        className="text-sm font-medium fill-slate-600 dark:fill-slate-400"
                    >
                        {col + 1}
                    </text>
                ))}

                {/* Bed cells */}
                {Array.from({ length: rows }).map((_, row) =>
                    Array.from({ length: columns }).map((_, col) => {
                        const key = `${row}_${col}`;
                        const bed = bedMap.get(key);

                        return (
                            <BedCell
                                key={`bed-${row}-${col}`}
                                bed={bed}
                                x={padding + col * (cellSize + cellGap)}
                                y={padding + row * (cellSize + cellGap)}
                                size={cellSize}
                                row={row}
                                column={col}
                            />
                        );
                    })
                )}

                {/* Floor label */}
                <text
                    x={width / 2}
                    y={height - 10}
                    textAnchor="middle"
                    className="text-xs font-medium fill-slate-500 dark:fill-slate-500"
                >
                    {floor === 'floor_1' ? 'Floor 1 (Ground Level)' : 'Floor 2 (Scaffolding)'}
                </text>
            </svg>
        </div>
    );
}
