import { BuildTable } from "@/components/blocks/Table/table";
import type { MembershipClubStatusPolicies } from "@/lib/features/membership-clubs/types";
import {
  Drawer,
  Grid,
  Group,
  NativeSelect,
  Stack,
  Text,
  Title,
} from "@mantine/core";
import type { MRT_ColumnDef, MRT_RowData } from "mantine-react-table";
import { useState } from "react";

const columns: MRT_ColumnDef<MembershipClubStatusPolicies>[] = [
  {
    accessorKey: "ext_account_status_id",
    header: "ID",
  },
  {
    accessorKey: "account_status_name",
    header: "Status Name",
  },
  {
    accessorKey: "access_policy_name",
    header: "Policy name",
  },
  {
    accessorKey: "city_stopovers",
    header: "City Stopovers",
  },
  {
    accessorKey: "curated_event_booking",
    header: "Curated Events Booking",
  },
  {
    accessorKey: "destination_booking",
    header: "Destination Booking",
  },
  {
    accessorKey: "hot_deals",
    header: "Hot Deals",
  },
  {
    accessorKey: "karma_alliance",
    header: "Karma Alliance",
  },
  {
    accessorKey: "karma_alliance_offers",
    header: "Karma Alliance(Offers)",
  },
  {
    accessorKey: "karma_getaway",
    header: "Karma Getaways",
  },
  {
    accessorKey: "karma_getaway_offers",
    header: "Karma Getaways(Offers)",
  },
  {
    accessorKey: "karma_nomad",
    header: "Karma Nomad",
  },
  {
    accessorKey: "karma_registry_collection",
    header: "Registry Collection",
  },
  {
    accessorKey: "rci_exchange",
    header: "KWE/RCI Exchange",
    minSize: 800,
  },
  {
    accessorKey: "rci_rental",
    header: "KNE/RCI Rental",
    size: 300,
  },
  {
    accessorKey: "reciprocal_partners",
    header: "Reciprocal Partners",
    size: 300,
  },
  {
    accessorKey: "twoforone",
    header: "241 Travels(External)",
    size: 300,
  },
  {
    accessorKey: "member_privileges_travel",
    header: "Member Privileges(External)",
    size: 300,
  },
];

const ClubStatusPolicies: React.FC<{
  tableProps: { data: MembershipClubStatusPolicies[]; totalRows: number };
}> = ({ tableProps }) => {
  const [openDrawer, setOpenDrawer] = useState(false);
  const [selectedStatusPolicy, setSelectedStatusPolicy] =
    useState<MembershipClubStatusPolicies | null>(null);

  const handleDrawerClose = () => {
    setSelectedStatusPolicy(null);
    setOpenDrawer(false);
  };
  const handleRowClick = (rowData: MRT_RowData) => {
    const row = rowData as MembershipClubStatusPolicies;
    setSelectedStatusPolicy(row);
    setOpenDrawer(true);
  };
  return (
    <Stack
      bdrs={"sm"}
      bg={"white.0"}
      p={"sm"}
      style={{
        filter: "drop-shadow(0.5px 0.5px 0.5px rgba(0, 0, 0, 0.5))",
      }}
    >
      <Title order={6} size={16}>
        Statuses and policies
      </Title>
      <BuildTable
        data={tableProps.data}
        columns={columns}
        totalRows={tableProps.totalRows}
        columnPinning={{
          left: ["ext_account_status_id", "account_status_name"],
        }}
        onRowClick={handleRowClick}
      />
      <StatusPolicyDrawer
        openDrawer={openDrawer}
        onDrawerClose={handleDrawerClose}
        statusPolicy={selectedStatusPolicy}
      />
    </Stack>
  );
};

