KLC-Admin-Panel-Frontend-Figmamake/src/components/pages/tabs/PodcastsTab.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 { 
  useGetPodcastsQuery, 
  useDeletePodcastMutation,
  useCreatePodcastMutation 
} from "../../../store/services/contentManager.service";
import { toast } from "sonner";

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

export function PodcastsTab({ onNavigate, user }: PodcastsTabProps) {
  const [searchTerm, setSearchTerm] = useState("");
  const [selectedItems, setSelectedItems] = useState<string[]>([]);
  const [isUploadDrawerOpen, setIsUploadDrawerOpen] = useState(false);

  // Use the podcasts API
  const { 
    data: podcastsResponse, 
    isLoading, 
    error, 
    refetch 
  } = useGetPodcastsQuery({});
  
  const [deletePodcast, { isLoading: isDeleting }] = useDeletePodcastMutation();
  const [createPodcast, { isLoading: isCreating }] = useCreatePodcastMutation();

  // Transform API data to match table structure
  const podcasts = podcastsResponse?.data || podcastsResponse || [];

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

      await createPodcast(podcastData).unwrap();
      toast.success("Podcast uploaded successfully");
      setIsUploadDrawerOpen(false);
      refetch();
    } catch (error: any) {
      console.error("Failed to upload podcast:", error);
      toast.error(error.data?.message || "Failed to upload podcast");
    }
  };

  const handleEditPodcast = (podcast: any) => {
    onNavigate(`/content/podcasts/edit/${podcast.id}`);
  };

  const filteredPodcasts = podcasts.filter((podcast: any) =>
    podcast.title?.toLowerCase().includes(searchTerm.toLowerCase()) ||
    podcast.description?.toLowerCase().includes(searchTerm.toLowerCase()) ||
    podcast.tags?.some((tag: string) => tag.toLowerCase().includes(searchTerm.toLowerCase()))
  );

  // Add additional fields for table display
  const enhancedPodcasts = filteredPodcasts.map((podcast: any) => ({
    ...podcast,
    status: "Published",
    updated: new Date(podcast.updatedAt || podcast.createdAt).toLocaleDateString('en-US', {
      year: 'numeric',
      month: 'short',
      day: 'numeric',
    }),
    type: "Podcast",
    fileType: podcast.fileUrl?.split('.').pop()?.toUpperCase() || "MP3",
    fileSize: "24.5 MB", // Default value or from API if available
    owner: "System",
    listens: podcast.listens || 0
  }));

  if (error) {
    return (
      <div className="text-center py-12">
        <p className="text-destructive">Failed to load podcasts</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 podcast episodes..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="pl-10 min-h-[44px]"
            />
          </div>
        </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 Podcast"}
          </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={enhancedPodcasts}
          type="podcast"
          selectedItems={selectedItems}
          onSelectionChange={setSelectedItems}
          onEdit={handleEditPodcast}
          onNavigate={onNavigate}
          user={user}
          onItemDeleted={refetch}
        />
      )}

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