import { useState } from "react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Button } from "@/components/ui/button";
import { FileUp, Plus } from "lucide-react";
import { CustomContentUpload } from "./CustomContentUpload";
import { CustomContentTextEntry } from "./CustomContentTextEntry";
import { CustomContentList } from "./CustomContentList";
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
import { useTranslation } from 'react-i18next';

export function CustomContentManager() {
  const { t } = useTranslation();
  const [showUpload, setShowUpload] = useState(false);
  const [showTextEntry, setShowTextEntry] = useState(false);
  const [activeTab, setActiveTab] = useState<string>("all");
  const [refreshKey, setRefreshKey] = useState(0);

  const handleUploadSuccess = () => {
    setShowUpload(false);
    setRefreshKey(prev => prev + 1); // Trigger list refresh
  };

  const handleTextEntrySuccess = () => {
    setShowTextEntry(false);
    setRefreshKey(prev => prev + 1); // Trigger list refresh
  };

  return (
    <div className="space-y-4">
      {/* Action Buttons */}
      <div className="flex gap-2">
        <Dialog open={showUpload} onOpenChange={setShowUpload}>
          <DialogTrigger asChild>
            <Button className="bg-cyan-500 hover:bg-cyan-600 text-white">
              <FileUp className="mr-2 h-4 w-4" />
              {t('customContent.uploadPdf')}
            </Button>
          </DialogTrigger>
          <DialogContent className="max-w-2xl">
            <CustomContentUpload onSuccess={handleUploadSuccess} />
          </DialogContent>
        </Dialog>

        <Dialog open={showTextEntry} onOpenChange={setShowTextEntry}>
          <DialogTrigger asChild>
            <Button variant="outline" className="bg-slate-700 border-slate-600 text-white hover:bg-slate-600">
              <Plus className="mr-2 h-4 w-4" />
              {t('customContent.addTextEntry')}
            </Button>
          </DialogTrigger>
          <DialogContent className="max-w-4xl border-slate-700 bg-slate-900">
            <CustomContentTextEntry onSuccess={handleTextEntrySuccess} />
          </DialogContent>
        </Dialog>
      </div>

      {/* Tabs */}
      <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
        <TabsList className="bg-slate-800 border border-slate-700">
          <TabsTrigger
            value="all"
            className="data-[state=active]:bg-slate-700 data-[state=active]:text-white text-slate-400"
          >
            {t('customContent.tabs.all')}
          </TabsTrigger>
          <TabsTrigger
            value="pdf_upload"
            className="data-[state=active]:bg-slate-700 data-[state=active]:text-white text-slate-400"
          >
            {t('customContent.tabs.pdfs')}
          </TabsTrigger>
          <TabsTrigger
            value="text_entry"
            className="data-[state=active]:bg-slate-700 data-[state=active]:text-white text-slate-400"
          >
            {t('customContent.tabs.textEntries')}
          </TabsTrigger>
        </TabsList>

        <TabsContent value="all" className="mt-4">
          <CustomContentList
            contentType={undefined}
            refreshKey={refreshKey}
            onDelete={() => setRefreshKey(prev => prev + 1)}
          />
        </TabsContent>

        <TabsContent value="pdf_upload" className="mt-4">
          <CustomContentList
            contentType="pdf_upload"
            refreshKey={refreshKey}
            onDelete={() => setRefreshKey(prev => prev + 1)}
          />
        </TabsContent>

        <TabsContent value="text_entry" className="mt-4">
          <CustomContentList
            contentType="text_entry"
            refreshKey={refreshKey}
            onDelete={() => setRefreshKey(prev => prev + 1)}
          />
        </TabsContent>
      </Tabs>
    </div>
  );
}
