import { ChevronRight, FileText } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
import { cn } from "@/lib/utils";
import TranscriptsTab from "@/components/transcripts_tab";
import type { Transcript } from "@/lib/types";

interface TranscriptsPanelProps {
  selectedTranscript: Transcript | null;
  selectedTranscripts: Transcript[];
  selectedChatId: string | null;
  isTranscriptsOpen: boolean;
  setIsTranscriptsOpen: (open: boolean) => void;
}

export default function TranscriptsPanel({
  selectedTranscript,
  selectedTranscripts,
  selectedChatId,
  isTranscriptsOpen,
  setIsTranscriptsOpen,
}: TranscriptsPanelProps) {
  if (
    process.env.NEXT_PUBLIC_INITIAL_MESSAGE !== "CSPE" ||
    selectedChatId === null
  ) {
    return null;
  }

  return (
    <>
      {/* Mobile Transcripts Sheet */}
      <div className="lg:hidden">
        <Sheet open={isTranscriptsOpen} onOpenChange={setIsTranscriptsOpen}>
          <SheetTrigger asChild>
            <Button
              variant="ghost"
              size="icon"
              className="fixed top-20 right-4 z-50 bg-background/80 backdrop-blur border border-border/50 shadow-lg"
            >
              <FileText className="h-4 w-4" />
            </Button>
          </SheetTrigger>
          <SheetContent side="right" className="w-full sm:w-80 p-0">
            <div className="h-full flex flex-col">
              <div className="p-4 border-b bg-background/95 backdrop-blur">
                <h2 className="font-semibold">Transcripts</h2>
              </div>
              <TranscriptsTab
                selectedTranscript={selectedTranscript}
                selectedTranscripts={selectedTranscripts}
              />
            </div>
          </SheetContent>
        </Sheet>
      </div>

      {/* Desktop Transcripts Panel */}
      <div
        className={cn(
          "hidden lg:flex flex-col transition-all duration-300 ease-in-out border-l bg-card/50",
          isTranscriptsOpen ? "w-80" : "w-12"
        )}
      >
        <div className="p-4 border-b flex items-center justify-between bg-background/95 backdrop-blur">
          <h2 className={cn("font-semibold", !isTranscriptsOpen && "sr-only")}>
            Transcripts
          </h2>
          <Button
            variant="ghost"
            size="icon"
            onClick={() => setIsTranscriptsOpen(!isTranscriptsOpen)}
            aria-label={
              isTranscriptsOpen ? "Close transcripts" : "Open transcripts"
            }
            className="hover:bg-accent/50"
          >
            <ChevronRight
              className={cn(
                "h-4 w-4 transition-transform",
                isTranscriptsOpen && "rotate-180"
              )}
            />
          </Button>
        </div>
        {isTranscriptsOpen && (
          <TranscriptsTab
            selectedTranscript={selectedTranscript}
            selectedTranscripts={selectedTranscripts}
          />
        )}
      </div>
    </>
  );
}