import { useState, useEffect } from "react";
import { useTranslation } from "react-i18next";
import { Loader, Settings } from "lucide-react"; // Changed icon to Settings
import { TemplateService } from "@/user-management/services/api/templateService";
import { TemplateResource } from "@/user-management/services/TemplateConfiguration/types/templateTypes";

interface TemplateSampleListProps {
  onSelectTemplate: (templateId: string) => void;
}

export const TemplateSampleList = ({ onSelectTemplate }: TemplateSampleListProps) => {
  const { t } = useTranslation();
  const [templates, setTemplates] = useState<TemplateResource[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

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

  const loadTemplates = async () => {
    try {
      setLoading(true);
      setError(null);
      const response = await TemplateService.getAllTemplates();
      setTemplates(response.items || []);
    } catch (err) {
      setError(t("error.loadingTemplates", "Error loading templates"));
      console.error(err);
    } finally {
      setLoading(false);
    }
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center h-96">
        <Loader className="h-8 w-8 animate-spin text-purple-600" />
      </div>
    );
  }

  return (
    <div className="space-y-6">
      {error && (
        <div className="p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg text-red-700 dark:text-red-400">
          {error}
        </div>
      )}

      {templates.length === 0 ? (
        <div className="text-center py-12">
          <p className="text-gray-500 dark:text-gray-400">
            {t("template.noTemplates", "No templates available")}
          </p>
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {templates.map((template) => (
            <div
              key={template.id}
              className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6 hover:shadow-lg transition-shadow"
            >
              <div className="space-y-3">
                <h3 className="font-semibold text-gray-900 dark:text-white">
                  {template.name?.en || template.name?.am}
                </h3>
                <p className="text-sm text-gray-600 dark:text-gray-300">
                  {template.description?.en || template.description?.am}
                </p>
                {template.fileInfo && (
                  <p className="text-xs text-gray-500 dark:text-gray-400">
                    {template.fileInfo.fileName}
                  </p>
                )}
              </div>
                <button
                  onClick={() => onSelectTemplate(template.id)}
                  className="mt-4 w-full px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 dark:hover:bg-purple-500 transition-colors font-medium flex items-center justify-center gap-2"
                >
                <Settings className="h-4 w-4" />
                {t("template.configureStyles", "Configure Styles")}
              </button>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};