roboco/panel/src/components/knowledge-base/kb-category-view.tsx

"use client";

import { useState } from "react";
import { KBIndexType } from "@/types";
import { useKBDocuments } from "@/hooks/use-knowledge-base";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton";
import { KBIndexTypeBadge } from "./kb-index-type-badge";
import { FileCode, FolderOpen, Clock, ChevronLeft, ChevronRight } from "lucide-react";
import { formatDistanceToNow } from "date-fns";

const PAGE_SIZE = 25;

interface KBCategoryViewProps {
  category: KBIndexType | null;
}

// Inner component that resets when category changes via key
function KBCategoryViewInner({ category }: { category: KBIndexType }) {
  const [page, setPage] = useState(1);
  const offset = (page - 1) * PAGE_SIZE;

  const { data, isLoading } = useKBDocuments(
    category,
    { limit: PAGE_SIZE, offset },
    true
  );

  if (isLoading) {
    return (
      <div className="space-y-2">
        {[1, 2, 3, 4, 5].map((i) => (
          <div key={i} className="flex items-center gap-3 p-3 border rounded-lg">
            <Skeleton className="h-10 w-10 rounded" />
            <div className="flex-1 space-y-1">
              <Skeleton className="h-4 w-3/4" />
              <Skeleton className="h-3 w-1/2" />
            </div>
          </div>
        ))}
      </div>
    );
  }

  const documents = data?.documents ?? [];
  const totalPages = Math.ceil((data?.total ?? 0) / PAGE_SIZE);

  return (
    <div className="space-y-4">
      {/* Documents List */}
      <div className="space-y-2">
        {documents.length === 0 ? (
          <Card>
            <CardContent className="py-8 text-center">
              <FileCode className="h-8 w-8 text-muted-foreground/50 mx-auto mb-2" />
              <p className="text-sm text-muted-foreground">
                No documents in this category yet.
              </p>
            </CardContent>
          </Card>
        ) : (
          documents.map((doc) => (
            <Card key={doc.id} className="hover:bg-muted/50 transition-colors">
              <CardContent className="p-4">
                <div className="flex items-start gap-3">
                  <div className="p-2 bg-muted rounded">
                    <FileCode className="h-5 w-5 text-muted-foreground" />
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2 mb-1">
                      <KBIndexTypeBadge indexType={category} />
                    </div>
                    <p className="text-sm font-mono truncate">{doc.source}</p>
                    <div className="flex items-center gap-2 mt-1 text-xs text-muted-foreground">
                      <Clock className="h-3 w-3" />
                      <span>
                        {formatDistanceToNow(new Date(doc.indexed_at), { addSuffix: true })}
                      </span>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))
        )}
      </div>

      {/* Pagination */}
      {totalPages > 1 && (
        <div className="flex items-center justify-between pt-2">
          <p className="text-sm text-muted-foreground">
            Page {page} of {totalPages} ({data?.total} documents)
          </p>
          <div className="flex gap-2">
            <Button
              variant="outline"
              size="sm"
              onClick={() => setPage((p) => Math.max(1, p - 1))}
              disabled={page === 1}
            >
              <ChevronLeft className="h-4 w-4 mr-1" />
              Previous
            </Button>
            <Button
              variant="outline"
              size="sm"
              onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
              disabled={page === totalPages}
            >
              Next
              <ChevronRight className="h-4 w-4 ml-1" />
            </Button>
          </div>
        </div>
      )}
    </div>
  );
}

export function KBCategoryView({ category }: KBCategoryViewProps) {
  if (!category) {
    return (
      <div className="flex flex-col items-center justify-center py-12 text-center">
        <FolderOpen className="h-12 w-12 text-muted-foreground/50 mb-4" />
        <h3 className="text-lg font-medium mb-1">Browse Categories</h3>
        <p className="text-sm text-muted-foreground max-w-md">
          Select a category from the left to browse indexed documents.
        </p>
      </div>
    );
  }

  // Key by category to reset state when category changes
  return <KBCategoryViewInner key={category} category={category} />;
}