import { createSignal, For, Show } from "solid-js";
import { getAllGrids } from "../grids/registry";
import type { GridTemplate } from "../types/grid";

interface GridConfiguratorProps {
  onSelectGrid: (templateId: string | null) => void;
  currentGridId: string | null;
}

export function GridConfigurator(props: GridConfiguratorProps) {
  const grids = getAllGrids();
  const [showPreview, setShowPreview] = createSignal<string | null>(null);

  const handleSelectGrid = (templateId: string) => {
    if (props.currentGridId === templateId) {
      props.onSelectGrid(null);
    } else {
      props.onSelectGrid(templateId);
    }
  };

  return (
    <div style={{ "margin-bottom": "2rem" }}>
      <h2 style={{ "margin-bottom": "1rem" }}>Grid Templates</h2>
      <div
        style={{
          display: "grid",
          "grid-template-columns": "repeat(auto-fill, minmax(250px, 1fr))",
          gap: "1rem",
          "margin-bottom": "1rem",
        }}
      >
        {/* No Grid Option */}
        <div
          onClick={() => props.onSelectGrid(null)}
          style={{
            border: `3px solid ${props.currentGridId === null ? "#ffffff" : "var(--border)"}`,
            padding: "1rem",
            cursor: "pointer",
            "border-radius": "0",
            background:
              props.currentGridId === null ? "#ffffff" : "transparent",
            transition: "none",
            color: props.currentGridId === null ? "#000000" : "#ffffff",
          }}
        >
          <h3 style={{ "margin-bottom": "0.5rem" }}>No Grid</h3>
          <p style={{ "font-size": "0.9rem", color: "var(--gray)" }}>
            Free-form positioning
          </p>
        </div>

        {/* Grid Templates */}
        <For each={grids}>
          {(grid) => (
            <div
              onClick={() => handleSelectGrid(grid.template.id)}
              onMouseEnter={() => setShowPreview(grid.template.id)}
              onMouseLeave={() => setShowPreview(null)}
              style={{
                border: `3px solid ${
                  props.currentGridId === grid.template.id
                    ? "#ffffff"
                    : "var(--border)"
                }`,
                padding: "1rem",
                cursor: "pointer",
                "border-radius": "0",
                background:
                  props.currentGridId === grid.template.id
                    ? "#ffffff"
                    : "transparent",
                transition: "none",
                position: "relative",
                color:
                  props.currentGridId === grid.template.id
                    ? "#000000"
                    : "#ffffff",
              }}
            >
              <h3 style={{ "margin-bottom": "0.5rem" }}>
                {grid.template.name}
              </h3>
              <p style={{ "font-size": "0.9rem", color: "var(--gray)" }}>
                {grid.template.description}
              </p>
              <div
                style={{
                  "margin-top": "0.5rem",
                  "font-size": "0.8rem",
                  color: "var(--gray)",
                }}
              >
                {grid.template.cells.length} cells
              </div>
              {props.currentGridId === grid.template.id && (
                <div
                  style={{
                    "margin-top": "0.5rem",
                    color: "var(--primary, #0066cc)",
                    "font-weight": "bold",
                    "font-size": "0.9rem",
                  }}
                >
                  ✓ Active
                </div>
              )}
            </div>
          )}
        </For>
      </div>
    </div>
  );
}
