panel/src/components/TemplateList.js

"use client";

import { useState } from "react";
import Button from "@/components/ui/Button";
import Badge from "@/components/ui/Badge";
import TemplateEditForm from "./TemplateEditForm";

export default function TemplateList({ templates, onTemplateDeleted, onTemplateUpdated }) {
	const [deletingId, setDeletingId] = useState(null);
	const [editingId, setEditingId] = useState(null);

	const handleDelete = async (templateId) => {
		if (!confirm("Czy na pewno chcesz usunąć ten szablon?")) {
			return;
		}

		setDeletingId(templateId);

		try {
			const response = await fetch(`/api/templates/${templateId}`, {
				method: "DELETE",
			});

			if (response.ok) {
				onTemplateDeleted(templateId);
			} else {
				alert("Błąd podczas usuwania szablonu");
			}
		} catch (error) {
			console.error("Delete error:", error);
			alert("Błąd podczas usuwania szablonu");
		} finally {
			setDeletingId(null);
		}
	};

	const handleEdit = (templateId) => {
		setEditingId(templateId);
	};

	const handleEditCancel = () => {
		setEditingId(null);
	};

	const handleTemplateUpdated = (updatedTemplate) => {
		onTemplateUpdated(updatedTemplate);
		setEditingId(null);
	};

	const formatFileSize = (bytes) => {
		if (bytes === 0) return "0 Bytes";
		const k = 1024;
		const sizes = ["Bytes", "KB", "MB", "GB"];
		const i = Math.floor(Math.log(bytes) / Math.log(k));
		return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
	};

	const formatDate = (dateString) => {
		return new Date(dateString).toLocaleDateString("pl-PL", {
			year: "numeric",
			month: "2-digit",
			day: "2-digit",
			hour: "2-digit",
			minute: "2-digit",
		});
	};

	if (templates.length === 0) {
		return (
			<div className="text-center py-12">
				<div className="text-gray-400 mb-4">
					<svg
						className="w-12 h-12 mx-auto"
						fill="none"
						stroke="currentColor"
						viewBox="0 0 24 24"
					>
						<path
							strokeLinecap="round"
							strokeLinejoin="round"
							strokeWidth={1.5}
							d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
						/>
					</svg>
				</div>
				<h3 className="text-lg font-medium text-gray-900 mb-2">
					Brak szablonów
				</h3>
				<p className="text-gray-500">
					Dodaj swój pierwszy szablon dokumentów DOCX.
				</p>
			</div>
		);
	}

	return (
		<div className="space-y-4">
			<h3 className="text-lg font-medium text-gray-900">
				Dostępne szablony ({templates.length})
			</h3>

			<div className="space-y-3">
				{templates.map((template) => (
					<div
						key={template.template_id}
						className="border border-gray-200 rounded-lg p-4 hover:bg-gray-50 transition-colors"
					>
						{editingId === template.template_id ? (
							<div>
								<h4 className="font-medium text-gray-900 mb-4">
									Edytuj szablon: {template.template_name}
								</h4>
								<TemplateEditForm
									template={template}
									onTemplateUpdated={handleTemplateUpdated}
									onCancel={handleEditCancel}
								/>
							</div>
						) : (
							<div className="flex items-start justify-between">
								<div className="flex-1">
									<div className="flex items-center gap-2 mb-1">
										<h4 className="font-medium text-gray-900">
											{template.template_name}
										</h4>
										<Badge variant="success" size="xs">
											Aktywny
										</Badge>
									</div>

									{template.description && (
										<p className="text-sm text-gray-600 mb-2">
											{template.description}
										</p>
									)}

									<div className="flex items-center gap-4 text-sm text-gray-500">
										<span>
											Plik: {template.original_filename}
										</span>
										<span>
											Rozmiar: {formatFileSize(template.file_size)}
										</span>
										<span>
											Dodano: {formatDate(template.created_at)}
										</span>
									</div>
								</div>

								<div className="flex gap-2 ml-4">
									<Button
										variant="outline"
										size="sm"
										onClick={() => window.open(`/api/templates/download/${template.stored_filename}`, "_blank")}
									>
										Pobierz
									</Button>
									<Button
										variant="secondary"
										size="sm"
										onClick={() => handleEdit(template.template_id)}
									>
										Edytuj
									</Button>
									<Button
										variant="danger"
										size="sm"
										onClick={() => handleDelete(template.template_id)}
										disabled={deletingId === template.template_id}
									>
										{deletingId === template.template_id ? "Usuwanie..." : "Usuń"}
									</Button>
								</div>
							</div>
						)}
					</div>
				))}
			</div>
		</div>
	);
}