"use client";

import { useEffect, useState, useCallback } from "react";
import { getTemplates, deleteTemplate, Template } from "@/lib/api";
import { TemplateCard } from "./TemplateCard";
import { RefreshCw, LayoutTemplate, Filter } from "lucide-react";

interface TemplateGalleryProps {
  onApply?: (template: Template) => void;
}

const CATEGORIES = ["all", "onboarding", "project", "standup", "brainstorm"];

export function TemplateGallery({ onApply }: TemplateGalleryProps) {
  const [templates, setTemplates] = useState<Template[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [category, setCategory] = useState("all");

  const loadTemplates = useCallback((cat: string) => {
    setLoading(true);
    setError("");
    const filterParam = cat === "all" ? undefined : cat;
    getTemplates(filterParam)
      .then((data) => setTemplates(Array.isArray(data) ? data : []))
      .catch((err) => {
        console.error("Failed to load templates:", err);
        setError("Failed to load templates");
      })
      .finally(() => setLoading(false));
  }, []);

  useEffect(() => {
    loadTemplates(category);
  }, [category, loadTemplates]);

  const handleDelete = (template: Template) => {
    if (!confirm(`Delete template "${template.name}"?`)) return;
    deleteTemplate(template.id)
      .then(() => {
        setTemplates((prev) => prev.filter((t) => t.id !== template.id));
      })
      .catch((err) => console.error("Failed to delete template:", err));
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center text-gray-400 py-12">
        <RefreshCw size={20} className="animate-pulse" />
      </div>
    );
  }

  if (error) {
    return (
      <div className="flex items-center justify-center text-slack-red py-12 text-sm">
        {error}
        <button
          onClick={() => loadTemplates(category)}
          className="ml-2 text-slack-purple hover:underline"
        >
          Retry
        </button>
      </div>
    );
  }

  return (
    <div className="space-y-4">
      {/* Category filter */}
      <div className="flex items-center gap-2 flex-wrap">
        <Filter size={14} className="text-gray-400" />
        {CATEGORIES.map((cat) => (
          <button
            key={cat}
            onClick={() => setCategory(cat)}
            className={`px-3 py-1 rounded-full text-xs font-medium capitalize transition-colors ${
              category === cat
                ? "bg-slack-purple text-white"
                : "bg-gray-100 text-gray-500 hover:bg-gray-200"
            }`}
          >
            {cat}
          </button>
        ))}
      </div>

      {/* Templates grid */}
      {templates.length === 0 ? (
        <div className="flex flex-col items-center justify-center py-16 text-gray-400">
          <LayoutTemplate size={48} className="mb-3 opacity-50" />
          <p className="text-sm">No templates found.</p>
          <p className="text-xs mt-1">Try a different category or create a new template.</p>
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
          {templates.map((template) => (
            <TemplateCard
              key={template.id}
              template={template}
              onDelete={handleDelete}
              onApply={onApply}
            />
          ))}
        </div>
      )}
    </div>
  );
}

export default TemplateGallery;