import { Stage, Layer, Line } from "react-konva";
import useEditorStore from "./useEditorStore";
import TextElement from "./elements/TextElement";
import TableElement from "./elements/TableElement";
import ImageElement from "./elements/ImageElement.jsx";
import QRCodeElement from "./elements/QRCodeElement";
import LineElement from "./elements/LineElement";
import SummaryElement from "./elements/SummaryElement";
import RectangleElement from "./elements/RectangleElement";

export default function CanvasStage() {
    const elements = useEditorStore((state) => state.elements);
    const page = useEditorStore((state) => state.page);
    const setSelectedId = useEditorStore((state) => state.setSelectedId);

    const centerX = page.width / 2;
    const centerY = page.height / 2;

    return (
        <Stage
            width={page.width}
            height={page.height}
            style={{ border: "1px solid #ccc" }}
            onClick={(e) => {
                // Deselect when clicking on empty canvas
                if (e.target === e.target.getStage()) {
                    setSelectedId(null);
                }
            }}
        >
            <Layer>

                {/* GRID */}
                {Array.from({ length: 50 }).map((_, i) => (
                    <Line
                        key={i}
                        points={[i * 20, 0, i * 20, page.height]}
                        stroke="#eee"
                    />
                ))}

                {/* CENTER GUIDES */}
                <Line
                    points={[centerX, 0, centerX, page.height]}
                    stroke="#ff00ff"
                    strokeWidth={1}
                    dash={[5, 5]}
                    opacity={0.3}
                    listening={false}
                />
                <Line
                    points={[0, centerY, page.width, centerY]}
                    stroke="#ff00ff"
                    strokeWidth={1}
                    dash={[5, 5]}
                    opacity={0.3}
                    listening={false}
                />

                {elements.map((el) => {
                    if (el.type === "text") {
                        return <TextElement key={el.id} element={el} />;
                    }
                    if (el.type === "table") {
                        return <TableElement key={el.id} element={el} />;
                    }
                    if (el.type === "image") {
                        return <ImageElement key={el.id} element={el} />;
                    }
                    if (el.type === "qrcode") {
                        return <QRCodeElement key={el.id} element={el} />;
                    }
                    if (el.type === "line") {
                        return <LineElement key={el.id} element={el} />;
                    }
                    if (el.type === "rectangle") {
                        return <RectangleElement key={el.id} element={el} />;
                    }
                    if (el.type === "summary") {
                        return <SummaryElement key={el.id} element={el} />;
                    }
                    return null;
                })}

            </Layer>
        </Stage>
    );
}