import React, { useState, useEffect } from "react";
import axios from 'axios';
import { Dialog,DialogActions,DialogContent,DialogTitle,TextField,Button,MenuItem,Select,InputLabel,FormControl,Typography,
  InputAdornment,Grid,Box,List,ListItem,
} from "@mui/material";
import UploadFileIcon from "@mui/icons-material/UploadFile";
import Divider from '@mui/material/Divider';
import { initialMember } from "./Columns";
import { apiConfig } from '@/config/api.config';
import ConfirmDialog from '@/components/confirm';
import { toast } from 'sonner';
const BASE_URL_MASTER_DATA = apiConfig.service_master_data;
const BASE_URL_CUSTOMER = apiConfig.service_customer;
// MAIN PAGE
const CustomerDialog = ({ open, handleClose, handleSubmit, initialData, viewStats, handleReject, page, fetchCustomers }: any) => {
  const [formData, setFormData] = useState(initialData || initialMember);
  const [viewOnly, setViewOnly] = useState(viewStats || false);
  const [municipios, setMunicipios] = useState([]);
  const [aldeias, setAldeias] = useState([]);
  const [postoAdm, setPostoAdm] = useState([]);
  const [sucos, setSucos] = useState([]);
  const [profession, setProfession] = useState([]);
  const [groupData] = useState({
    reguler: `This fill can not be empty!`,
    premium: `This field required only for Premium or Agent`,
    agent: `This field required only for Agent`
  })
  
  useEffect(() => {
    setFormData(initialData || {}); // Sync formData when initialData changes
    fetchMasterData()
  }, [initialData]);

  async function fetchMasterData() {
    try {
      let getProfession = await axios.get(`${BASE_URL_MASTER_DATA}/profession/list`, {
        params: {
          limit: 50,
          page: 1,
          with_deleted: false,
          order_field: 'name',
          order_direction: 'ASC',
        }
      });
      setProfession(getProfession.data.data.list)
      let getMunicipios = await axios.get(`${BASE_URL_MASTER_DATA}/municipios/list`, {
        params: {
          limit: 50,
          page: 1,
          with_deleted: false,
          order_field: 'name',
          order_direction: 'ASC',
        }
      });
      setMunicipios(getMunicipios.data.data.list)
      let getPostoAdms = await axios.get(`${BASE_URL_MASTER_DATA}/postoadms/list`, {
        params: {
          limit: 50,
          page: 1,
          with_deleted: false,
          order_field: 'name',
          order_direction: 'ASC',
        }
      });
      setPostoAdm(getPostoAdms.data.data.list)
      let getSucos = await axios.get(`${BASE_URL_MASTER_DATA}/sucos/list`, {
        params: {
          limit: 50,
          page: 1,
          with_deleted: false,
          order_field: 'name',
          order_direction: 'ASC',
        }
      });
      setSucos(getSucos.data.data.list)
      let getAldeias = await axios.get(`${BASE_URL_MASTER_DATA}/aldeias/list`, {
        params: {
          limit: 50,
          page: 1,
          with_deleted: false,
          order_field: 'name',
          order_direction: 'ASC',
        }
      });
      setAldeias(getAldeias.data.data.list)
    } catch (error) {
      console.log(error);
    }
  }

  const handleChange = async (e: any) => {
    const { name, value } = e.target;
    if (name === 'municipio' || name === 'posto_adms' || name === 'suco') await getMasterAfter(name, value);
    if (name === "file_selfie" || name === "photouser" || name === 'file_document_id' || name === "file_document_id_selfie" ||
      name === "file_commercial_license") { // FOR FILE ONLY
      setFormData({ ...formData, [name]: e.target.files[0] });
    } else {
      setFormData({ ...formData, [name]: value });
    }
  };

  async function getMasterAfter(name: string, id: any) {
    if (name === 'municipio') {
      let getMunicipiosPosto = await axios.get(`${BASE_URL_MASTER_DATA}/municipios/postoadms/${id}`, {
        params: {
          limit: 50,
          page: 1,
          with_deleted: false,
          order_field: 'name',
          order_direction: 'ASC',
        }
      });
      setPostoAdm(getMunicipiosPosto.data.data)
    }
    if (name === 'posto_adms') {
      let getPostoSuco = await axios.get(`${BASE_URL_MASTER_DATA}/postoadms/sucos/${id}`, {
        params: {
          limit: 50,
          page: 1,
          with_deleted: false,
          order_field: 'name',
          order_direction: 'ASC',
        }
      });
      setSucos(getPostoSuco.data.data)
    }
    if (name === 'suco') {
      let getSucoAldeias = await axios.get(`${BASE_URL_MASTER_DATA}/sucos/aldeias/${id}`, {
        params: {
          limit: 50,
          page: 1,
          with_deleted: false,
          order_field: 'name',
          order_direction: 'ASC',
        }
      });
      setAldeias(getSucoAldeias.data.data)
    }
  }

  const onSubmit = () => {
    if (page === 'kyc' && !formData.description) return toast.warning(`Description for approval needed!`)
    handleSubmit(formData);
    // handleClose();
  };

  const onReject = () => {
    handleReject(formData);
    handleClose();
  }

  function generateDate(date: any, type: any) {
    if (!date) return ''
    const today = new Date(date);
    if (type === 'datetime') return today.toISOString().replace('T', ' ').substring(0, 19);
    return today.toISOString().split('T')[0];
  }

  return (
    <Dialog open={open} onClose={handleClose} fullWidth maxWidth="sm">
      <DialogTitle>Customer Form ({viewOnly ? 'View' : 'Edit'})</DialogTitle>
      <DialogContent>
        <div className="flex justify-between pb-5">
          <Typography sx={{color:'grey'}}>Customer Data</Typography>
          <Typography sx={{color:'grey'}} display="flex" justifyContent="flex-end">Created: {generateDate(formData.created_at, 'datetime')}</Typography>
        </div>
        {
          formData.isneedapproval == 1 ? (
          <div className="flex justify-between pb-5">
            <Typography sx={{color:'orange'}}>User Request for approval </Typography>
          </div>
          ) : ('')
        }

        <TextField disabled={viewOnly} required multiline fullWidth margin="dense" label="Full Name" name="fullname" value={formData.fullname} onChange={handleChange} />
        {/* <Typography fontSize={13} paddingLeft={2} marginTop={-2.5} color="red">{groupData.reguler}</Typography> */}
        <TextField disabled={viewOnly} required fullWidth margin="dense" label="Email" name="email" value={formData.email} onChange={handleChange} />
        <TextField disabled fullWidth required margin="dense" label="Group" name="group" value={formData.group_name} onChange={handleChange} />
        {fileTextFile("Photo", formData.photouser, "photouser", handleChange)}
        <TextField disabled={viewOnly} required fullWidth margin="dense" label="Username" name="username" value={formData.username} onChange={handleChange} />
        <TextField disabled={viewOnly} required fullWidth margin="dense" label="Mother Fullname" name="mother_fullname" value={formData.mother_fullname} onChange={handleChange} />
        <TextField disabled={viewOnly} required fullWidth margin="dense" label="MSISDN" name="msisdn" value={formData.msisdn} onChange={handleChange} />
        <TextField disabled={viewOnly} required fullWidth margin="dense" label="Address" name="address" value={formData.address} onChange={handleChange} />
        <TextField disabled={viewOnly} required fullWidth margin="dense" label="Nationality" name="nationality" value={formData.nationality} onChange={handleChange} />
        <TextField disabled={viewOnly} required fullWidth margin="dense" label="Date of Birth" name="date_birth" type="date" value={generateDate(formData.date_birth, null)} onChange={handleChange} InputLabelProps={{ shrink: true }} />
        <FormControl required fullWidth margin="dense">
          <InputLabel>Gender</InputLabel>
          <Select required disabled={viewOnly} name="gender" value={formData.gender} onChange={handleChange}>
            <MenuItem key={1} value="M">Male</MenuItem>
            <MenuItem key={2} value="F">Female</MenuItem>
          </Select>
        </FormControl>
        <FormControl fullWidth margin="dense">
          <InputLabel>Identity Type</InputLabel>
          <Select disabled={viewOnly} name="identity_type" value={formData.identity_type} onChange={handleChange}>
            <MenuItem key={1} value="eleitoral_id">Eleitoral ID</MenuItem>
            <MenuItem key={2} value="bihete_de_identidade">Bihete de Identidade</MenuItem>
            <MenuItem key={3} value="passport">Passport</MenuItem>
          </Select>
        </FormControl>
        
        {/* AGENT & PREMIUM DATA */}
        <TextField disabled={viewOnly} fullWidth margin="dense" label="Identity Number" name="identity_number" value={formData.identity_number} onChange={handleChange} />
        <TextField disabled={viewOnly} type="text" fullWidth margin="dense" label="License Number" name="license_number" value={formData.license_number} onChange={handleChange} />
        <TextField disabled={viewOnly} type="text" fullWidth margin="dense" label="Merchant Address" name="merchantaddress" value={formData.merchantaddress} onChange={handleChange} />
        <TextField disabled={viewOnly} type="text" fullWidth margin="dense" label="Longitude Merchant" name="longitudemerchant" value={formData.longitudemerchant} onChange={handleChange} />
        <TextField disabled={viewOnly} type="text" fullWidth margin="dense" label="Latitude Merchant" name="latitudemerchant" value={formData.latitudemerchant} onChange={handleChange} />
        {fileTextFile("File Selfie", formData.file_selfie, "file_selfie", handleChange)}
        <img width={300} height={250} srcSet={formData.file_selfie} src={formData.file_selfie} alt={"file_selfie"} style={{borderRadius: 10}}/>
        {fileTextFile("File Document", formData.file_document_id, "file_document_id", handleChange)}
        <img width={300} height={250} srcSet={formData.file_document_id} src={formData.file_document_id} alt={"file_document_id"} style={{borderRadius: 10}}/>
        {fileTextFile("File Document & Selfie", formData.file_document_id_selfie, "file_document_id_selfie", handleChange)}
        <img width={300} height={250} srcSet={formData.file_document_id_selfie} src={formData.file_document_id_selfie} alt={"file_document_id_selfie"} style={{borderRadius: 10}}/>
        {fileTextFile("File Commercial License", formData.file_commercial_license, "file_commercial_license", handleChange)}
        <img width={300} height={250} srcSet={formData.file_commercial_license} src={formData.file_commercial_license} alt={"file_commercial_license"} style={{borderRadius: 10}}/>
        {/* AGENT & PREMIUM DATA */}
        
        {/* <TextField disabled={viewOnly} fullWidth margin="dense" label="Profession" name="profession" value={formData.profession} onChange={handleChange} /> */}
        <FormControl fullWidth margin="dense">
          <InputLabel>Profession</InputLabel>
          <Select disabled={viewOnly} name="profession" value={formData.profession} onChange={handleChange}>
            {
              profession ? profession.map((el: any) => (
                <MenuItem key={el.id} value={el.id}>{el.name}</MenuItem>
              )) : ""
            }
          </Select>
        </FormControl>
        {/* <TextField fullWidth margin="dense" label="Password" name="password" type="password" value={formData.password} onChange={handleChange} /> */}
        {/* <TextField fullWidth margin="dense" label="PIN" name="pin" value={formData.pin} onChange={handleChange} /> */}
        <FormControl fullWidth margin="dense">
          <InputLabel>Status</InputLabel>
          <Select disabled={viewOnly} name="status" value={formData.status} onChange={handleChange}>
            <MenuItem key={1} value="Y">Active</MenuItem>
            <MenuItem key={2} value="N">Inactive</MenuItem>
          </Select>
        </FormControl>
        
        <FormControl fullWidth margin="dense">
          <InputLabel>Municipio</InputLabel>
          <Select disabled={viewOnly} name="municipio" value={formData.municipio} onChange={handleChange}>
            {
              municipios ? municipios.map((el: any) => (
                <MenuItem key={el.id} value={el.id}>{el.name}</MenuItem>
              )) : ""
            }
          </Select>
        </FormControl>
        
        <FormControl fullWidth margin="dense">
          <InputLabel>Posto</InputLabel>
          <Select disabled={viewOnly || !formData.municipio} name="posto_adms" value={formData.posto_adms} onChange={handleChange}>
            {
              postoAdm ? postoAdm.map((el: any) => (
                <MenuItem key={el.posto_adms_id || el.id} value={el.posto_adms_id || el.id}>{el.posto_adms_name || el.name}</MenuItem>
              )) : ""
            }
          </Select>
        </FormControl>

        <FormControl fullWidth margin="dense">
          <InputLabel>Suco</InputLabel>
          <Select disabled={viewOnly || !formData.posto_adms} name="suco" value={formData.suco} onChange={handleChange}>
            {
              sucos ? sucos.map((el: any) => (
                <MenuItem key={el.sucos_id || el.id} value={el.sucos_id || el.id}>{el.sucos_name || el.name}</MenuItem>
              )) : ""
            }
          </Select>
        </FormControl>

        <FormControl fullWidth margin="dense">
          <InputLabel>Aldeia</InputLabel>
          <Select disabled={viewOnly || !formData.suco} name="aldeia" value={formData.aldeia} onChange={handleChange}>
            {
              aldeias ? aldeias.map((el: any) => (
                <MenuItem key={el.id} value={el.id}>{el.name}</MenuItem>
              )) : ""
            }
          </Select>
        </FormControl>

        <Divider className="pt-7"/>
        <Typography sx={{color:'grey'}}>Bank</Typography>
        <FormControl fullWidth margin="dense">
          <InputLabel>Bank Name</InputLabel>
          <Select disabled={viewOnly} name="bank_name" value={formData.bank_name} onChange={handleChange}>
            <MenuItem key={1} value="BNCTL">BNCTL</MenuItem>
            <MenuItem key={2} value="BRI">BRI</MenuItem>
            <MenuItem key={3} value="BNU">BNU</MenuItem>
            <MenuItem key={4} value="Mandiri">Mandiri</MenuItem>
          </Select>
        </FormControl>
        <TextField disabled={viewOnly} fullWidth margin="dense" label="Bank Account" name="bank_account" value={formData.bank_account} onChange={handleChange} />
        <TextField disabled={viewOnly} fullWidth margin="dense" label="iBank Number" name="ibank_number" value={formData.ibank_number} onChange={handleChange} />
        <Divider className="pt-7"/>
        {/* {getAdmAccess(page, formData, handleClose, fetchCustomers)} */}
        {
          page === 'kyc' ? (
            <>
              <Typography sx={{color:'grey'}}>Approval</Typography>
              <TextField fullWidth required={page === 'kyc'?true:false} margin="dense" label="Approval Description" name="description" value={formData.description} onChange={handleChange} />
            </>
          ) : (<>
            {getAdmAccess(page, formData, handleClose, fetchCustomers, viewOnly, setViewOnly)}
            <Divider className="pt-7"/>
            {formData.id ? showCustomerWallet(formData.id) : ""}
          </>)
        }
      </DialogContent>
      <DialogActions>
        {
          page === 'kyc' ? (
            <Button onClick={() => viewOnly ? setViewOnly(false) : setViewOnly(true)} color="secondary">{ viewOnly ? (`Open Edit`) : (`Close Edit`) }</Button>
          ) : ('')
        }
        <Button onClick={handleClose} color="secondary">Cancel</Button>
        {
          formData.isneedapproval == 1 && page === 'kyc' ? (
            <Button onClick={onReject} color="warning" variant="contained">Reject</Button>
          ) : ('')
        }
        <Button onClick={onSubmit} color="primary" variant="contained">
          { formData.id ? (formData.isneedapproval == 1 && page === 'kyc' ? (`Edit & Approve`) : (`Edit`)) : ("Create") }
        </Button>
      </DialogActions>
    </Dialog>
  );
};

