import React, { useState, useEffect } from 'react'
import {
  Box,
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  TextField,
  Button,
  Grid,
  InputAdornment,
  Paper,
  Typography,
  IconButton
} from '@mui/material'
import Icon from 'src/@core/components/icon'
import { SwitchAccountData, SwitchAccountFormProps } from './types'

const initialFormData: SwitchAccountData = {
  legalBusinessName: '',
  companyEmail: '',
  workMobileNo: '',
  einNo: '',
  userName: '',
  lockTrust: 'Lock Trust',
  individualEmail: 'support@locktrust.com',
  personalMobileNo: '+14075209731',
  ssnNo: ''
}

const SwitchAccountForm: React.FC<SwitchAccountFormProps> = ({ 
  open, 
  onClose, 
  onSubmit, 
  isLoading = false,
  editData = null
}) => {
  const [formData, setFormData] = useState<SwitchAccountData>(initialFormData)

  useEffect(() => {
    if (editData) {
      // Populate form with edit data if needed
      setFormData({
        legalBusinessName: editData.fromUserName || '',
        companyEmail: '',
        workMobileNo: '',
        einNo: '',
        userName: editData.fromUserName || '',
        lockTrust: editData.toUserName || 'Lock Trust',
        individualEmail: 'support@locktrust.com',
        personalMobileNo: '+14075209731',
        ssnNo: ''
      })
    } else {
      setFormData(initialFormData)
    }
  }, [editData, open])

  const handleChange = (field: keyof SwitchAccountData) => (
    event: React.ChangeEvent<HTMLInputElement>
  ) => {
    setFormData({
      ...formData,
      [field]: event.target.value
    })
  }

  const handleSubmit = (event: React.FormEvent) => {
    event.preventDefault()
    onSubmit(formData)
  }

  const handleReset = () => {
    setFormData(initialFormData)
  }

  return (
    <Dialog 
      open={open} 
      onClose={onClose} 
      maxWidth="md" 
      fullWidth
      PaperProps={{
        sx: { borderRadius: 2 }
      }}
    >
      <DialogTitle sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', pb: 1 }}>
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
          <Icon icon='tabler:switch-horizontal' fontSize={28} style={{ color: '#1976d2' }} />
          <Typography variant='h6' sx={{ fontWeight: 600 }}>
            {editData ? 'Edit Switch Account' : 'Add Switch Account'}
          </Typography>
        </Box>
        <IconButton onClick={onClose}>
          <Icon icon='tabler:x' fontSize={20} />
        </IconButton>
      </DialogTitle>

      <form onSubmit={handleSubmit}>
        <DialogContent dividers>
          {/* Company Details Section */}
          <Paper variant='outlined' sx={{ p: 3, mb: 3, bgcolor: 'action.hover' }}>
            <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
              <Icon icon='tabler:building' fontSize={20} style={{ marginRight: '8px' }} />
              <Typography variant='subtitle1' sx={{ fontWeight: 600 }}>
                Company Details
              </Typography>
            </Box>
            <Grid container spacing={3}>
              <Grid item xs={12} md={6}>
                <TextField
                  fullWidth
                  label='Legal Business Name'
                  placeholder='Enter legal business name'
                  value={formData.legalBusinessName}
                  onChange={handleChange('legalBusinessName')}
                  required
                  InputProps={{
                    startAdornment: (
                      <InputAdornment position='start'>
                        <Icon icon='tabler:building' fontSize={20} />
                      </InputAdornment>
                    )
                  }}
                />
              </Grid>
              <Grid item xs={12} md={6}>
                <TextField
                  fullWidth
                  label='Company Email / Office Email'
                  type='email'
                  placeholder='company@example.com'
                  value={formData.companyEmail}
                  onChange={handleChange('companyEmail')}
                  required
                  InputProps={{
                    startAdornment: (
                      <InputAdornment position='start'>
                        <Icon icon='tabler:mail' fontSize={20} />
                      </InputAdornment>
                    )
                  }}
                />
              </Grid>
              <Grid item xs={12} md={6}>
                <TextField
                  fullWidth
                  label='Work Mobile No'
                  placeholder='+1 234 567 8900'
                  value={formData.workMobileNo}
                  onChange={handleChange('workMobileNo')}
                  required
                  InputProps={{
                    startAdornment: (
                      <InputAdornment position='start'>
                        <Icon icon='tabler:phone' fontSize={20} />
                      </InputAdornment>
                    )
                  }}
                />
              </Grid>
              <Grid item xs={12} md={6}>
                <TextField
                  fullWidth
                  label='EIN No (Employer Identification Number)'
                  placeholder='XX-XXXXXXX'
                  value={formData.einNo}
                  onChange={handleChange('einNo')}
                  required
                  InputProps={{
                    startAdornment: (
                      <InputAdornment position='start'>
                        <Icon icon='tabler:number' fontSize={20} />
                      </InputAdornment>
                    )
                  }}
                />
              </Grid>
            </Grid>
          </Paper>

          {/* Individual Details Section */}
          <Paper variant='outlined' sx={{ p: 3, mb: 3 }}>
            <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
              <Icon icon='tabler:user' fontSize={20} style={{ marginRight: '8px' }} />
              <Typography variant='subtitle1' sx={{ fontWeight: 600 }}>
                Individual Details
              </Typography>
            </Box>
            <Grid container spacing={3}>
              <Grid item xs={12} md={6}>
                <TextField
                  fullWidth
                  label='User Name'
                  placeholder='Enter username'
                  value={formData.userName}
                  onChange={handleChange('userName')}
                  required
                  InputProps={{
                    startAdornment: (
                      <InputAdornment position='start'>
                        <Icon icon='tabler:user' fontSize={20} />
                      </InputAdornment>
                    )
                  }}
                />
              </Grid>
              <Grid item xs={12} md={6}>
                <TextField
                  fullWidth
                  label='Lock Trust'
                  value={formData.lockTrust}
                  onChange={handleChange('lockTrust')}
                  required
                  InputProps={{
                    startAdornment: (
                      <InputAdornment position='start'>
                        <Icon icon='tabler:lock' fontSize={20} />
                      </InputAdornment>
                    )
                  }}
                />
              </Grid>
              <Grid item xs={12} md={6}>
                <TextField
                  fullWidth
                  label='Individual Email'
                  type='email'
                  value={formData.individualEmail}
                  onChange={handleChange('individualEmail')}
                  required
                  InputProps={{
                    startAdornment: (
                      <InputAdornment position='start'>
                        <Icon icon='tabler:mail' fontSize={20} />
                      </InputAdornment>
                    )
                  }}
                />
              </Grid>
              <Grid item xs={12} md={6}>
                <TextField
                  fullWidth
                  label='Personal Mobile No'
                  placeholder='+1 407 520 9731'
                  value={formData.personalMobileNo}
                  onChange={handleChange('personalMobileNo')}
                  required
                  InputProps={{
                    startAdornment: (
                      <InputAdornment position='start'>
                        <Icon icon='tabler:phone' fontSize={20} />
                      </InputAdornment>
                    )
                  }}
                />
              </Grid>
              <Grid item xs={12} md={6}>
                <TextField
                  fullWidth
                  label='SSN No (Social Security Number)'
                  placeholder='XXX-XX-XXXX'
                  value={formData.ssnNo}
                  onChange={handleChange('ssnNo')}
                  required
                  InputProps={{
                    startAdornment: (
                      <InputAdornment position='start'>
                        <Icon icon='tabler:shield' fontSize={20} />
                      </InputAdornment>
                    )
                  }}
                />
              </Grid>
            </Grid>
          </Paper>
        </DialogContent>

        <DialogActions sx={{ p: 3, gap: 2 }}>
          <Button
            variant='outlined'
            onClick={handleReset}
            disabled={isLoading}
            startIcon={<Icon icon='tabler:refresh' />}
          >
            Reset
          </Button>
          <Button onClick={onClose} variant='outlined' color='secondary'>
            Cancel
          </Button>
          <Button
            type='submit'
            variant='contained'
            disabled={isLoading}
            startIcon={isLoading ? <Icon icon='tabler:loader-2' className='spin' /> : <Icon icon='tabler:check' />}
          >
            {isLoading ? 'Submitting...' : 'Submit'}
          </Button>
        </DialogActions>
      </form>
    </Dialog>
  )
}

export default SwitchAccountForm