"use client";

import { useState, useTransition } from "react";
import { toast } from "sonner";
import { Plus, Loader2 } from "lucide-react";
import { createRole } from "../actions";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";

export function AddRoleDialog() {
  const [open, setOpen] = useState(false);
  const [pending, startTransition] = useTransition();
  const [roleType, setRoleType] = useState("false");

  function onSubmit(formData: FormData) {
    formData.set("is_system", roleType);
    startTransition(async () => {
      const res = await createRole(undefined, formData);
      if (res?.ok) {
        toast.success("Role created successfully");
        setOpen(false);
        setRoleType("false");
      } else if (res?.error) {
        toast.error(res.error);
      }
    });
  }

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button className="gap-1.5">
          <Plus className="h-4 w-4" />
          Add Role
        </Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-[500px]">
        <DialogHeader>
          <DialogTitle>Add New Role</DialogTitle>
          <DialogDescription>
            Create a new role with specific permissions and system scope.
          </DialogDescription>
        </DialogHeader>
        <form action={onSubmit} className="space-y-4 py-2">
          <div className="space-y-2">
            <Label htmlFor="role_name">Role name *</Label>
            <Input
              id="role_name"
              name="name"
              placeholder="e.g. Senior Counselor"
              required
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="role_description">Description</Label>
            <Textarea
              id="role_description"
              name="description"
              placeholder="Brief description of duties or permissions..."
              rows={3}
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="role_type">Role Type *</Label>
            <Select value={roleType} onValueChange={setRoleType}>
              <SelectTrigger id="role_type">
                <SelectValue placeholder="Select type" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="false">Custom Role</SelectItem>
                <SelectItem value="true">System Role</SelectItem>
              </SelectContent>
            </Select>
          </div>

          <DialogFooter className="pt-4">
            <Button
              type="button"
              variant="outline"
              onClick={() => setOpen(false)}
              disabled={pending}
            >
              Cancel
            </Button>
            <Button type="submit" disabled={pending}>
              {pending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
              {pending ? "Creating role..." : "Create Role"}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}