"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { createCourse } from "@/app/admin/courses/actions";

export function CreateCourseDialog() {
  const [open, setOpen] = useState(false);

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger className="inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 h-9 px-4 py-2 cursor-pointer">
        + Создать курс
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Новый курс</DialogTitle>
        </DialogHeader>
        <form action={createCourse} className="space-y-4">
          <div className="space-y-1.5">
            <Label htmlFor="title">Название</Label>
            <Input id="title" name="title" placeholder="Obsidian PKM" required />
          </div>
          <div className="space-y-1.5">
            <Label htmlFor="slug">Slug (URL)</Label>
            <Input id="slug" name="slug" placeholder="obsidian-pkm (авто если пусто)" />
          </div>
          <div className="space-y-1.5">
            <Label htmlFor="description">Описание</Label>
            <Textarea id="description" name="description" placeholder="Краткое описание курса" rows={3} />
          </div>
          <div className="flex justify-end gap-2">
            <Button type="button" variant="outline" onClick={() => setOpen(false)}>
              Отмена
            </Button>
            <Button type="submit">Создать</Button>
          </div>
        </form>
      </DialogContent>
    </Dialog>
  );
}