// src/views/components/product/drawers/AddTaxDrawer.tsx

import React, { useState } from 'react'
import {
  Box,
  Button,
  Typography,
  Drawer,
  IconButton,
  Divider,
  TextField,
  CircularProgress,
  RadioGroup,
  Radio,
  FormControlLabel,
  FormControl,
  FormLabel,
} from '@mui/material'
import Icon from 'src/@core/components/icon'
import { createTax, getErrorMessage } from '../hooks'
import toast from 'react-hot-toast'

interface AddTaxDrawerProps {
  open: boolean
  onClose: () => void
  onSuccess: () => void
}

const AddTaxDrawer = ({ open, onClose, onSuccess }: AddTaxDrawerProps) => {
  const [loading, setLoading] = useState(false)
  const [taxType, setTaxType] = useState('flat')
  const [formData, setFormData] = useState({
    taxName: '',
    taxValue: 0
  })

  const handleSubmit = async () => {
    if (!formData.taxName.trim() || formData.taxValue <= 0) {
      toast.error('Tax name and value are required')
      return
    }
    setLoading(true)
    try {
      const payload = {
        taxName: formData.taxName,
        taxType: taxType,
        taxValue: formData.taxValue
      }
      await createTax(payload)
      toast.success('Tax created successfully')
      onSuccess()
      onClose()
      setFormData({ taxName: '', taxValue: 0 })
      setTaxType('flat')
    } catch (error) {
      toast.error(getErrorMessage(error, 'Failed to create tax'))
    } finally {
      setLoading(false)
    }
  }

  return (
    <Drawer anchor='right' open={open} onClose={onClose}>
      <Box sx={{ width: 400, p: 4 }}>
        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 3 }}>
          <Typography variant='h6'>Add New Tax</Typography>
          <IconButton onClick={onClose}>
            <Icon icon='tabler:x' />
          </IconButton>
        </Box>
        <Divider sx={{ mb: 3 }} />

        <TextField
          fullWidth
          label='Tax Name *'
          value={formData.taxName}
          onChange={(e) => setFormData({ ...formData, taxName: e.target.value })}
          sx={{ mb: 3 }}
        />

        <FormControl component="fieldset" sx={{ mb: 3 }}>
          <FormLabel component="legend">Tax Type</FormLabel>
          <RadioGroup
            row
            value={taxType}
            onChange={(e) => setTaxType(e.target.value)}
          >
            <FormControlLabel value="flat" control={<Radio />} label="Flat" />
            <FormControlLabel value="percentage" control={<Radio />} label="Percentage" />
          </RadioGroup>
        </FormControl>

        <TextField
          fullWidth
          label='Tax Value *'
          type='number'
          value={formData.taxValue}
          onChange={(e) => setFormData({ ...formData, taxValue: parseFloat(e.target.value) || 0 })}
          InputProps={{
            endAdornment: taxType === 'percentage' ? '%' : undefined,
          }}
          sx={{ mb: 3 }}
        />

        <Box sx={{ display: 'flex', gap: 2, justifyContent: 'flex-end' }}>
          <Button variant='outlined' onClick={onClose} disabled={loading}>
            Cancel
          </Button>
          <Button variant='contained' onClick={handleSubmit} disabled={loading}>
            {loading ? <CircularProgress size={24} /> : 'Create Tax'}
          </Button>
        </Box>
      </Box>
    </Drawer>
  )
}

export default AddTaxDrawer