import { useState, useEffect } from 'react';
import axios from 'axios';
import { toast } from 'sonner';
import { Button } from '@/components/ui/button';
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle
} from '@/components/ui/dialog';
import {
  Select,
  SelectTrigger,
  SelectContent,
  SelectItem,
  SelectValue
} from '@/components/ui/select';
import { apiConfig } from '@/config/api.config';
import ConfirmDialog from '@/components/confirm';
const BASE_URL_CUSTOMER = apiConfig.service_customer;

// ACCESS ADM
export default function AdmAccess(
  page: string,
  data: any,
  handleClose: any,
  fetchCustomers: any,
  viewOnly: any,
  setViewOnly: any
) {
  const [dialogOpen, setDialogOpen] = useState(false);
  const [dialogType, setDialogType] = useState('');
  const [changeGroup, setChangeGroup] = useState('');
  const [changeGroupD, setChangeGroupD] = useState(false);
  const [groups, setGroups] = useState([]);

  useEffect(() => {
    fetchGroups();
  }, []);

  const fetchGroups = async () => {
    try {
      let getGroups = await axios.get(`${BASE_URL_CUSTOMER}/groups/list`, {
        params: {
          limit: 50,
          page: 1,
          with_deleted: false,
          order_field: 'name',
          order_direction: 'ASC'
        }
      });
      setGroups(getGroups.data.data.list);
    } catch (error: any) {
      toast.error(error.message);
    }
  };

  const handleYes = async () => {
    try {
      if (dialogType === 'update status') {
        let statusNext = getPinStatus(data.status).res;
        if (statusNext)
          await axios.put(`${BASE_URL_CUSTOMER}/customer/statuspin`, {
            customerid: data.id,
            status: statusNext
          });
        else toast.error('Handle Active/Suspend only');
        await fetchCustomers();
        toast.success('Success Update Status');
      }
      if (dialogType === 'reset pin') {
        if (data.id)
          await axios.post(`${BASE_URL_CUSTOMER}/customer/resetpin`, { customerid: data.id });
        else throw { message: 'data.id not found' };
        await fetchCustomers();
        toast.success('Pin will send to customer MSISDN');
      }
    } catch (error: any) {
      toast.error(error.message);
    } finally {
      setDialogOpen(false);
      handleClose();
    }
  };

  function buttonStatus(e: any) {
    e.preventDefault();
    setDialogType('update status');
    setDialogOpen(true);
  }

  function buttonResetPin(e: any) {
    e.preventDefault();
    setDialogType('reset pin');
    setDialogOpen(true);
  }

  async function buttonChangeGroup() {
    try {
      let dataObj = {
        customerid: data.id,
        destination_group: changeGroup
      };
      if (data.group_id === changeGroup)
        throw { message: `You update same group as the exist customer group` };
      if (dataObj.customerid && dataObj.destination_group) {
        await axios.post(`${BASE_URL_CUSTOMER}/customer/change-group`, dataObj);
      }
      toast.success('Success Change group');
      await fetchCustomers();
      setChangeGroupD(false);
      handleClose();
    } catch (error: any) {
      console.log(error);
      toast.error(error.message);
    }
  }

  function openChangeGroupDialog(e: any) {
    e.preventDefault();
    setChangeGroup(data.group_id);
    setChangeGroupD(true);
  }

  function btnConfirmDialog(status: boolean) {
    setDialogOpen(status);
  }

  if (page !== 'kyc') {
    return (
      <div className="bg-white p-6 rounded-md shadow-md space-y-6">
        <h2 className="text-lg font-semibold">Access Administration</h2>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {/* Left Side */}
          <div className="space-y-4">
            <div className="space-y-2">
              <p className="text-sm">Pin Status: {getPinStatus(data.status).msg}</p>
              <Button variant="default" onClick={(e) => buttonStatus(e)}>
                {getPinStatus(data.status).btn}
              </Button>
            </div>
            <div className="space-y-2">
              <p className="text-sm">Reset PIN</p>
              <Button variant="default" onClick={(e) => buttonResetPin(e)}>
                Reset PIN
              </Button>
            </div>
          </div>

          {/* Right Side */}
          <div className="space-y-4">
            <div className="space-y-2">
              <p className="text-sm">Change Group</p>
              <Button variant="default" onClick={(e) => openChangeGroupDialog(e)}>
                Change Group
              </Button>
            </div>
            <div className="space-y-2">
              <p className="text-sm">Edit Member</p>
              <Button variant="default" onClick={() => setViewOnly(!viewOnly)}>
                {viewOnly ? 'Open Edit' : 'Close Edit'}
              </Button>
            </div>
          </div>
        </div>

        {/* Change Group Dialog */}
        <Dialog open={changeGroupD} onOpenChange={setChangeGroupD}>
          <DialogContent>
            <DialogHeader>
              <DialogTitle className="text-orange-500">
                Are you sure to change customer Group?
              </DialogTitle>
            </DialogHeader>

            <div className="space-y-3 p-5">
              <p className="text-sm font-medium">Destination Group</p>
              <Select value={changeGroup} onValueChange={setChangeGroup}>
                <SelectTrigger>
                  <SelectValue placeholder="Select group" />
                </SelectTrigger>
                <SelectContent>
                  {groups?.map((el: any) => (
                    <SelectItem key={el.id} value={el.id}>
                      {el.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            <DialogFooter>
              <Button variant="outline" onClick={() => setChangeGroupD(false)}>
                No
              </Button>
              <Button onClick={buttonChangeGroup}>Yes</Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
        <ConfirmDialog
          open={dialogOpen}
          //   onClose={() => btnConfirmDialog(false)}
          onOpenChange={() => setDialogOpen(false)}
          title="Confirm Action"
          content={`Are you sure you want to ${dialogType}?`}
          onYes={handleYes}
          onNo={() => btnConfirmDialog(false)}
        />
      </div>
    );
  } else {
    return '';
  }
}

function getPinStatus(status: string) {
  if (status === 'Y')
    return {
      msg: 'Active',
      btn: 'Block PIN',
      res: 'Block'
    };
  if (status === 'N')
    return {
      msg: 'Not Active',
      btn: 'Activate PIN',
      res: null
    };
  if (status === 'P')
    return {
      msg: 'Suspend PIN',
      btn: 'Unblock PIN',
      res: 'UnBlock'
    };
  if (status === 'O')
    return {
      msg: 'Suspend OTP',
      btn: 'Unblock OTP',
      res: null
    };
  return {
    msg: 'None',
    btn: 'No status found',
    res: null
  };
}