import { Button } from "../../components/ui/button";
import {
  DialogBody,
  DialogCloseTrigger,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogRoot,
  DialogTitle,
  DialogTrigger,
} from "../../components/ui/dialog";
import { Badge, Field, HStack, Input, Stack, Textarea } from "@chakra-ui/react";
import { usePendingRequestMutation } from "../../Redux/Service/manage.contactus.service";
import { useState } from "react";
import { Toaster, toaster } from "../../components/ui/toaster";

function PendingRequests({ data, refetch }: { data: any, refetch: VoidFunction }) {
  const [isOpen, setIsOpen] = useState(false);
  const [res, setRes] = useState({
    contact_us_xid: data.id,
    message: data.message,
    solution: '',
  })
  const [pendingRequest, { isLoading }] = usePendingRequestMutation()

  const handleOpenModal = () => {
    setIsOpen(true);
  };


  const handleSubmit = async (status: string) => {
    const payload = { ...res, response_status: status };

    if(res.solution === ''){
      toaster.create({
        title: "Error",
        description: "All fields are required",
        type: "error",
      });
      return;
    }
    try {
      const response = await pendingRequest(payload).unwrap()
      if (response?.status === "success") {
        toaster.create({
          title: "Success",
          description: "Country updated successfully",
          type: "success",
        });
        setIsOpen(false);
        refetch()
      } else {
        toaster.create({
          title: "Error",
          description: "Failed to update Country",
          type: "error",
        });
      }
    } catch (error: any) {
      toaster.create({
        title: "Error",
        description: error?.data?.message || "Something went wrong",
        type: "error",
      });
    }
  }

  return (
    <>
      <DialogRoot placement="center" key={data.id} open={isOpen} onOpenChange={({ open }) => setIsOpen(open)}>
        <DialogTrigger asChild>
          <Badge fontSize={"xs"} px={2} bg={'#02a0a01f'} onClick={handleOpenModal}>
            Answer request
          </Badge>
        </DialogTrigger>

        <DialogContent
          bg={"#fff"}
          w={{ base: "90%", md: "400px" }}
          height={"auto"}
          p={3} // Reduced padding
          bgSize={"md"}
        >
          <DialogHeader bg="white">
            <DialogTitle alignSelf="center" color="black" fontSize="14px">
              Pending Requests
            </DialogTitle>
          </DialogHeader>

          <DialogBody bg="white">
            <Stack py={3}>
              <Field.Root>
                <Field.Label color="black" pt={1} fontSize="12px">
                  Request Type
                </Field.Label>
                <Input
                  placeholder="Message"
                  bgColor="#EEEEEE"
                  color="black"
                  border="none"
                  pl={1}
                  fontSize="12px"
                  height="30px"
                  value={res.message}
                  disabled
                  // onChange={(e) => setRes({ ...res, message: e.target.value })}
                />

                <Field.Label color="black" pt={1} fontSize="12px">
                  Solution
                </Field.Label>
                <Textarea
                  placeholder=""
                  bgColor="#EEEEEE"
                  color="black"
                  border="none"
                  pl={1}
                  fontSize="12px"
                  height="80px"
                  pt={1.5}
                  onChange={(e) => setRes({ ...res, solution: e.target.value })}
                />
              </Field.Root>
            </Stack>
          </DialogBody>
          <DialogFooter
            display={{ base: "block", md: "flex" }}
            justifyContent="center"
            gap={1}
            pt={2}
          >
            <HStack mt={2} mb={3} width={"100%"} justifyContent={"space-between"}>
              <Button
                width={"48%"}
                color="black"
                _hover={{ bgColor: "white" }}
                variant="outline"
                borderRadius="sm"
                border="1px solid #02A0A0"
                size={"xs"}
                onClick={() => handleSubmit('1')}
                disabled={isLoading}
              >
                Unresolved
              </Button>
              <Button
                width={"48%"}
                borderRadius="sm"
                // bgColor="#007F33"
                bgColor={"#02A0A0"}
                color="white"
                // colorPalette="#007F33"
                size={"xs"}
                onClick={() => handleSubmit('0')}
                disabled={isLoading}
              >
                Resolved
              </Button>
            </HStack>
          </DialogFooter>

          <DialogCloseTrigger color="black" />
        </DialogContent>
      </DialogRoot>
      <Toaster />
    </>
  );
}

export default PendingRequests;
