'use client'

// MUI Imports
import Card from '@mui/material/Card'
import CardContent from '@mui/material/CardContent'
import Typography from '@mui/material/Typography'
import Chip from '@mui/material/Chip'
import Divider from '@mui/material/Divider'

// Component Imports
import CustomAvatar from '@core/components/mui/Avatar'
import { useParams } from 'next/navigation'
import { useVendorById } from '@/services/queries/vendor'
import Loading from '@/components/layout/shared/Loading'
import { getInitials } from '@/utils/getInitials'
import OpenDialogOnElementClick from '@/components/dialogs/OpenDialogOnElementClick'
import { Box, Button, ButtonProps, CircularProgress } from '@mui/material'
import ConfirmationDialog from '@/components/dialogs/confirmation-dialog'
import EditUserInfo from '@/components/dialogs/edit-user-info'
import { ThemeColor } from '@/@core/types'
import { useState } from 'react'
import AddVendorDrawer from '../../list/AddVendorDrawer'
import ConfirmDeleteDialog from '@/components/dialogs/confirm-delete'
import { useRouter } from 'next/router'
import { useVendorsMutation } from '@/services/mutations/vendor'

// Vars
const userData = {
  firstName: 'Wadi Adika Adrian',
  lastName: 'Firgantoro',
  userName: '@wadiAdika',
  perusahaan: 'Yayasan Pertiwi Tb',
  email: 'labuh87@napitupu',
  status: 'active',
  role: 'Vendor',
  telepon: '622301190560',
  alamatPenagihan: 'Gg. Sentot Alibasa 381, Cimahi 66726 Sulbar',
  akunHutang: '2-20100 Hutang U',
  akunPiutang: '',
  kenaPajak: 'Kena Pajak'
}

const VendorDetails = () => {
  const [editVendorOpen, setEditVendorOpen] = useState(false)
  const [openConfirm, setOpenConfirm] = useState(false)

  const params = useParams()
  const id = params?.id ?? ''

  const { data: vendor, isLoading, error } = useVendorById(id as string)

  const { deleteVendor } = useVendorsMutation()

  const handleDelete = () => {
    deleteVendor.mutate(id as string, {
      onSuccess: () => {
        setOpenConfirm(false)
        window.history.back()
      }
    })
  }

  const buttonProps = (children: string, color: ThemeColor, variant: ButtonProps['variant']): ButtonProps => ({
    children,
    color,
    variant
  })

  return (
    <>
      {isLoading ? (
        <Box
          position='absolute'
          top={0}
          left={0}
          right={0}
          bottom={0}
          display='flex'
          alignItems='center'
          justifyContent='center'
          bgcolor='rgba(255,255,255,0.7)'
          zIndex={1}
        >
          <CircularProgress size={24} />
        </Box>
      ) : (
        <Card>
          <CardContent className='flex flex-col pbs-12 gap-6'>
            <div className='flex flex-col gap-6'>
              <div className='flex items-center justify-center flex-col gap-4'>
                <div className='flex flex-col items-center gap-4'>
                  {/* <CustomAvatar alt='vendor-profile' variant='rounded' size={120}>
                    {getInitials(vendor?.name as string)}
                  </CustomAvatar> */}
                  <Typography variant='h5'>{vendor?.name}</Typography>
                </div>
                <Chip label='Vendor' color='primary' size='small' variant='tonal' />
              </div>
            </div>

            {/* Detail Kontak Section */}
            <div>
              <Typography variant='h5'>Detail Kontak</Typography>
              <Divider className='mlb-4' />
              <div className='flex flex-col gap-2'>
                <div className='flex items-center flex-wrap gap-x-1.5'>
                  <Typography className='font-medium' color='text.primary'>
                    Contact Person:
                  </Typography>
                  <Typography>{vendor?.contact_person}</Typography>
                </div>
                <div className='flex items-center flex-wrap gap-x-1.5'>
                  <Typography className='font-medium' color='text.primary'>
                    Perusahaan:
                  </Typography>
                  <Typography>{vendor?.name}</Typography>
                </div>
                <div className='flex items-center flex-wrap gap-x-1.5'>
                  <Typography className='font-medium' color='text.primary'>
                    Email:
                  </Typography>
                  <Typography color='primary' sx={{ textDecoration: 'none', cursor: 'pointer' }}>
                    {vendor?.email}
                  </Typography>
                </div>
                <div className='flex items-center flex-wrap gap-x-1.5'>
                  <Typography className='font-medium' color='text.primary'>
                    Telepon:
                  </Typography>
                  <Typography color='primary' sx={{ textDecoration: 'none', cursor: 'pointer' }}>
                    {vendor?.phone_number}
                  </Typography>
                </div>
                <div className='flex items-center flex-wrap gap-x-1.5'>
                  <Typography className='font-medium' color='text.primary'>
                    Alamat Penagihan:
                  </Typography>
                  <Typography color='primary' sx={{ textDecoration: 'none', cursor: 'pointer' }}>
                    {vendor?.address ?? '-'}
                  </Typography>
                </div>
              </div>
            </div>

            {/* Pemetaan Akun Section */}
            <div>
              <Typography variant='h5'>Pemetaan Akun</Typography>
              <Divider className='mlb-4' />
              <div className='flex flex-col gap-2'>
                <div className='flex items-center flex-wrap gap-x-1.5'>
                  <Typography className='font-medium' color='text.primary'>
                    Akun Hutang:
                  </Typography>
                  <Typography color='primary' sx={{ textDecoration: 'none', cursor: 'pointer' }}>
                    {userData.akunHutang}
                  </Typography>
                </div>
                <div className='flex items-center flex-wrap gap-x-1.5'>
                  <Typography className='font-medium' color='text.primary'>
                    Akun Piutang:
                  </Typography>
                  <Typography color='text.secondary'>{userData.akunPiutang || '-'}</Typography>
                </div>
                <div className='flex items-center flex-wrap gap-x-1.5'>
                  <Typography className='font-medium' color='text.primary'>
                    Kena Pajak:
                  </Typography>
                  <Typography color='text.primary'>{userData.kenaPajak}</Typography>
                </div>
              </div>
            </div>
            <div className='flex gap-4 justify-center'>
              <Button variant='contained' onClick={() => setEditVendorOpen(!editVendorOpen)} className='max-sm:is-full'>
                Edit
              </Button>
              <Button
                variant='contained'
                color='error'
                onClick={() => setOpenConfirm(!openConfirm)}
                className='max-sm:is-full'
              >
                Hapus
              </Button>
            </div>
          </CardContent>
        </Card>
      )}
      <AddVendorDrawer open={editVendorOpen} handleClose={() => setEditVendorOpen(!editVendorOpen)} data={vendor} />
      <ConfirmDeleteDialog
        open={openConfirm}
        onClose={() => setOpenConfirm(false)}
        onConfirm={handleDelete}
        isLoading={deleteVendor.isPending}
        title='Delete Vendor'
        message='Are you sure you want to delete this Vendor? This action cannot be undone.'
      />
    </>
  )
}

export default VendorDetails
