'use client';

import { useState } from 'react';
import { Mic } from 'lucide-react';
import { Button } from '@/components/ui/button';
import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetDescription,
  SheetTrigger,
} from '@/components/ui/sheet';
import { VerseRecorder } from './verse-recorder';

interface PracticeRecorderSheetProps {
  verseId: string;
  verseLabel?: string;
  triggerLabel: string;
  title: string;
  description: string;
  submitLabel?: string;
  onSubmit: (params: { audio: File; durationSeconds: number }) => Promise<void>;
}

export function PracticeRecorderSheet({
  verseId,
  verseLabel,
  triggerLabel,
  title,
  description,
  submitLabel,
  onSubmit,
}: PracticeRecorderSheetProps) {
  const [isOpen, setIsOpen] = useState(false);

  const handleSubmit = async (params: { audio: File; durationSeconds: number }) => {
    await onSubmit(params);
    setIsOpen(false);
  };

  return (
    <Sheet open={isOpen} onOpenChange={setIsOpen}>
      <div className="fixed inset-x-0 bottom-24 z-40 flex justify-center px-4 pointer-events-none md:bottom-8">
        <div className="w-full max-w-2xl flex justify-end md:max-w-7xl md:px-2">
          <SheetTrigger asChild>
            <Button className="pointer-events-auto h-12 rounded-full gap-2 px-5 gradient-primary border-0 text-white shadow-lg shadow-primary/25">
              <Mic className="h-4 w-4" />
              {triggerLabel}
            </Button>
          </SheetTrigger>
        </div>
      </div>
      <SheetContent side="bottom" className="h-[85vh] rounded-t-3xl overflow-y-auto pb-10">
        <SheetHeader>
          <SheetTitle>{title}</SheetTitle>
          <SheetDescription>{description}</SheetDescription>
        </SheetHeader>
        <VerseRecorder
          verseId={verseId}
          verseLabel={verseLabel}
          submitLabel={submitLabel}
          onSubmit={handleSubmit}
        />
      </SheetContent>
    </Sheet>
  );
}