"use client";

import { useState } from "react";
import { ShortcodeTable } from "@/components/shortcodes-table";
import type IShortcode from "@/interfaces/IShortcode";
import { useApi } from "@/hooks/use-api";
import request from "@/lib/request";
import { Loader2 } from "lucide-react";

export default function ShortcodesPage() {
	const {
		data: shortcodes,
		error,
		isLoading,
		mutate,
		success,
	} = useApi<IShortcode[]>("/shortcodes", undefined, true);

	console.log(shortcodes);

	const handleUpdate = async (updatedShortcode: IShortcode) => {
		const res = await request<IShortcode>(
			`/shortcodes/${updatedShortcode.code}/update`,
			{
				method: "PATCH",
				requiresAuth: true,
				body: updatedShortcode,
			},
		);
		mutate();
		// Implement update logic here
		console.log("Update shortcode:", updatedShortcode);
	};

	const handleDelete = async (code: string) => {
		const res = await request<undefined>(`/shortcodes/${code}/delete`, {
			requiresAuth: true,
			method: "DELETE",
		});
		mutate();
	};

	const handleAdd = async (newShortcode: Omit<IShortcode, "id">) => {
		const res = await request<IShortcode>(`/shortcodes/new`, {
			body: newShortcode,
			method: "POST",
			requiresAuth: true,
		});
		console.log(res);
		mutate();
	};

	return (
		<div className="container mx-auto px-4 py-10">
			<h1 className="text-2xl font-bold mb-5">Shortcodes</h1>
			{isLoading && (
				<Loader2 className="flex w-full min-w-0 flex-col gap-1 justify-center animate-spin" />
			)}
			{error && <p>{error}</p>}
			<ShortcodeTable
				shortcodes={shortcodes ?? []}
				onUpdate={handleUpdate}
				onDelete={handleDelete}
				onAdd={handleAdd}
			/>
		</div>
	);
}