import { Header } from "@/components/layout/header";
import { Main } from "@/components/layout/main";
import { ProfileDropdown } from "@/components/profile-dropdown";
import { Search } from "@/components/search";
import { ThemeSwitch } from "@/components/theme-switch";
import ToolPagesProvider from "./context/tool-pages-context";
import { columns } from "./components/columns";
import { DataTable } from "./components/data-table";
import { ToolPagePrimaryButtons } from "./components/tasks-primary-buttons";
// import { toolpages } from "./data/toolpages";
import { ToolPage } from "./data/schema";
import { useEffect, useState } from "react";

export default function ToolPages() {
  const [toolpages, setToolpages] = useState<ToolPage[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const fetchData = async () => {
    setIsLoading(true);
    setError(null);
    try {
      const backendUrl =
        import.meta.env.VITE_BACKEND_URL ??
        "http://localhost:5000/api/admin";

      const response = await fetch(`${backendUrl}/tool-pages/show`, {
        method: "GET",
        credentials: "include",
      });
      const result = await response.json();

      if (!response.ok) {
        throw new Error(result.message || "Failed to fetch the Tool Pages");
      }

      const normalized: ToolPage[] = result.data.map((item: any) => ({
        id: String(item.id),
        tool_name: item.tool_name,
        page_slug: item.page_slug,
        is_active: String(item.is_active),
        language: item.language,
        is_home_tool: String(item.is_home_tool),
      }));
      setToolpages(normalized);
    } catch (err: any) {
      console.error("Fetch error:", err);
      setError(err.message || "Something went wrong.");
    } finally {
      setIsLoading(false);
    }
  };

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

  return (
    <ToolPagesProvider>
      <Header fixed>
        <Search />
        <div className="ml-auto flex items-center space-x-4">
          <ThemeSwitch />
          <ProfileDropdown />
        </div>
      </Header>
      <Main>
        <div className="mb-2 flex flex-wrap items-center justify-between space-y-2 gap-x-4">
          <div>
            <h2 className="text-2xl font-bold tracking-tight">Tool Pages</h2>
            <p className="text-muted-foreground">
              Here&apos;s a list of your tool pages!
            </p>
          </div>
          <ToolPagePrimaryButtons />
        </div>
        <div className="-mx-4 flex-1 overflow-auto px-4 py-1 lg:flex-row lg:space-y-0 lg:space-x-12">
          <DataTable
            data={toolpages}
            columns={columns(fetchData)}
            isLoading={isLoading}
          />
        </div>
      </Main>
    </ToolPagesProvider>
  );
}