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

import React, { useState } from 'react'
import {
  Box,
  Button,
  Typography,
  Drawer,
  IconButton,
  Divider,
  TextField,
  CircularProgress,
  Autocomplete
} from '@mui/material'
import Icon from 'src/@core/components/icon'
import { countries } from 'src/@fake-db/autocomplete'
import { createVendor, getErrorMessage } from '../hooks'
import toast from 'react-hot-toast'

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

const AddVendorDrawer = ({ open, onClose, onSuccess }: AddVendorDrawerProps) => {
  const [loading, setLoading] = useState(false)
  const [formData, setFormData] = useState({
    vendorName: '',
    companyName: '',
    address: '',
    email: '',
    phoneNumber: '',
    countryCode: '+1',
    dialCodeCountry: 'US',
    vendorType: ''
  })

  const getSelectedCountry = () => {
    return countries.find(c => c.code === formData.dialCodeCountry) || null
  }

  const handleSubmit = async () => {
    if (!formData.vendorName.trim() || !formData.companyName.trim()) {
      toast.error('Vendor name and company name are required')
      return
    }
    setLoading(true)
    try {
      const payload = {
        vendorName: formData.vendorName,
        companyName: formData.companyName,
        address: formData.address,
        emailId: formData.email,
        phoneNumber: formData.phoneNumber,
        countryCode: formData.countryCode,
        dialCodeCountry: formData.dialCodeCountry,
        vendorType: formData.vendorType
      }
      await createVendor(payload)
      toast.success('Vendor created successfully')
      onSuccess()
      onClose()
      setFormData({
        vendorName: '',
        companyName: '',
        address: '',
        email: '',
        phoneNumber: '',
        countryCode: '+1',
        dialCodeCountry: 'US',
        vendorType: ''
      })
    } catch (error) {
      toast.error(getErrorMessage(error, 'Failed to create vendor'))
    } 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 Vendor</Typography>
          <IconButton onClick={onClose}>
            <Icon icon='tabler:x' />
          </IconButton>
        </Box>
        <Divider sx={{ mb: 3 }} />

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

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

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

        <Box sx={{ display: 'flex', gap: 2, mb: 3 }}>
          <Autocomplete
            sx={{ width: '40%' }}
            options={countries}
            autoHighlight
            getOptionLabel={(opt) => `${opt.code} +${opt.phone}`}
            value={getSelectedCountry()}
            onChange={(_, newValue) => {
              if (newValue) {
                setFormData({
                  ...formData,
                  dialCodeCountry: newValue.code,
                  countryCode: `+${newValue.phone}`
                })
              }
            }}
            renderOption={(props, option) => (
              <Box component='li' sx={{ display: 'flex', alignItems: 'center', gap: 1 }} {...props}>
                <img
                  loading='lazy'
                  width='20'
                  src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
                  srcSet={`https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`}
                  alt=''
                />
                <span>{option.label}</span>
              </Box>
            )}
            renderInput={params => (
              <TextField
                {...params}
                label='Country'
                inputProps={{ ...params.inputProps, autoComplete: 'new-password' }}
              />
            )}
          />
          <TextField
            fullWidth
            label='Phone Number'
            value={formData.phoneNumber}
            onChange={(e) => setFormData({ ...formData, phoneNumber: e.target.value })}
          />
        </Box>

        <TextField
          fullWidth
          label='Address'
          multiline
          rows={2}
          value={formData.address}
          onChange={(e) => setFormData({ ...formData, address: e.target.value })}
          sx={{ mb: 3 }}
        />

        <TextField
          fullWidth
          label='Vendor Type'
          value={formData.vendorType}
          onChange={(e) => setFormData({ ...formData, vendorType: e.target.value })}
          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 Vendor'}
          </Button>
        </Box>
      </Box>
    </Drawer>
  )
}

export default AddVendorDrawer