import {
  Badge,
  Box,
  Button,
  FormControl,
  FormHelperText,
  FormLabel,
  HStack,
  Input,
  Select,
  Text,
  useToast,
} from "@chakra-ui/react";
import React, { useEffect, useState } from "react";
import { OPACITY_ON_LOAD } from "../../Layout/animations";
import NormalTable from "../../Components/DataTable/NormalTable";
import { useGetUnbanInvestorQuery } from "../../Services/ban.investor.service";
import { formatDate, generateSerialNumber } from "../../Constants/Constants";
import { TABLE_PAGINATION } from "../../Constants/Paginations";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css"; // Importing the Quill snow theme
import { useSendCustomEmailMutation } from "../../Services/contact.service";
import { EmailIcon } from "@chakra-ui/icons";
import ToastBox from "../../Components/ToastBox";

const EmailNotification = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [selectedRadio, setSelectedRadio] = useState([]);
  const [subject, setSubject] = useState("");
  const [value, setValue] = useState(""); // Quill content (body)
  const toast = useToast();
  const [sendCustomNotification] = useSendCustomEmailMutation();
  const [searchTerm, setSearchTerm] = useState("");
  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
  const [country, setCountry] = useState("");
  const [kyc, setKyc] = useState("");

  // ===========================[Table Setup]==============================
  const tableHeadRow = [
    "Sr N/O",
    "Date",
    "Client ID",
    "First Name",
    "Last Name",
    "Country",
    "Phone Number",
    "E-mail ID",
    "KYC Status",
  ];

  const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
  const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page);

  // const {
  //   data: investorDetails,
  //   isLoading: investorDetailsLoading,
  //   refetch,
  // } = useGetUnbanInvestorQuery({
  //   page: currentPage, // Omit pagination for search
  //   size: 10000, // Omit pagination for search
  // });

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedSearchTerm(searchTerm.trim()); // Trim to remove leading/trailing spaces
    }, 300);
    return () => clearTimeout(handler);
  }, [searchTerm]);

  const {
    data: investorDetails,
    isLoading: investorDetailsLoading,
    refetch,
  } = useGetUnbanInvestorQuery(
    {
      page: 1, // Omit pagination for search
      size: 10000, // Omit pagination for search
      // page: debouncedSearchTerm ? undefined : currentPage, // Omit pagination for search
      // size: debouncedSearchTerm ? undefined : pageSize, // Omit pagination for search
      search: debouncedSearchTerm,
      country_xid: country,
      KYCStatus: kyc,
    },
    {
      skip: debouncedSearchTerm === "" && searchTerm !== "", // Skip if search is empty and it's not the initial request
    }
  );

  const extractedArray = investorDetails?.data?.rows?.map((item, idx) => ({
    id: item?.principal_xid,
    "Sr N/O": (
      <Text
        justifyContent={"left"}
        as={"span"}
        color={"gray.600"}
        className="d-flex align-items-center fw-bold web-text-small"
      >
        {generateSerialNumber(idx, currentPage, pageSize)}
      </Text>
    ),
    Date: (
      <Box w={"auto"} isTruncated={true}>
        <Text as={"span"} color={"teal.900"}>
          {formatDate(item?.date)}
        </Text>
      </Box>
    ),
    "Client ID": (
      <Box w={"auto"} isTruncated={true}>
        <Text as={"span"} color={"teal.900"}>
          {item?.clientReference_id}
        </Text>
      </Box>
    ),
    "First Name": (
      <Box w={"auto"} isTruncated={true}>
        <Text as={"span"} color={"teal.900"}>
          {item?.firstName}
        </Text>
      </Box>
    ),
    "Last Name": (
      <Box w={"auto"} isTruncated={true}>
        <Text as={"span"} color={"teal.900"}>
          {item?.lastName}
        </Text>
      </Box>
    ),
    Country: (
      <Box w={"auto"} isTruncated={true}>
        <Text as={"span"} color={"teal.900"}>
          {item?.country}
        </Text>
      </Box>
    ),
    "Phone Number": (
      <Box w={"auto"} isTruncated={true}>
        <Text as={"span"} color={"teal.900"}>
          {item?.phoneNumber}
        </Text>
      </Box>
    ),
    "E-mail ID": (
      <Box w={"auto"} isTruncated={true}>
        <Text as={"span"} color={"teal.900"}>
          {item?.emailAddress}
        </Text>
      </Box>
    ),
    "KYC Status": (
      <Box w={"auto"} isTruncated={true}>
        <Badge
          fontWeight={"500"}
          textTransform={"none"}
          color={item?.KYCStatus === false ? "red" : "blue"}
          px={2}
          py={0.5}
          variant={"ghost"}
        >
          {item?.KYCStatus === true ? "Completed" : "Not Completed"}
        </Badge>
      </Box>
    ),
  }));

  const modules = {
    toolbar: [
      //   [{ header: "1" }, { header: "2" },
      //   // { font: [] }
      // ],
      // [{ size: [] }],
      ["bold", "italic", "underline", "strike", "blockquote"],
      [{ list: "ordered" }, { list: "bullet" }],
      ["clean"],
    ],
  };

  // Main submission logic
  const handleSend = async (e) => {
    e.preventDefault(); // Prevent default form submission

    if (!subject || !value) {
      toast({
        render: () => (
          <ToastBox
            status={"error"}
            message={"Subject or email body cannot be empty"}
          />
        ),
      });
      return;
    }

    if (selectedRadio.length === 0) {
      toast({
        render: () => (
          <ToastBox
            status={"error"}
            message={"Please select at least one recipient"}
          />
        ),
      });
      return;
    }

    setIsLoading(true);

    const emailPayload = {
      subject,
      body: value,
      principal_xid: selectedRadio,
    };

    try {
      const res = await sendCustomNotification(emailPayload);
      console.log(res);
      if (res?.error) {
        toast({
          render: () => (
            <ToastBox status={"error"} message={res?.error?.data?.message} />
          ),
        });
        setIsLoading(false);
      } else if (res?.data) {
        toast({
          render: () => <ToastBox message={res?.data?.message} />,
        });
        setIsLoading(false);
        setSubject("");
        setValue("");
        setSelectedRadio([]);
      } else {
        toast({
          render: () => (
            <ToastBox status={"error"} message={"Something went wrong"} />
          ),
        });
        setIsLoading(false);
      }
    } catch (error) {}
  };

  return (
    <Box
      as={"form"}
      {...OPACITY_ON_LOAD}
      overflowY={"scroll"}
      height={"100vh"}
      pb={14}
      pt={4}
    >
      <FormControl mb={0}>
        {/* <HStack
          py={4}
          pb={3}
          w={"100%"}
          justifyContent={"space-between"}
          alignItems={"center"}
        >
          <Text as={"span"} fontSize={"sm"}>
            Customize your email
          </Text>
        </HStack> */}

        <FormControl isRequired mb={3} p={1}>
          <FormLabel fontSize={"sm"}>Subject</FormLabel>
          <Input
            size={"md"}
            value={subject}
            onChange={(e) => setSubject(e.target.value)}
            focusBorderColor="forestGreen.300"
            rounded={0.5}
            type="text"
          />
          {/* <FormHelperText>Entered subject will be reflected on emails subject body.</FormHelperText> */}
        </FormControl>

        <FormControl minH={400} isRequired mb={3} p={1}>
          <FormLabel fontSize={"sm"}>Create Custom body</FormLabel>
          <ReactQuill 
            theme="snow"
            style={{
              height: 300,
            }}
            value={value}
            onChange={setValue}
            modules={modules}
            placeholder="Start typing here..."
          />
        </FormControl>
        {/* <FormHelperText fontSize={"xs"}>
          We'll never share your email.
        </FormHelperText> */}
      </FormControl>
      <HStack
        display={"flex"}
        justifyContent={"space-between"}
        ps={1}
        pe={1}
        pb={4}
        pt={4}
        spacing="24px"
      >
        <Input
          mt={1}
          type="search"
          width={300}
          placeholder="Search..."
          size="sm"
          rounded="sm"
          focusBorderColor="green.500"
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
        />
        <HStack className="col" justifyContent={"end"}>
          <Select
            w={250}
            focusBorderColor="green.500"
            size={"sm"}
            fontSize={"xs"}
            cursor={"pointer"}
            onChange={(e) => setCountry(e.target.value)}
            value={country}
          >
            <option value="" defaultValue={""} disabled hidden>
              Country
            </option>
            <option value="">All</option>
            <option value="1">Bahrain</option>
            <option value="2">Kuwait</option>
            <option value="3">Oman</option>
            <option value="4">Qatar</option>
            <option value="5">Saudi arabia</option>
            <option value="6">United arab emirates</option>
          </Select>
          <Select
            w={250}
            focusBorderColor="green.500"
            size={"sm"}
            fontSize={"xs"}
            cursor={"pointer"}
            onChange={(e) => setKyc(e.target.value)}
            value={kyc}
          >
            <option value="" defaultValue={""} disabled hidden>
              KYC Status
            </option>
            <option value="">KYC Status</option>
            <option value="0">Not Completed</option>
            <option value="1">Completed</option>
          </Select>
        </HStack>
      </HStack>
      <Box overflow={"scroll"} h={"58vh"}>
        <NormalTable
          centered={true}
          emptyMessage={`We don't have any Sponsors`}
          tableHeadRow={tableHeadRow}
          data={extractedArray}
          setSelectedRadio={setSelectedRadio}
          selectedRadio={selectedRadio}
          showRadioButton={true}
        />
      </Box>

      <HStack justifyContent={"flex-end"} px={2}>
        <Button
          rightIcon={<EmailIcon />}
          rounded={"sm"}
          size={"sm"}
          colorScheme="forestGreen"
          type="submit"
          isLoading={isLoading}
          onClick={handleSend}
        >
          Send Email
        </Button>
      </HStack>
    </Box>
  );
};

export default EmailNotification;