export default CustomerDialog;

function fileTextFile(label: string, value: any, name: string, handleChange: any) {
  return (
    <TextField
      margin="dense"
      label={label}
      variant="outlined"
      fullWidth
      value={value}
      placeholder="Choose a file..."
      InputProps={{
        readOnly: true,
        endAdornment: (
          <InputAdornment position="end">
            <input
              type="file"
              id="file-upload"
              // style={{ display: "none" }}
              onChange={handleChange}
              name={name}
            />
            {/* <label htmlFor="file-upload">
              <Button
                component="span"
                variant="contained"
                color="primary"
                startIcon={<UploadFileIcon />}
              >
                Browse
              </Button>
            </label> */}
          </InputAdornment>
        ),
      }}
    />
  )
}
// ACCESS ADM
function getAdmAccess(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) {
      console.error(error.message);
      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")
        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' })
        toast.success("Pin will send to customer MSISDN")
      }
    } catch (error: any) {
      toast.error(error.message)
    } finally {
      setDialogOpen(false)
      handleClose()
    }
  }

  function buttonStatus() {
    setDialogType('update status')
    setDialogOpen(true)
  }

  function buttonResetPin() {
    setDialogType('reset pin')
    setDialogOpen(true)
  }
  
  async function buttonChangeGroup() {
    try {
      let dataObj = {
        customerid: data.id,
        destination_group: changeGroup
      }
      if (data.group_id === changeGroup) return toast.warning(`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)
      }
      await fetchCustomers()
      toast.success('Success Change group')
    } catch (error: any) {
      console.log(error);
      toast.error(error.message)
    } finally {
      await fetchCustomers()
      setChangeGroupD(false)
      handleClose()
    }
  }

  function openChangeGroupDialog() {
    setChangeGroup(data.group_id);
    setChangeGroupD(true)
  }

  if (page !== "kyc") {
    return (
      <Box p={3} boxShadow={3} borderRadius={2} bgcolor="white">
        <Typography variant="h6" gutterBottom>Access Administration</Typography>
        <Grid container spacing={3}>
          <Grid item xs={6} container direction="column" spacing={2}>
            <Grid item>
              <Typography variant="body2">Pin Status : {getPinStatus(data.status).msg}</Typography>
              <Button onClick={() => buttonStatus()} variant="contained" color="primary">{getPinStatus(data.status).btn}</Button>
            </Grid>
            <Grid item>
              <Typography variant="body2">Reset PIN</Typography>
              <Button onClick={() => buttonResetPin()} variant="contained" color="primary">Reset PIN</Button>
            </Grid>
          </Grid>
          <Grid item xs={6} container direction="column" spacing={2}>
            <Grid item>
              <Typography variant="body2">Change Group</Typography>
              <Button onClick={() => openChangeGroupDialog()} variant="contained" color="primary">Change Group</Button>
            </Grid>
            <Grid item>
              <Typography variant="body2">Edit Member</Typography>
              {/* <Button variant="contained" color="primary">Edit Member</Button> */}
              <Button onClick={() => viewOnly ? setViewOnly(false) : setViewOnly(true)} variant="contained">{ viewOnly ? (`Open Edit`) : (`Close Edit`) }</Button>
            </Grid>
          </Grid>
        </Grid>

        <Dialog open={changeGroupD} onClose={() => setChangeGroupD(false)} fullWidth>
          <Grid container padding={3}>
            <Typography variant="h6" gutterBottom color="orange">Are you sure to change customer Group?</Typography>
            <FormControl fullWidth margin="dense">
            <Typography gutterBottom>Destination Group</Typography>
              <Select name="groups" value={changeGroup} onChange={(e: any) => setChangeGroup(e.target.value)}>
                {
                  groups ? groups.map((el: any) => (
                    <MenuItem key={el.id} value={el.id}>{el.name}</MenuItem>
                  )) : ""
                }
              </Select>
            </FormControl>
          </Grid>
          <DialogActions>
            <Button onClick={() => setChangeGroupD(false)} color="secondary">
              No
            </Button>
            <Button onClick={buttonChangeGroup} color="primary">
              Yes
            </Button>
          </DialogActions>
        </Dialog>
        
        <ConfirmDialog
          open={dialogOpen}
          onClose={() => setDialogOpen(false)}
          title="Confirm Action"
          content={`Are you sure you want to ${dialogType}?`}
          onYes={handleYes}
          onNo={() => setDialogOpen(false)}
        />
      </Box>
    )
  } 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
  }
}
// CUSTOMER WALLET
function showCustomerWallet(customerid: any) {
  const [customerWallet, setCustomerWallet] = useState([]);
  if (!customerid) return ''
  
  useEffect(() => {
    fetchCustomerWallet()
  }, []);

  async function fetchCustomerWallet() {
    try {
      let getCustWallet = await axios.get(`${BASE_URL_CUSTOMER}/customer/wallet`, { params: { customerid: customerid }});
      setCustomerWallet(getCustWallet.data.data.wallets)
    } catch (error: any) {
      toast.error(error.message)
    }
  }

  return (
    <Box p={3} boxShadow={3} borderRadius={2} bgcolor="white">
      <Typography variant="h6" gutterBottom>Wallet Member</Typography>
      <Grid>
        <List>
          {customerWallet.length ? (customerWallet.map((item:any, index:any) => (
            <React.Fragment key={item.id}>
              <ListItem
                sx={{
                  display: 'flex',
                  flexDirection: 'row',
                  justifyContent: 'space-between',
                  alignItems: 'center',
                  px: 2,
                  py: 1.5,
                  bgcolor: index % 2 === 0 ? 'grey.50' : 'background.paper',
                  borderRadius: 2,
                  '&:hover': {
                    bgcolor: 'grey.100',
                  },
                }}
              >
                <Box>
                  <Typography variant="subtitle2" color="text.secondary">
                    Name
                  </Typography>
                  <Typography variant="body1" fontWeight={500}>
                    {item.wallet.name}
                  </Typography>
                </Box>
                <Box>
                  <Typography variant="subtitle2" color="text.secondary">
                    Description
                  </Typography>
                  <Typography variant="body1">{item.wallet.description}</Typography>
                </Box>
                <Box>
                  <Typography variant="subtitle2" color="text.secondary">
                    Transaction Today
                  </Typography>
                  <Typography variant="body1">{item.transaction_number_today}</Typography>
                </Box>
              </ListItem>
              {index < customerWallet.length - 1 && <Divider sx={{ my: 1 }} />}
            </React.Fragment>
          ))): "No wallet"}
        </List>
      </Grid>
    </Box>
  )
}