import React from "react";
import { getCategories, getAllCategories } from "@/actions/catalog";
import PaginationWithLinks from "@/components/ui/pagination-with-links";
import { CategoriesOverview, columns } from "./columns";
import { CategoriesTable } from "./CategoriesTable";
import { CategoryVisualizer } from "./CategoryVisualizer";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { Plus, Table as TableIcon, Network, Layers } from "lucide-react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { MetricPill } from "@/components/dashboard/shared/MetricPill";
import { EntityOverviewHeader } from "@/components/dashboard/EntityOverviewHeader";

export default async function CategoriesPage({
  searchParams,
}: {
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}) {
  const params = await searchParams;
  const activePage =
    typeof params["page"] === "string" ? parseInt(params["page"], 10) || 1 : 1;
  const pageSize =
    typeof params["pageSize"] === "string"
      ? parseInt(params["pageSize"], 10) || 10
      : 10;

  const [categoriesRes, allCategoriesRes] = await Promise.all([
    getCategories({ limit: pageSize, page: activePage }),
    getAllCategories({}),
  ]);

  const documents = categoriesRes.success ? categoriesRes.data.documents : [];
  const total = categoriesRes.success ? categoriesRes.data.pagination.total : 0;
  const allCategories = (allCategoriesRes.success ? allCategoriesRes.data : [])
    .filter((c): c is { id: string; name: string; parent_id: string | null } => !!c.id && !!c.name)
    .map(c => ({
      id: c.id,
      name: c.name,
      parent_id: c.parent_id || null
    }));

  return (
    <div className="space-y-6">
      <EntityOverviewHeader 
        title="Kategorien" 
        description="Verwalten Sie Ihre Produktkategorien und deren Hierarchie."
        addHref="/dashboard/categories/create"
        addLabel="Kategorie hinzufügen"
      />

      <div className="flex flex-wrap gap-3">
        <MetricPill 
          label="Total Categories" 
          value={total} 
          icon={<Layers className="size-3.5 shrink-0" />} 
          variant="default" 
        />
        <MetricPill 
          label="Root Categories" 
          value={allCategories.filter(c => !c.parent_id).length} 
          icon={<Network className="size-3.5 shrink-0" />} 
          variant="info" 
        />
      </div>

      <Tabs defaultValue="list" className="space-y-6">
        <div className="flex items-center justify-between">
          <TabsList className="bg-muted/50 p-1 h-11">
            <TabsTrigger value="list" className="gap-2 px-6 py-2 text-sm font-semibold tracking-tight">
              <TableIcon className="size-3.5" />
              Tabelle
            </TabsTrigger>
            <TabsTrigger value="diagram" className="gap-2 px-6 py-2 text-sm font-semibold tracking-tight">
              <Network className="size-3.5" />
              Diagramm
            </TabsTrigger>
          </TabsList>
        </div>

        <TabsContent value="list" className="space-y-4 outline-none">
          <CategoriesTable columns={columns} data={documents as CategoriesOverview[]} />
          <div className="py-2 border-t">
            <PaginationWithLinks
              page={activePage}
              pageSize={pageSize}
              totalCount={total}
              pageSizeSelectOptions={{ pageSizeOptions: [10, 20, 50] }}
            />
          </div>
        </TabsContent>

        <TabsContent value="diagram" className="outline-none">
          <div className="rounded-lg border bg-card/50 backdrop-blur-sm p-8 shadow-sm">
            <CategoryVisualizer categories={allCategories} />
          </div>
        </TabsContent>
      </Tabs>
    </div>
  );
}