stack/apps/web/src/app/(authenticated)/knowledge/page.tsx

"use client";

import type { ReactElement } from "react";

import { useState, useMemo } from "react";
import type { EntryStatus } from "@mosaic/shared";
import { EntryList } from "@/components/knowledge/EntryList";
import { EntryFilters } from "@/components/knowledge/EntryFilters";
import { ImportExportActions } from "@/components/knowledge";
import { mockEntries, mockTags } from "@/lib/api/knowledge";
import Link from "next/link";
import { Plus } from "lucide-react";

export default function KnowledgePage(): ReactElement {
  // TODO: Replace with real API call when backend is ready
  // const { data: entries, isLoading } = useQuery({
  //   queryKey: ["knowledge-entries"],
  //   queryFn: fetchEntries,
  // });

  const [isLoading] = useState(false);

  // Filter and sort state
  const [selectedStatus, setSelectedStatus] = useState<EntryStatus | "all">("all");
  const [selectedTag, setSelectedTag] = useState<string>("all");
  const [searchQuery, setSearchQuery] = useState("");
  const [sortBy, setSortBy] = useState<"updatedAt" | "createdAt" | "title">("updatedAt");
  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("desc");

  // Pagination state
  const [currentPage, setCurrentPage] = useState(1);
  const itemsPerPage = 10;

  // Client-side filtering and sorting
  const filteredAndSortedEntries = useMemo(() => {
    let filtered = [...mockEntries];

    // Filter by status
    if (selectedStatus !== "all") {
      filtered = filtered.filter((entry) => entry.status === selectedStatus);
    }

    // Filter by tag
    if (selectedTag !== "all") {
      filtered = filtered.filter((entry) =>
        entry.tags.some((tag: { slug: string }) => tag.slug === selectedTag)
      );
    }

    // Filter by search query
    if (searchQuery.trim()) {
      const query = searchQuery.toLowerCase();
      filtered = filtered.filter(
        (entry) =>
          entry.title.toLowerCase().includes(query) ||
          (entry.summary?.toLowerCase().includes(query) ?? false) ||
          entry.tags.some((tag: { name: string }): boolean =>
            tag.name.toLowerCase().includes(query)
          )
      );
    }

    // Sort entries
    filtered.sort((a, b) => {
      let comparison = 0;

      if (sortBy === "title") {
        comparison = a.title.localeCompare(b.title);
      } else if (sortBy === "createdAt") {
        comparison = new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime();
      } else {
        // updatedAt
        comparison = new Date(a.updatedAt).getTime() - new Date(b.updatedAt).getTime();
      }

      return sortOrder === "asc" ? comparison : -comparison;
    });

    return filtered;
  }, [selectedStatus, selectedTag, searchQuery, sortBy, sortOrder]);

  // Pagination
  const totalPages = Math.ceil(filteredAndSortedEntries.length / itemsPerPage);
  const paginatedEntries = filteredAndSortedEntries.slice(
    (currentPage - 1) * itemsPerPage,
    currentPage * itemsPerPage
  );

  // Reset to page 1 when filters change
  const handleFilterChange = (callback: () => void): void => {
    callback();
    setCurrentPage(1);
  };

  const handleSortChange = (
    newSortBy: "updatedAt" | "createdAt" | "title",
    newSortOrder: "asc" | "desc"
  ): void => {
    setSortBy(newSortBy);
    setSortOrder(newSortOrder);
    setCurrentPage(1);
  };

  return (
    <main className="container mx-auto px-4 py-8 max-w-5xl">
      {/* Header */}
      <div className="mb-8">
        <div className="flex items-center justify-between mb-4">
          <div>
            <h1 className="text-3xl font-bold text-gray-900">Knowledge Base</h1>
            <p className="text-gray-600 mt-2">Documentation, guides, and knowledge entries</p>
          </div>

          {/* Create button */}
          <Link
            href="/knowledge/new"
            className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors shadow-sm"
          >
            <Plus className="w-5 h-5" />
            <span>Create Entry</span>
          </Link>
        </div>

        {/* Import/Export Actions */}
        <div className="flex justify-end">
          <ImportExportActions
            onImportComplete={() => {
              // TODO: Refresh the entry list when real API is connected
              // For now, this would trigger a refetch of the entries
              window.location.reload();
            }}
          />
        </div>
      </div>

      {/* Filters */}
      <EntryFilters
        selectedStatus={selectedStatus}
        selectedTag={selectedTag}
        searchQuery={searchQuery}
        sortBy={sortBy}
        sortOrder={sortOrder}
        tags={mockTags}
        onStatusChange={(status) => {
          handleFilterChange(() => {
            setSelectedStatus(status);
          });
        }}
        onTagChange={(tag) => {
          handleFilterChange(() => {
            setSelectedTag(tag);
          });
        }}
        onSearchChange={(query) => {
          handleFilterChange(() => {
            setSearchQuery(query);
          });
        }}
        onSortChange={handleSortChange}
      />

      {/* Entry list */}
      <EntryList
        entries={paginatedEntries}
        isLoading={isLoading}
        currentPage={currentPage}
        totalPages={totalPages}
        onPageChange={setCurrentPage}
      />
    </main>
  );
}