import useTemplateStore from "../../../../store/useTemplateStore";
import { useSelectedZoneStore } from "../../../../store/useZoneStore";

const Templates = () => {
  const { templates, removeTemplate } = useTemplateStore();
  const { setSelectedZone } = useSelectedZoneStore();

  const handleDeleteTemplate = (id: string) => {
    removeTemplate(id);
  };

  const handleLoadTemplate = (template: any) => {
    setSelectedZone((prev) => ({
      ...prev,
      panelOrder: template.panelOrder,
      activeSides: Array.from(
        new Set([...prev.activeSides, ...template.panelOrder])
      ),
      widgets: template.widgets,
    }));
  };

  return (
    <div
      className="template-list"
      style={{
        display: "grid",
        gridTemplateColumns: "repeat(auto-fill, minmax(180px, 1fr))",
        gap: "1rem",
        padding: "1rem",
      }}
    >
      {templates.map((template) => (
        <div
          key={template.id}
          className="template-item"
          style={{
            border: "1px solid #e0e0e0",
            borderRadius: "8px",
            padding: "1rem",
            transition: "box-shadow 0.3s ease",
          }}
        >
          {template.snapshot && (
            <div style={{ position: "relative", paddingBottom: "56.25%" }}>
              {" "}
              {/* 16:9 aspect ratio */}
              <img
                src={template.snapshot} // Corrected from template.image to template.snapshot
                alt={`${template.name} preview`}
                style={{
                  position: "absolute",
                  width: "100%",
                  height: "100%",
                  objectFit: "contain",
                  borderRadius: "4px",
                  cursor: "pointer",
                  transition: "transform 0.3s ease",
                  // ':hover': {
                  //   transform: 'scale(1.05)'
                  // }
                }}
                onClick={() => handleLoadTemplate(template)}
              />
            </div>
          )}
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              alignItems: "center",
              marginTop: "0.5rem",
            }}
          >
            <div
              onClick={() => handleLoadTemplate(template)}
              style={{
                cursor: "pointer",
                fontWeight: "500",
                // ':hover': {
                //   textDecoration: 'underline'
                // }
              }}
            >
              {template.name}
            </div>
            <button
              onClick={() => handleDeleteTemplate(template.id)}
              style={{
                padding: "0.25rem 0.5rem",
                background: "#ff4444",
                color: "white",
                border: "none",
                borderRadius: "4px",
                cursor: "pointer",
                transition: "opacity 0.3s ease",
                // ':hover': {
                //   opacity: 0.8
                // }
              }}
              aria-label="Delete template"
            >
              Delete
            </button>
          </div>
        </div>
      ))}
      {templates.length === 0 && (
        <div
          style={{
            textAlign: "center",
            color: "#666",
            padding: "2rem",
            gridColumn: "1 / -1",
          }}
        >
          No saved templates yet. Create one in the visualization view!
        </div>
      )}
    </div>
  );
};

export default Templates;