"use client";
import { Button } from "@/components/ui/button";
import React, { useState } from "react";

import { Card, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { toast } from "@/components/ui/toaster";

import { Loading } from "@/components/dashboard/loading";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
// import { trpc } from "@/lib/trpc/client";
import { zodResolver } from "@hookform/resolvers/zod";
import { useRouter } from "next/navigation";
import { useForm } from "react-hook-form";
import { z } from "zod";

import { revalidate } from "./actions";
import { Modal, message } from "antd";
import { deleteStaff } from "@/lib/http/staff";

type Props = {
  api: {
    id: string;
    workspaceId: string;
    name: string;
  };
};

const intent = "delete my api";

const { confirm } = Modal;

/**
 *  删除节点
 * @param selectedRows
 */
const handleRemove = async (id: number) => {


  const hide = message.loading('正在删除员工');

  console.log("---删除员工--->", id)
  try {
    await deleteStaff(Number(id));
    hide();
    message.success('删除成功，即将刷新');
    return true;
  } catch (error) {
    hide();
    message.error('删除失败，请重试');
    return false;
  }
};

export const DeleteApi: React.FC<Props> = ({ api }) => {
  const [open, setOpen] = useState(false);

  const showDeleteConfirm = () => {
    confirm({
      title: '是否删除员工?',
      content: '删除的记录不能恢复,请确认!',
      rootClassName: "bg-[#fff]",
      onOk() {
        const id = Number(api.id)

        handleRemove(id).then(() => {
          window.location.href = `/manage`
        });
      },
      onCancel() {
      },
    });
  };

  const formSchema = z.object({
    name: z.string().refine((v) => v === api.name, "Please confirm the API name"),
    intent: z.string().refine((v) => v === intent, "Please confirm your intent"),
  });

  const form = useForm<z.infer<typeof formSchema>>({
    // resolver: zodResolver(formSchema),
  });
  const router = useRouter();

  // const deleteApi = trpc.api.delete.useMutation({
  //   async onSuccess() {
  //     toast.message("API Deleted", {
  //       description: "Your API and all its keys has been deleted.",
  //     });

  //     await revalidate();

  //     router.push("/app/apis");
  //   },
  //   // onError(err) {
  //   //   console.error(err);
  //   //   toast.error(err.message);
  //   // },
  // });

  const isValid = form.watch("intent") === intent && form.watch("name") === api.name;

  async function onSubmit(_values: z.infer<typeof formSchema>) {
    // deleteApi.mutate({ apiId: api.id });
  }




  return (
    <>
      <Card className="relative border-2 border-[#b80f07] mb-[1rem]">
        <CardHeader>
          <CardTitle>Delete</CardTitle>
          <CardDescription>
            该 员工客服 及其所有密钥和数据将被删除。此操作无法撤消。
          </CardDescription>
        </CardHeader>

        <CardFooter className="z-10 justify-end">
          <Button type="button" onClick={() => {
            if (!api.id) {
              message.warning('id 不能为空');
              return;
            }
            showDeleteConfirm()
            // setOpen(!open)
          }} >
            删除员工
          </Button>
        </CardFooter>
      </Card>
      <Dialog open={open} onOpenChange={(o) => setOpen(o)}>
        <DialogContent className="border-[#b80f07]">
          <DialogHeader>
            <DialogTitle>删除员工</DialogTitle>
            <DialogDescription>
              This api will be deleted, along with all of its keys. This action cannot be undone.
            </DialogDescription>
          </DialogHeader>
          <Form {...form}>
            <form className="flex flex-col space-y-8" onSubmit={form.handleSubmit(onSubmit)}>
              <Alert variant="alert">
                <AlertTitle>Warning</AlertTitle>
                <AlertDescription>
                  This action is not reversible. Please be certain.
                </AlertDescription>
              </Alert>

              <FormField
                control={form.control}
                name="name"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel className="font-normal text-content-subtle">
                      {" "}
                      Enter the API name{" "}
                      <span className="font-medium text-content">{api.name}</span> to continue:
                    </FormLabel>
                    <FormControl>
                      <Input {...field} autoComplete="off" />
                    </FormControl>

                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="intent"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel className="font-normal text-content-subtle">
                      To verify, type{" "}
                      <span className="font-medium text-content">delete my api</span> below:
                    </FormLabel>
                    <FormControl>
                      <Input {...field} autoComplete="off" />
                    </FormControl>

                    <FormMessage />
                  </FormItem>
                )}
              />

              <DialogFooter className="justify-end gap-4">
                <Button
                  type="button"
                  // disabled={deleteApi.isLoading}
                  onClick={() => setOpen(!open)}
                  variant="secondary"
                >
                  Cancel
                </Button>
                <Button
                  type="submit"
                // variant={isValid ? "alert" : "disabled"}
                // disabled={!isValid || deleteApi.isLoading}
                >
                  {/* {deleteApi.isLoading ? <Loading /> : "Delete API"} */}

                  删除员工
                </Button>
              </DialogFooter>
            </form>
          </Form>
        </DialogContent>
      </Dialog>
    </>
  );
};