const StatusPolicyDrawer: React.FC<{
  openDrawer: boolean;
  onDrawerClose: () => void;
  statusPolicy: MembershipClubStatusPolicies | null;
}> = ({ openDrawer, onDrawerClose, statusPolicy }) => {
  if (!statusPolicy) {
    return null;
  }

  return (
    <Drawer
      position="right"
      opened={openDrawer}
      onClose={onDrawerClose}
      size={"xl"}
      overlayProps={{ backgroundOpacity: 0.5, blur: 4 }}
    >
      <Stack gap={24}>
        <Group>
          <Text>Account Status:</Text>
          <Title order={6}>
            {statusPolicy.account_status_name} -{" "}
            {statusPolicy.ext_account_status_id}
          </Title>
        </Group>
        <Stack gap={16}>
          <Title order={5}>Access Policies</Title>
          <form>
            <Stack gap={40}>
              <Stack gap={8}>
                <Text fw={"bold"} fz={14}>
                  Users Access Policy
                </Text>
                <Grid columns={2}>
                  <Grid.Col span={1}>
                    <NativeSelect
                      label="Login Access"
                      value={statusPolicy.login ? "true" : "false"}
                      data={[
                        {
                          label: "Yes",
                          value: "true",
                        },
                        {
                          label: "Deny",
                          value: "false",
                        },
                      ]}
                    />
                  </Grid.Col>
                  <Grid.Col span={1}>
                    <NativeSelect
                      label="Profile Access"
                      value={statusPolicy.profile}
                      data={[
                        {
                          label: "All",
                          value: "all",
                        },
                        {
                          label: "Block",
                          value: "block",
                        },
                        {
                          label: "Read",
                          value: "read",
                        },
                      ]}
                    />
                  </Grid.Col>
                </Grid>
              </Stack>
              <Stack gap={8}>
                <Text fw={"bold"} fz={14}>
                  Internal Access Policy
                </Text>
                <Grid columns={2}>
                  <Grid.Col span={1}>
                    <NativeSelect
                      label="Destination Booking Access"
                      value={statusPolicy.destination_booking}
                      data={[
                        {
                          label: "All",
                          value: "all",
                        },
                        {
                          label: "Read",
                          value: "read",
                        },
                        {
                          label: "Block",
                          value: "block",
                        },
                      ]}
                    />
                  </Grid.Col>
                  <Grid.Col span={1}>
                    <NativeSelect
                      label="Curated Event Booking Access"
                      value={statusPolicy.curated_event_booking}
                      data={[
                        {
                          label: "All",
                          value: "all",
                        },
                        {
                          label: "Read",
                          value: "read",
                        },
                        {
                          label: "Block",
                          value: "block",
                        },
                      ]}
                    />
                  </Grid.Col>
                </Grid>
              </Stack>
              <Stack gap={8}>
                <Text fw={"bold"} fz={14}>
                  External Access Policy
                </Text>
                <Grid columns={2}>
                  <Grid.Col span={1}>
                    <NativeSelect
                      label="Reciprocal Partners Access"
                      value={statusPolicy.reciprocal_partners}
                      data={[
                        {
                          label: "WRITE",
                          value: "WRITE",
                        },
                        {
                          label: "READ",
                          value: "READ",
                        },
                        {
                          label: "BLOCK",
                          value: "BLOCK",
                        },
                      ]}
                    />
                  </Grid.Col>
                  <Grid.Col span={1}>
                    <NativeSelect
                      label="Karma Alliance Access"
                      value={statusPolicy.karma_alliance}
                      data={[
                        {
                          label: "WRITE",
                          value: "WRITE",
                        },
                        {
                          label: "READ",
                          value: "READ",
                        },
                        {
                          label: "BLOCK",
                          value: "BLOCK",
                        },
                      ]}
                    />
                  </Grid.Col>
                  <Grid.Col span={1}>
                    <NativeSelect
                      label="Karma Getaways Access"
                      value={statusPolicy.karma_getaway}
                      data={[
                        {
                          label: "WRITE",
                          value: "WRITE",
                        },
                        {
                          label: "READ",
                          value: "READ",
                        },
                        {
                          label: "BLOCK",
                          value: "BLOCK",
                        },
                      ]}
                    />
                  </Grid.Col>

                  <Grid.Col span={1}>
                    <NativeSelect
                      label="Karma Nomad Access"
                      value={statusPolicy.karma_nomad}
                      data={[
                        {
                          label: "WRITE",
                          value: "WRITE",
                        },
                        {
                          label: "READ",
                          value: "READ",
                        },
                        {
                          label: "BLOCK",
                          value: "BLOCK",
                        },
                      ]}
                    />
                  </Grid.Col>
                  <Grid.Col span={1}>
                    <NativeSelect
                      label="Karma Registry Collection Access"
                      value={statusPolicy.karma_registry_collection}
                      data={[
                        {
                          label: "WRITE",
                          value: "WRITE",
                        },
                        {
                          label: "READ",
                          value: "READ",
                        },
                        {
                          label: "BLOCK",
                          value: "BLOCK",
                        },
                      ]}
                    />
                  </Grid.Col>
                  <Grid.Col span={1}>
                    <NativeSelect
                      label="KWE/RCI Exchange Access"
                      value={statusPolicy.rci_exchange}
                      data={[
                        {
                          label: "WRITE",
                          value: "WRITE",
                        },
                        {
                          label: "READ",
                          value: "READ",
                        },
                        {
                          label: "BLOCK",
                          value: "BLOCK",
                        },
                      ]}
                    />
                  </Grid.Col>
                  <Grid.Col span={1}>
                    <NativeSelect
                      label="KNE/RCI Rental Access"
                      value={statusPolicy.rci_rental}
                      data={[
                        {
                          label: "WRITE",
                          value: "WRITE",
                        },
                        {
                          label: "READ",
                          value: "READ",
                        },
                        {
                          label: "BLOCK",
                          value: "BLOCK",
                        },
                      ]}
                    />
                  </Grid.Col>
                  <Grid.Col span={1}>
                    <NativeSelect
                      label="241 Rewards Access"
                      value={statusPolicy.twoforone}
                      data={[
                        {
                          label: "WRITE",
                          value: "WRITE",
                        },
                        {
                          label: "READ",
                          value: "READ",
                        },
                        {
                          label: "BLOCK",
                          value: "BLOCK",
                        },
                      ]}
                    />
                  </Grid.Col>
                  <Grid.Col span={1}>
                    <NativeSelect
                      label="Member Privileges Travels Access"
                      value={statusPolicy.member_privileges_travel}
                      data={[
                        {
                          label: "WRITE",
                          value: "WRITE",
                        },
                        {
                          label: "READ",
                          value: "READ",
                        },
                        {
                          label: "BLOCK",
                          value: "BLOCK",
                        },
                      ]}
                    />
                  </Grid.Col>
                </Grid>
              </Stack>
              <Stack gap={8}>
                <Text fw={"bold"} fz={14}>
                  Offers Access Policy
                </Text>
                <Grid columns={2}>
                  <Grid.Col span={1}>
                    <NativeSelect
                      label="Hot Deals Access"
                      value={statusPolicy.hot_deals}
                      data={[
                        {
                          label: "WRITE",
                          value: "WRITE",
                        },
                        {
                          label: "READ",
                          value: "READ",
                        },
                        {
                          label: "BLOCK",
                          value: "BLOCK",
                        },
                      ]}
                    />
                  </Grid.Col>

                  <Grid.Col span={1}>
                    <NativeSelect
                      label="Karma Alliance(Offers) Access"
                      value={statusPolicy.karma_alliance_offers}
                      data={[
                        {
                          label: "WRITE",
                          value: "WRITE",
                        },
                        {
                          label: "READ",
                          value: "READ",
                        },
                        {
                          label: "BLOCK",
                          value: "BLOCK",
                        },
                      ]}
                    />
                  </Grid.Col>

                  <Grid.Col span={1}>
                    <NativeSelect
                      label="Karma Getaways(Offers) Access"
                      value={statusPolicy.karma_getaway_offers}
                      data={[
                        {
                          label: "WRITE",
                          value: "WRITE",
                        },
                        {
                          label: "READ",
                          value: "READ",
                        },
                        {
                          label: "BLOCK",
                          value: "BLOCK",
                        },
                      ]}
                    />
                  </Grid.Col>
                </Grid>
              </Stack>
            </Stack>
          </form>
        </Stack>
      </Stack>
    </Drawer>
  );
};

export default ClubStatusPolicies;