"use client";

import { useState } from "react";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { toast } from "sonner";

interface SaveRecordingDialogProps {
  playSessionId: number | null;
  onClose: () => void;
  onSaved: () => void;
}

export function SaveRecordingDialog({ playSessionId, onClose, onSaved }: SaveRecordingDialogProps) {
  const [name, setName] = useState("");
  const [description, setDescription] = useState("");
  const [saving, setSaving] = useState(false);

  async function handleSave() {
    if (!playSessionId || name.trim().length === 0) return;
    setSaving(true);
    const res = await fetch("/api/recordings", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ sourcePlaySessionId: playSessionId, name: name.trim(), description }),
    });
    setSaving(false);
    if (res.ok) {
      toast.success("Recording saved");
      onSaved();
    } else {
      toast.error("Could not save recording");
    }
  }

  return (
    <Dialog open={playSessionId !== null} onOpenChange={(open) => !open && onClose()}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Save session as a recording</DialogTitle>
          <DialogDescription>Give it a name so you can find and replay it later.</DialogDescription>
        </DialogHeader>
        <div className="flex flex-col gap-3">
          <div className="flex flex-col gap-1.5">
            <Label htmlFor="recording-name">Name</Label>
            <Input id="recording-name" value={name} onChange={(e) => setName(e.target.value)} autoFocus />
          </div>
          <div className="flex flex-col gap-1.5">
            <Label htmlFor="recording-description">Description (optional)</Label>
            <Input
              id="recording-description"
              value={description}
              onChange={(e) => setDescription(e.target.value)}
            />
          </div>
        </div>
        <DialogFooter>
          <Button variant="ghost" onClick={onClose}>
            Skip
          </Button>
          <Button onClick={handleSave} disabled={saving || name.trim().length === 0}>
            {saving ? "Saving..." : "Save recording"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}