KLC-Admin-Panel-Frontend-Figmamake/src/components/pages/tabs/CaseStudiesTab.tsx

import React, { useState, useEffect } from "react";
import { Button } from "../../ui/button";
import { Input } from "../../ui/input";
import { Search, Upload, Loader2 } from "lucide-react";
import { ContentTable } from "../shared/ContentTable";
import { UploadDrawer, UploadFormData } from "../shared/UploadDrawer";
import {
  useGetCaseStudiesQuery,
  useDeleteCaseStudyMutation,
  useCreateCaseStudyMutation
} from "../../../store/services/contentManager.service";
import { toast } from "sonner";

interface CaseStudiesTabProps {
  onNavigate: (route: string) => void;
  user: any;
  activeInnerTab?: string;
  setActiveInnerTab?: (tabs: any) => void;
}

export function CaseStudiesTab({ onNavigate, user }: CaseStudiesTabProps) {
  const [searchTerm, setSearchTerm] = useState("");
  const [selectedItems, setSelectedItems] = useState<string[]>([]);
  const [isUploadDrawerOpen, setIsUploadDrawerOpen] = useState(false);
  const [currentPage, setCurrentPage] = useState(1);
  const [limit] = useState(10);

  // Use the case studies API
  const {
    data: caseStudiesResponse,
    isLoading,
    error,
    refetch
  } = useGetCaseStudiesQuery({
    page: currentPage,
    limit: limit
  });

  const [deleteCaseStudy, { isLoading: isDeleting }] = useDeleteCaseStudyMutation();
  const [createCaseStudy, { isLoading: isCreating }] = useCreateCaseStudyMutation();

  // Transform API data to match table structure
  const caseStudies = caseStudiesResponse?.data || caseStudiesResponse || [];
  const paginationMeta = caseStudiesResponse?.meta;

  const handleUploadComplete = async (data: UploadFormData) => {
    try {
      const caseStudyData = {
        title: data.title,
        description: data.description,
        fileUrl: data.fileUrl,
        tags: data.tags || []
      };

      await createCaseStudy(caseStudyData).unwrap();
      toast.success("Case study uploaded successfully");
      setIsUploadDrawerOpen(false);
      refetch();
    } catch (error: any) {
      console.error("Failed to upload case study:", error);
      toast.error(error.data?.message || "Failed to upload case study");
    }
  };

  const handleEditCaseStudy = (caseStudy: any) => {
    onNavigate(`/content/case-studies/edit/${caseStudy.id}`);
  };

  const handlePageChange = (page: number) => {
    setCurrentPage(page);
    setSelectedItems([]); // Clear selection when page changes
  };

  useEffect(() => {
    setCurrentPage(1);
  }, [searchTerm]);

  const filteredCaseStudies = caseStudies.filter((caseStudy: any) =>
    caseStudy.title?.toLowerCase().includes(searchTerm.toLowerCase()) ||
    caseStudy.description?.toLowerCase().includes(searchTerm.toLowerCase()) ||
    caseStudy.tags?.some((tag: string) => tag.toLowerCase().includes(searchTerm.toLowerCase()))
  );

  // Add additional fields for table display
  const enhancedCaseStudies = filteredCaseStudies.map((caseStudy: any) => ({
    ...caseStudy,
    status: caseStudy.status || "Published",
    updated: new Date(caseStudy.updatedAt || caseStudy.createdAt).toLocaleDateString('en-US', {
      year: 'numeric',
      month: 'short',
      day: 'numeric',
    }),
    type: "Case Study",
    fileType: caseStudy.fileUrl?.split('.').pop()?.toUpperCase() || "PDF",
    fileSize: caseStudy.fileSize || "3.8 MB",
    owner: caseStudy.owner || "System",
    version: caseStudy.version || "v1",
    industry: caseStudy.industry || "General",
    client: caseStudy.client || "Confidential"
  }));

  const pagination = paginationMeta ? {
    currentPage: paginationMeta.page,
    totalPages: paginationMeta.totalPages,
    hasNext: paginationMeta.hasNext,
    hasPrev: paginationMeta.hasPrev,
    onPageChange: handlePageChange
  } : undefined;

  if (error) {
    return (
      <div className="text-center py-12">
        <p className="text-destructive">Failed to load case studies</p>
        <Button onClick={refetch} variant="outline" className="mt-4">
          Try Again
        </Button>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      {/* Toolbar */}
      <div className="flex flex-wrap items-center gap-4 mb-6">
        <div className="flex-1 min-w-[300px]">
          <div className="relative">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
            <Input
              placeholder="Search case studies by title, client, or tags..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="pl-10 min-h-[44px]"
            />
          </div>
        </div>

        <div className="flex items-center gap-2 text-sm text-muted-foreground">
          <span>
            {/* Showing {enhancedCaseStudies.length} of {paginationMeta?.total || 0} items */}
            {paginationMeta && paginationMeta.totalPages > 1 && (
              <span> (Page {currentPage} of {paginationMeta.totalPages})</span>
            )}
          </span>
        </div>

        <div className="ml-auto flex gap-2">
          <Button
            onClick={() => setIsUploadDrawerOpen(true)}
            className="min-h-[44px]"
            disabled={isCreating}
            style={{ backgroundColor: "var(--color-brand-primary)" }}
          >
            {isCreating ? (
              <Loader2 className="h-4 w-4 mr-2 animate-spin" />
            ) : (
              <Upload className="h-4 w-4 mr-2" />
            )}
            {isCreating ? "Uploading..." : "Upload Case Study"}
          </Button>
        </div>
      </div>

      {/* Content Table */}
      {isLoading ? (
        <div className="flex justify-center items-center py-12">
          <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
        </div>
      ) : (
        <ContentTable
          data={enhancedCaseStudies}
          type="case-study"
          selectedItems={selectedItems}
          onSelectionChange={setSelectedItems}
          onEdit={handleEditCaseStudy}
          onNavigate={onNavigate}
          user={user}
          onItemDeleted={refetch}
          pagination={pagination}
        />
      )}

      {/* Upload Drawer */}
      <UploadDrawer
        isOpen={isUploadDrawerOpen}
        onClose={() => setIsUploadDrawerOpen(false)}
        contentType="case-study"
        onUploadComplete={handleUploadComplete}
      />
    </div>
  );
}