'use client'

import Dialog from '@mui/material/Dialog'
import DialogTitle from '@mui/material/DialogTitle'
import DialogContent from '@mui/material/DialogContent'
import DialogActions from '@mui/material/DialogActions'
import Button from '@mui/material/Button'
import Stack from '@mui/material/Stack'
import Box from '@mui/material/Box'
import Typography from '@mui/material/Typography'
import MenuItem from '@mui/material/MenuItem'
import CircularProgress from '@mui/material/CircularProgress'

import CustomTextField from '@core/components/mui/TextField'
import type { IOrderCustomerAddress } from '@/types/data'
import { SecondaryAction } from './orderConstants'

interface OrderActionDialogProps {
  open: boolean
  onClose: () => void
  action: SecondaryAction | null
  t: (key: string) => string
  onSubmit: () => void
  loading: boolean
  disabled: boolean
  numericValue: string
  setNumericValue: (value: string) => void
  taxRate: string
  setTaxRate: (value: string) => void
  taxAmount: string
  setTaxAmount: (value: string) => void
  notesValue: string
  setNotesValue: (value: string) => void
  addressForm: IOrderCustomerAddress
  setAddressForm: React.Dispatch<React.SetStateAction<IOrderCustomerAddress>>
  tableId: string
  setTableId: (value: string) => void
  tablesDropdown: Array<{ id: string; display_name?: string; table_number: string }> | undefined
  estimateForm: { estimated_delivery_time: string; pickup_time: string }
  setEstimateForm: React.Dispatch<React.SetStateAction<{ estimated_delivery_time: string; pickup_time: string }>>
  cancelReason: string
  setCancelReason: (value: string) => void
}

const OrderActionDialog = ({
  open,
  onClose,
  action,
  t,
  onSubmit,
  loading,
  disabled,
  numericValue,
  setNumericValue,
  taxRate,
  setTaxRate,
  taxAmount,
  setTaxAmount,
  notesValue,
  setNotesValue,
  addressForm,
  setAddressForm,
  tableId,
  setTableId,
  tablesDropdown,
  estimateForm,
  setEstimateForm,
  cancelReason,
  setCancelReason
}: OrderActionDialogProps) => {
  const getDialogTitle = () => {
    switch (action) {
      case 'delivery_fee':
        return t('actions.deliveryFee')
      case 'service_fee':
        return t('actions.serviceFee')
      case 'tax':
        return t('actions.tax')
      case 'discount':
        return t('actions.discount')
      case 'notes':
        return t('actions.notes')
      case 'address':
        return t('actions.address')
      case 'table':
        return t('actions.table')
      case 'estimate':
        return t('actions.estimate')
      case 'cancel':
        return t('actions.cancel')
      default:
        return ''
    }
  }

  const renderContent = () => {
    switch (action) {
      case 'delivery_fee':
      case 'service_fee':
      case 'discount':
        return (
          <CustomTextField
            type='number'
            label={t('actions.amount')}
            value={numericValue}
            onChange={e => setNumericValue(e.target.value)}
            fullWidth
          />
        )
      case 'tax':
        return (
          <Stack spacing={2}>
            <CustomTextField
              type='number'
              label={t('actions.taxRate')}
              value={taxRate}
              onChange={e => setTaxRate(e.target.value)}
            />
            <CustomTextField
              type='number'
              label={t('actions.taxAmount')}
              value={taxAmount}
              onChange={e => setTaxAmount(e.target.value)}
            />
          </Stack>
        )
      case 'notes':
        return (
          <CustomTextField
            multiline
            rows={4}
            label={t('actions.notesField')}
            value={notesValue}
            onChange={e => setNotesValue(e.target.value)}
            fullWidth
          />
        )
      case 'address':
        return (
          <Stack spacing={2}>
            <CustomTextField
              label={t('actions.addressLine')}
              value={addressForm.address_line || ''}
              onChange={e => setAddressForm(prev => ({ ...prev, address_line: e.target.value }))}
            />
            <CustomTextField
              label={t('actions.area')}
              value={addressForm.area || ''}
              onChange={e => setAddressForm(prev => ({ ...prev, area: e.target.value }))}
            />
            <CustomTextField
              label={t('actions.city')}
              value={addressForm.city || ''}
              onChange={e => setAddressForm(prev => ({ ...prev, city: e.target.value }))}
            />
            <CustomTextField
              label={t('actions.notesField')}
              value={addressForm.notes || ''}
              onChange={e => setAddressForm(prev => ({ ...prev, notes: e.target.value }))}
            />
          </Stack>
        )
      case 'table':
        return (
          <CustomTextField
            select
            label={t('actions.table')}
            value={tableId}
            onChange={e => setTableId(e.target.value)}
            fullWidth
          >
            <MenuItem value=''>{t('actions.unassignTable')}</MenuItem>
            {(tablesDropdown || []).map(table => (
              <MenuItem key={table.id} value={table.id}>
                {table.display_name || table.table_number}
              </MenuItem>
            ))}
          </CustomTextField>
        )
      case 'estimate':
        return (
          <Stack spacing={2}>
            <CustomTextField
              type='datetime-local'
              label={t('actions.estimatedDelivery')}
              value={estimateForm.estimated_delivery_time || ''}
              onChange={e => setEstimateForm(prev => ({ ...prev, estimated_delivery_time: e.target.value }))}
            />
            <CustomTextField
              type='datetime-local'
              label={t('actions.pickupTime')}
              value={estimateForm.pickup_time || ''}
              onChange={e => setEstimateForm(prev => ({ ...prev, pickup_time: e.target.value }))}
            />
          </Stack>
        )
      case 'cancel':
        return (
          <CustomTextField
            multiline
            rows={3}
            label={t('actions.cancellationReason')}
            value={cancelReason}
            onChange={e => setCancelReason(e.target.value)}
          />
        )
      default:
        return null
    }
  }

  return (
    <Dialog open={open} onClose={onClose} maxWidth='sm' fullWidth>
      <DialogTitle>
        <Stack direction='row' spacing={2} alignItems='center'>
          <Box
            sx={{
              width: 40,
              height: 40,
              borderRadius: 2,
              bgcolor: 'primary.lighter',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center'
            }}
          >
            <i className='tabler-edit text-xl' style={{ color: 'var(--mui-palette-primary-main)' }} />
          </Box>
          <Typography variant='h6' fontWeight={600}>
            {getDialogTitle()}
          </Typography>
        </Stack>
      </DialogTitle>
      <DialogContent>{renderContent()}</DialogContent>
      <DialogActions>
        <Button onClick={onClose} variant='outlined'>
          {t('cancel')}
        </Button>
        <Button
          onClick={onSubmit}
          variant='contained'
          disabled={disabled}
          startIcon={loading ? <CircularProgress size={16} color='inherit' /> : <i className='tabler-device-floppy' />}
        >
          {t('save')}
        </Button>
      </DialogActions>
    </Dialog>
  )
}

export default OrderActionDialog
