"use client";
import React, { useState } from "react";
import {
  TextInput,
  Button,
  Title,
  Stack,
  Group,
  Text,
  Divider,
  LoadingOverlay,
  Box,
  Modal,
  Checkbox,
  Paper,
  Tabs,
  ScrollArea,
} from "@mantine/core";
import { notifications } from "@mantine/notifications";
import { useRouter } from "next/navigation";
import { IconGavel, IconUser } from "@tabler/icons-react";

export default function UserConfiguration() {
  const router = useRouter();
  const [CIF, setCIF] = useState("");
  const [userDetails, setUserDetails] = useState<any>(null);
  const [loading, setLoading] = useState(false);
  const [savingsAccount, setSavingsAccount] = useState<string | null>(null);
  const [showPreviewModal, setShowPreviewModal] = useState(false);
  const [confirmedPreview, setConfirmedPreview] = useState(false);
  const [ibEnabled, setIbEnabled] = useState(false);
  const [ibAccess, setIbAccess] = useState<"2" | "1" | null>(null);
  const [mbEnabled, setMbEnabled] = useState(false);
  const [mbAccess, setMbAccess] = useState<"2" | "1" | null>(null);

  const isValidated = !!userDetails;
  const canSubmit =
    isValidated && savingsAccount && userDetails?.mobile && confirmedPreview;

  const handleValidate = async () => {
    if (!CIF) {
      notifications.show({
        color: "red",
        title: "CIF Missing",
        message: "Please enter a CIF number to proceed.",
      });
      return;
    }
    setLoading(true);
    try {
      const token = localStorage.getItem("admin_access_token");
      const response = await fetch(
        `/api/auth/admin/fetch/customer_details?CIF=${CIF}`,
        {
          method: "GET",
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${token}`,
          },
        }
      );

      const data = await response.json();
      if (response.ok && Array.isArray(data) && data.length > 0) {
        const saAccount = data.find((acc) => acc.stAccountType === "SA");
        setSavingsAccount(saAccount?.stAccountNo ?? null);

        const user = data[0];
        setUserDetails({
          name: user.custname,
          userId: user.id,
          mobile: user.mobileno ?? null,
          address: user.custaddress,
          activeAccount: user.activeAccounts,
        });
      } else {
        notifications.show({
          color: "red",
          title: "Validation Failed",
          message: "User not found",
        });
      }
    } catch (err) {
      console.error(err);
      notifications.show({
        color: "red",
        title: "Validation Failed",
        message: "User not found",
      });
    } finally {
      setLoading(false);
    }
  };

  const handlePreview = () => {
    if (!savingsAccount || !userDetails?.mobile) {
      return;
    }
    if (!ibAccess && !mbAccess) {
      notifications.show({
        title: "Rights Required",
        message:
          "Please select at least one right (Internet Banking or Mobile Banking).",
        color: "red",
      });
      return;
    }
    setShowPreviewModal(true);
  };

  const handleSubmit = async () => {
    if (!canSubmit) return;

    try {
      const token = localStorage.getItem("admin_access_token");
      const response = await fetch("/api/auth/admin/user/rights", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${token}`,
        },
        body: JSON.stringify({
          CIF,
          ib_access_level: ibAccess,
          mb_access_level: mbAccess,
        }),
      });

      const data = await response.json();
      if (response.ok) {
        if (data?.otp) {
          // Registration case
          await fetch('/api/otp/send', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
              mobileNumber: userDetails.mobile,
              type: 'REGISTRATION',
              userOtp: data.otp,
            }),
          });
          notifications.show({
            color: 'blue',
            title: 'Submitted',
            message: `User ${CIF} rights submitted successfully. OTP sent to the user.`,
          });
        }
        else if (data?.message) {
          // Rights update case
          await fetch('/api/otp/send', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
              mobileNumber: userDetails.mobile,
              type: 'RIGHT_UPDATE',
            }),
          });
          notifications.show({
            color: 'blue',
            title: 'Submitted',
            message: `User ${CIF} rights updated successfully. Confirmation sent to the user.`,
          });
        }
      }
      else if (response.status === 401 || data.message === "invalid or expired token") {
        localStorage.clear();
        sessionStorage.clear();
        router.push("/administrator/login");
      }
    }
    catch (err) {
      console.error(err);
      notifications.show({
        color: "red",
        title: "Failed - Right",
        message: `Cannot process user ${CIF} rights.`,
        autoClose: false,
      });
    } finally {
      handleReset();
    }
  };

  const handleReset = () => {
    setSavingsAccount(null);
    setUserDetails(null);
    setCIF("");
    setConfirmedPreview(false);
    setIbEnabled(false);
    setIbAccess(null);
    setMbEnabled(false);
    setMbAccess(null);
  };

  const handleMainAction = () => {
    if (!isValidated) {
      handleValidate();
    } else if (!confirmedPreview) {
      handlePreview();
    } else {
      handleSubmit();
    }
  };

  return (
    <>
      <Title order={4}>User Configuration</Title>

      <Box
        style={{
          height: "65vh",
          maxHeight: "65vh",
          // overflowY: "auto",
        }}
      >
        <LoadingOverlay visible={loading} zIndex={1000} />

        <TextInput
          label="Enter CIF No"
          placeholder="Enter your CIF No"
          value={CIF}
          onChange={(e) => {
            const input = e.currentTarget.value.replace(/\D/g, "");
            if (input.length <= 11) setCIF(input);
          }}
          disabled={isValidated}
          withAsterisk
        />

        {isValidated && (
          <Tabs defaultValue="details" mt="md" variant="outline">
            <Tabs.List>
              <Tabs.Tab value="details" leftSection={<IconUser size={12} />}>User Details</Tabs.Tab>
              <Tabs.Tab value="rights" leftSection={<IconGavel size={12} />}>Rights</Tabs.Tab>
            </Tabs.List>

            <Tabs.Panel value="details" pt="xs">
              <ScrollArea h={250} type="auto" offsetScrollbars>
                <Paper withBorder p="md" radius="md">
                  <Stack>
                    <Group grow>
                      <Text fw={700} >User ID:</Text>
                      <Text c="dimmed">{userDetails?.userId ?? "N/A"}</Text>
                    </Group>
                    <Group grow>
                      <Text fw={700} >User Name:</Text>
                      <Text>{userDetails?.name ?? "N/A"}</Text>
                    </Group>
                    <Group grow>
                      <Text fw={700} >Mobile Number:</Text>
                      <Text c="dimmed">{userDetails?.mobile ?? "N/A"}</Text>
                    </Group>
                    <Group grow>
                      <Text fw={700} >User Address:</Text>
                      <Text>{userDetails?.address ?? "N/A"}</Text>
                    </Group>
                    <Group grow>
                      <Text fw={700} >Savings Account:</Text>
                      <Text c="blue">{savingsAccount ?? "N/A"}</Text>
                    </Group>
                    <Group grow>
                      <Text fw={700}>Active Accounts:</Text>
                      <Text c="Green">{userDetails?.activeAccount ?? "N/A"}</Text>
                    </Group>
                  </Stack>
                </Paper>
              </ScrollArea>
            </Tabs.Panel>

            <Tabs.Panel value="rights" pt="xs">
              <Stack gap="sm">
                <Group gap="xl" align="center">
                  <Box w={150}>
                    <Text fw={700}>Internet Banking</Text>
                  </Box>
                  <Box w={100}>
                    <Checkbox
                      disabled={confirmedPreview}
                      checked={ibEnabled}
                      onChange={(e) => {
                        setIbEnabled(e.currentTarget.checked);
                        if (!e.currentTarget.checked) setIbAccess(null);
                      }}
                    />
                  </Box>
                  <Box w={120}>
                    <Checkbox
                      disabled={!ibEnabled || confirmedPreview}
                      checked={ibAccess === "1"}
                      onChange={() => setIbAccess("1")}
                      label="Transaction"
                    />
                  </Box>
                  <Box w={100}>
                    <Checkbox
                      disabled={!ibEnabled || confirmedPreview}
                      checked={ibAccess === "2"}
                      onChange={() => setIbAccess("2")}
                      label="Read"
                    />
                  </Box>
                </Group>

                <Group gap="xl" align="center">
                  <Box w={150}>
                    <Text fw={700}>Mobile Banking</Text>
                  </Box>
                  <Box w={100}>
                    <Checkbox
                      disabled={confirmedPreview}
                      checked={mbEnabled}
                      onChange={(e) => {
                        setMbEnabled(e.currentTarget.checked);
                        if (!e.currentTarget.checked) setMbAccess(null);
                      }}
                    />
                  </Box>
                  <Box w={120}>
                    <Checkbox
                      disabled={!mbEnabled || confirmedPreview}
                      checked={mbAccess === "1"}
                      onChange={() => setMbAccess("1")}
                      label="Transaction"
                    />
                  </Box>
                  <Box w={100}>
                    <Checkbox
                      disabled={!mbEnabled || confirmedPreview}
                      checked={mbAccess === "2"}
                      onChange={() => setMbAccess("2")}
                      label="Read"
                    />
                  </Box>
                </Group>
              </Stack>
            </Tabs.Panel>
          </Tabs>
        )}

        <Modal
          opened={showPreviewModal}
          onClose={() => setShowPreviewModal(false)}
          title="Confirm User Rights"
          centered
        >
          <Stack>
            <Text>
              <strong>CIF:</strong> {CIF}
            </Text>
            <Text>
              <strong>Savings Account:</strong> {savingsAccount ?? "N/A"}
            </Text>
            <Text>
              <strong>Mobile Number:</strong> {userDetails?.mobile ?? "N/A"}
            </Text>
            <Divider label="Rights" size="xs" />
            <TextInput
              label="Internet Banking"
              value={
                ibAccess === "1"
                  ? "Transaction"
                  : ibAccess === "2"
                    ? "Read"
                    : "No Rights"
              }
              readOnly
            />
            <TextInput
              label="Mobile Banking"
              value={
                mbAccess === "1"
                  ? "Transaction"
                  : mbAccess === "2"
                    ? "Read"
                    : "No Rights"
              }
              readOnly
            />
          </Stack>
          <Group justify="right" mt="md">
            <Button variant="default" onClick={() => setShowPreviewModal(false)}>
              Cancel
            </Button>
            <Button
              onClick={() => {
                setConfirmedPreview(true);
                setShowPreviewModal(false);
              }}
              disabled={!savingsAccount || !userDetails?.mobile}
            >
              OK
            </Button>
          </Group>
        </Modal>
      </Box>

      <Group>
        <Button
          onClick={handleMainAction}
          disabled={
            loading ||
            (!isValidated && !CIF) ||
            (isValidated &&
              !confirmedPreview &&
              (!savingsAccount || !userDetails?.mobile))
          }
        >
          {!isValidated ? "Validate" : !confirmedPreview ? "Preview" : "Submit"}
        </Button>
        {isValidated && (
          <Button color="red" variant="light" onClick={handleReset}>
            Reset
          </Button>
        )}
      </Group>
    </>
  );
}
