import { useState } from "react";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { apiClient } from "@/api/client";
import { useAppStore } from "@/stores/app-store";
import type { CreateStreamRequest } from "@/api/types";

interface CreateStreamDialogProps {
  networkId: string;
  children: React.ReactNode;
}

export function CreateStreamDialog({
  networkId,
  children,
}: CreateStreamDialogProps) {
  const [open, setOpen] = useState(false);
  const [name, setName] = useState("");
  const [description, setDescription] = useState("");
  const [visibility, setVisibility] =
    useState<CreateStreamRequest["visibility"]>("network_all");
  const [isCreating, setIsCreating] = useState(false);
  const addStream = useAppStore((s) => s.addStream);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!name.trim()) return;

    setIsCreating(true);
    try {
      const stream = await apiClient.createStream(networkId, {
        name: name.trim(),
        description: description.trim(),
        visibility,
      });
      addStream(networkId, stream);
      setOpen(false);
      setName("");
      setDescription("");
      setVisibility("network_all");
    } finally {
      setIsCreating(false);
    }
  };

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>{children}</DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>New Stream</DialogTitle>
        </DialogHeader>
        <form onSubmit={handleSubmit} className="flex flex-col gap-4">
          <div className="flex flex-col gap-2">
            <Label htmlFor="stream-name">Name</Label>
            <Input
              id="stream-name"
              value={name}
              onChange={(e) => setName(e.target.value)}
              placeholder="Stream name"
              autoFocus
            />
          </div>
          <div className="flex flex-col gap-2">
            <Label htmlFor="stream-description">Description</Label>
            <Input
              id="stream-description"
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              placeholder="Optional description"
            />
          </div>
          <div className="flex flex-col gap-2">
            <Label>Visibility</Label>
            <Select
              value={visibility}
              onValueChange={(v) =>
                setVisibility(v as CreateStreamRequest["visibility"])
              }
            >
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="network_all">Everyone in network</SelectItem>
                <SelectItem value="custom">Custom members</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <Button type="submit" disabled={!name.trim() || isCreating}>
            {isCreating ? "Creating..." : "Create Stream"}
          </Button>
        </form>
      </DialogContent>
    </Dialog>
  );
}
