// // ** React Imports
    // import { useState } from 'react'

    // // ** Next Import
    // import { useRouter } from 'next/router'

    // // ** MUI Components
    // import Button from '@mui/material/Button'
    // import Typography from '@mui/material/Typography'
    // import Box from '@mui/material/Box'
    // import TextField from '@mui/material/TextField'
    // import MenuItem from '@mui/material/MenuItem'
    // import Grid from '@mui/material/Grid'
    // import Card from '@mui/material/Card'
    // import CardContent from '@mui/material/CardContent'
    // import Tab from '@mui/material/Tab'
    // import TabContext from '@mui/lab/TabContext'
    // import TabList from '@mui/lab/TabList'
    // import TabPanel from '@mui/lab/TabPanel'
    // import InputAdornment from '@mui/material/InputAdornment'
    // import Divider from '@mui/material/Divider'
    // import { styled, useTheme } from '@mui/material/styles'

    // // ** Third Party Imports
    // import { useForm, Controller } from 'react-hook-form'

    // // ** Auth
    // import { useAuth } from 'src/hooks/useAuth'

    // // ** Configs
    // import themeConfig from 'src/configs/themeConfig'

    // const KycCard = styled(Card)(({ theme }) => ({
    // width: '100%',
    // maxWidth: 900,
    // [theme.breakpoints.down('sm')]: {
    //     maxWidth: '100%'
    // }
    // }))

    // const businessTypes = [
    // 'Sole Proprietorship',
    // 'Partnership',
    // 'Limited Liability Company (LLC)',
    // 'Corporation',
    // 'Non-Profit'
    // ]

    // const countries = [
    // 'United States',
    // 'Canada',
    // 'United Kingdom',
    // 'Australia',
    // 'India',
    // 'Germany',
    // 'France',
    // 'Japan',
    // 'Singapore',
    // 'UAE'
    // ]

    // // Individual Form Data Interface
    // interface IndividualFormData {
    // firstName: string
    // lastName: string
    // email: string
    // phone: string
    // dateOfBirth: string
    // ssn: string
    // streetAddress: string
    // city: string
    // state: string
    // zip: string
    // country: string
    // passportNumber: string
    // }

    // // Business Form Data Interface
    // interface BusinessFormData {
    // companyName: string
    // businessType: string
    // tinTaxEin: string
    // firstName: string
    // lastName: string
    // email: string
    // phone: string
    // streetAddress: string
    // city: string
    // state: string
    // zip: string
    // country: string
    // website: string
    // }

    // // Default values for Individual (from image)
    // const individualDefaultValues: IndividualFormData = {
    // firstName: 'John',
    // lastName: 'Doe',
    // email: 'john.doe@example.com',
    // phone: '+1 (555) 123-4567',
    // dateOfBirth: '15-05-1985',
    // ssn: '123-45-6789',
    // streetAddress: '123 Main Street',
    // city: 'New York',
    // state: 'NY',
    // zip: '10001',
    // country: '',
    // passportNumber: 'AB1234567'
    // }

    // // Default values for Business (from image)
    // const businessDefaultValues: BusinessFormData = {
    // companyName: 'Acme Corp',
    // businessType: '',
    // tinTaxEin: 'XX-XXXXXXX',
    // firstName: 'John',
    // lastName: 'Doe',
    // email: 'john.doe@acmecorp.com',
    // phone: '+1 (555) 123-4567',
    // streetAddress: '123 Corporate Blvd',
    // city: 'New York',
    // state: 'NY',
    // zip: '10001',
    // country: '',
    // website: 'https://www.acmecorp.com'
    // }

    // const KycForm = () => {
    // // ** Hooks
    // const theme = useTheme()
    // const router = useRouter()
    // const auth = useAuth()
    // const [tabValue, setTabValue] = useState<string>('individual')
    // const [isSubmitting, setIsSubmitting] = useState(false)

    // // Individual form
    // const {
    //     control: individualControl,
    //     handleSubmit: handleIndividualSubmit,
    //     formState: { errors: individualErrors }
    // } = useForm<IndividualFormData>({
    //     defaultValues: individualDefaultValues,
    //     mode: 'onBlur'
    // })

    // // Business form
    // const {
    //     control: businessControl,
    //     handleSubmit: handleBusinessSubmit,
    //     formState: { errors: businessErrors }
    // } = useForm<BusinessFormData>({
    //     defaultValues: businessDefaultValues,
    //     mode: 'onBlur'
    // })

    // const handleTabChange = (event: React.SyntheticEvent, newValue: string) => {
    //     setTabValue(newValue)
    // }

    // const onIndividualSubmit = async (data: IndividualFormData) => {
    //     setIsSubmitting(true)
        
    //     // Simulate API call
    //     setTimeout(() => {
    //     console.log('Individual KYC Data submitted:', data)
    //     localStorage.setItem('kycCompleted', 'true')
    //     localStorage.setItem('kycType', 'individual')
    //     localStorage.setItem('kycData', JSON.stringify(data))
        
    //     // Call auth.verifyUser to complete the login flow
    //     // This will set the user and redirect to dashboard
    //     auth.verifyUser()
        
    //     setIsSubmitting(false)
    //     }, 1000)
    // }

    // const onBusinessSubmit = async (data: BusinessFormData) => {
    //     setIsSubmitting(true)
        
    //     // Simulate API call
    //     setTimeout(() => {
    //     console.log('Business KYC Data submitted:', data)
    //     localStorage.setItem('kycCompleted', 'true')
    //     localStorage.setItem('kycType', 'business')
    //     localStorage.setItem('kycData', JSON.stringify(data))
        
    //     // Call auth.verifyUser to complete the login flow
    //     // This will set the user and redirect to dashboard
    //     auth.verifyUser()
        
    //     setIsSubmitting(false)
    //     }, 1000)
    // }

    // return (
    //     <Box
    //     sx={{
    //         width: '100%',
    //         minHeight: '100vh',
    //         display: 'flex',
    //         alignItems: 'center',
    //         justifyContent: 'center',
    //         py: 8,
    //         px: 2,
    //         backgroundColor: 'background.default'
    //     }}
    //     >
    //     <KycCard>
    //         <CardContent sx={{ p: { xs: 4, sm: 6, md: 8 } }}>
    //         {/* Header */}
    //         <Box sx={{ mb: 6, textAlign: 'center' }}>
    //             <Box sx={{ mb: 4, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
    //             <svg width={34} height={23.375} viewBox='0 0 32 22' fill='none' xmlns='http://www.w3.org/2000/svg'>
    //                 <path
    //                 fillRule='evenodd'
    //                 clipRule='evenodd'
    //                 fill={theme.palette.primary.main}
    //                 d='M0.00172773 0V6.85398C0.00172773 6.85398 -0.133178 9.01207 1.98092 10.8388L13.6912 21.9964L19.7809 21.9181L18.8042 9.88248L16.4951 7.17289L9.23799 0H0.00172773Z'
    //                 />
    //                 <path
    //                 fill='#161616'
    //                 opacity={0.06}
    //                 fillRule='evenodd'
    //                 clipRule='evenodd'
    //                 d='M7.69824 16.4364L12.5199 3.23696L16.5541 7.25596L7.69824 16.4364Z'
    //                 />
    //                 <path
    //                 fill='#161616'
    //                 opacity={0.06}
    //                 fillRule='evenodd'
    //                 clipRule='evenodd'
    //                 d='M8.07751 15.9175L13.9419 4.63989L16.5849 7.28475L8.07751 15.9175Z'
    //                 />
    //                 <path
    //                 fillRule='evenodd'
    //                 clipRule='evenodd'
    //                 fill={theme.palette.primary.main}
    //                 d='M7.77295 16.3566L23.6563 0H32V6.88383C32 6.88383 31.8262 9.17836 30.6591 10.4057L19.7824 22H13.6938L7.77295 16.3566Z'
    //                 />
    //             </svg>
    //             <Typography sx={{ ml: 2.5, fontWeight: 600, fontSize: '1.625rem', lineHeight: 1.385 }}>
    //                 {themeConfig.templateName}
    //             </Typography>
    //             </Box>
    //             <Typography variant='h4' sx={{ mb: 2, fontWeight: 600 }}>
    //             Re KYC
    //             </Typography>
    //             <Typography variant='body2' sx={{ color: 'text.secondary' }}>
    //             Please review and complete your KYC information. Fields are pre-filled from your registration.
    //             </Typography>
    //         </Box>

    //         <TabContext value={tabValue}>
    //             <Box sx={{ borderBottom: 1, borderColor: 'divider', mb: 4 }}>
    //             <TabList onChange={handleTabChange} aria-label='KYC type tabs' centered>
    //                 <Tab label='Individual' value='individual' />
    //                 <Tab label='Business' value='business' />
    //             </TabList>
    //             </Box>

    //             {/* INDIVIDUAL TAB */}
    //             <TabPanel value='individual' sx={{ p: 0 }}>
    //             <form onSubmit={handleIndividualSubmit(onIndividualSubmit)}>
    //                 {/* PERSONAL INFORMATION Section */}
    //                 <Typography variant='h6' sx={{ mb: 3, color: 'primary.main', fontWeight: 600 }}>
    //                 PERSONAL INFORMATION
    //                 </Typography>
    //                 <Grid container spacing={4} sx={{ mb: 6 }}>
    //                 <Grid item xs={12} md={6}>
    //                     <Controller
    //                     name='firstName'
    //                     control={individualControl}
    //                     rules={{ required: 'First name is required' }}
    //                     render={({ field }) => (
    //                         <TextField
    //                         {...field}
    //                         fullWidth
    //                         label='First name'
    //                         placeholder='First name'
    //                         error={!!individualErrors.firstName}
    //                         helperText={individualErrors.firstName?.message}
    //                         required
    //                         />
    //                     )}
    //                     />
    //                 </Grid>
    //                 <Grid item xs={12} md={6}>
    //                     <Controller
    //                     name='lastName'
    //                     control={individualControl}
    //                     rules={{ required: 'Last name is required' }}
    //                     render={({ field }) => (
    //                         <TextField
    //                         {...field}
    //                         fullWidth
    //                         label='Last name'
    //                         placeholder='Last name'
    //                         error={!!individualErrors.lastName}
    //                         helperText={individualErrors.lastName?.message}
    //                         required
    //                         />
    //                     )}
    //                     />
    //                 </Grid>
    //                 <Grid item xs={12} md={6}>
    //                     <Controller
    //                     name='email'
    //                     control={individualControl}
    //                     rules={{ required: 'Email is required', pattern: /^\S+@\S+$/i }}
    //                     render={({ field }) => (
    //                         <TextField
    //                         {...field}
    //                         fullWidth
    //                         label='Email'
    //                         placeholder='Email'
    //                         error={!!individualErrors.email}
    //                         helperText={individualErrors.email?.message}
    //                         required
    //                         />
    //                     )}
    //                     />
    //                 </Grid>
    //                 <Grid item xs={12} md={6}>
    //                     <Controller
    //                     name='phone'
    //                     control={individualControl}
    //                     rules={{ required: 'Phone is required' }}
    //                     render={({ field }) => (
    //                         <TextField
    //                         {...field}
    //                         fullWidth
    //                         label='Phone'
    //                         placeholder='Phone'
    //                         error={!!individualErrors.phone}
    //                         helperText={individualErrors.phone?.message}
    //                         required
    //                         />
    //                     )}
    //                     />
    //                 </Grid>
    //                 <Grid item xs={12} md={6}>
    //                     <Controller
    //                     name='dateOfBirth'
    //                     control={individualControl}
    //                     rules={{ required: 'Date of birth is required' }}
    //                     render={({ field }) => (
    //                         <TextField
    //                         {...field}
    //                         fullWidth
    //                         label='Date of birth'
    //                         placeholder='dd-mm-yyyy'
    //                         error={!!individualErrors.dateOfBirth}
    //                         helperText={individualErrors.dateOfBirth?.message}
    //                         required
    //                         />
    //                     )}
    //                     />
    //                 </Grid>
    //                 <Grid item xs={12} md={6}>
    //                     <Controller
    //                     name='ssn'
    //                     control={individualControl}
    //                     rules={{ required: 'SSN is required' }}
    //                     render={({ field }) => (
    //                         <TextField
    //                         {...field}
    //                         fullWidth
    //                         label='SSN'
    //                         placeholder='XXX-XX-XXXX'
    //                         error={!!individualErrors.ssn}
    //                         helperText={individualErrors.ssn?.message}
    //                         required
    //                         />
    //                     )}
    //                     />
    //                 </Grid>
    //                 </Grid>

    //                 <Divider sx={{ my: 4 }} />

    //                 {/* ADDRESS Section */}
    //                 <Typography variant='h6' sx={{ mb: 3, color: 'primary.main', fontWeight: 600 }}>
    //                 ADDRESS
    //                 </Typography>
    //                 <Grid container spacing={4} sx={{ mb: 6 }}>
    //                 <Grid item xs={12}>
    //                     <Controller
    //                     name='streetAddress'
    //                     control={individualControl}
    //                     rules={{ required: 'Street address is required' }}
    //                     render={({ field }) => (
    //                         <TextField
    //                         {...field}
    //                         fullWidth
    //                         label='Street address'
    //                         placeholder='Street address'
    //                         error={!!individualErrors.streetAddress}
    //                         helperText={individualErrors.streetAddress?.message}
    //                         required
    //                         />
    //                     )}
    //                     />
    //                 </Grid>
    //                 <Grid item xs={12} md={4}>
    //                     <Controller
    //                     name='city'
    //                     control={individualControl}
    //                     rules={{ required: 'City is required' }}
    //                     render={({ field }) => (
    //                         <TextField
    //                         {...field}
    //                         fullWidth
    //                         label='City'
    //                         placeholder='City'
    //                         error={!!individualErrors.city}
    //                         helperText={individualErrors.city?.message}
    //                         required
    //                         />
    //                     )}
    //                     />
    //                 </Grid>
    //                 <Grid item xs={12} md={4}>
    //                     <Controller
    //                     name='state'
    //                     control={individualControl}
    //                     rules={{ required: 'State is required' }}
    //                     render={({ field }) => (
    //                         <TextField
    //                         {...field}
    //                         fullWidth
    //                         label='State'
    //                         placeholder='State'
    //                         error={!!individualErrors.state}
    //                         helperText={individualErrors.state?.message}
    //                         required
    //                         />
    //                     )}
    //                     />
    //                 </Grid>
    //                 <Grid item xs={12} md={4}>
    //                     <Controller
    //                     name='zip'
    //                     control={individualControl}
    //                     rules={{ required: 'ZIP is required' }}
    //                     render={({ field }) => (
    //                         <TextField
    //                         {...field}
    //                         fullWidth
    //                         label='ZIP'
    //                         placeholder='ZIP'
    //                         error={!!individualErrors.zip}
    //                         helperText={individualErrors.zip?.message}
    //                         required
    //                         />
    //                     )}
    //                     />
    //                 </Grid>
    //                 </Grid>

    //                 <Divider sx={{ my: 4 }} />

    //                 {/* COUNTRY & PASSPORT Section */}
    //                 <Grid container spacing={4} sx={{ mb: 6 }}>
    //                 <Grid item xs={12} md={6}>
    //                     <Controller
    //                     name='country'
    //                     control={individualControl}
    //                     rules={{ required: 'Country is required' }}
    //                     render={({ field }) => (
    //                         <TextField
    //                         {...field}
    //                         select
    //                         fullWidth
    //                         label='Country'
    //                         error={!!individualErrors.country}
    //                         helperText={individualErrors.country?.message}
    //                         required
    //                         >
    //                         <MenuItem value='' disabled>— Select country —</MenuItem>
    //                         {countries.map(country => (
    //                             <MenuItem key={country} value={country}>{country}</MenuItem>
    //                         ))}
    //                         </TextField>
    //                     )}
    //                     />
    //                 </Grid>
    //                 <Grid item xs={12} md={6}>
    //                     <Controller
    //                     name='passportNumber'
    //                     control={individualControl}
    //                     render={({ field }) => (
    //                         <TextField
    //                         {...field}
    //                         fullWidth
    //                         label='Passport number'
    //                         placeholder='e.g. AB1234567'
    //                         />
    //                     )}
    //                     />
    //                 </Grid>
    //                 </Grid>

    //                 <Button
    //                 fullWidth
    //                 size='large'
    //                 type='submit'
    //                 variant='contained'
    //                 disabled={isSubmitting}
    //                 sx={{ mt: 4, py: 1.5 }}
    //                 >
    //                 {isSubmitting ? 'Submitting...' : 'Submit KYC →'}
    //                 </Button>
    //             </form>
    //             </TabPanel>

    //             {/* BUSINESS TAB */}
    //             <TabPanel value='business' sx={{ p: 0 }}>
    //             <form onSubmit={handleBusinessSubmit(onBusinessSubmit)}>
    //                 {/* BUSINESS DETAILS Section */}
    //                 <Typography variant='h6' sx={{ mb: 3, color: 'primary.main', fontWeight: 600 }}>
    //                 BUSINESS DETAILS
    //                 </Typography>
    //                 <Grid container spacing={4} sx={{ mb: 6 }}>
    //                 <Grid item xs={12} md={6}>
    //                     <Controller
    //                     name='companyName'
    //                     control={businessControl}
    //                     rules={{ required: 'Company name is required' }}
    //                     render={({ field }) => (
    //                         <TextField
    //                         {...field}
    //                         fullWidth
    //                         label='Company name'
    //                         placeholder='Company name'
    //                         error={!!businessErrors.companyName}
    //                         helperText={businessErrors.companyName?.message}
    //                         required
    //                         />
    //                     )}
    //                     />
    //                 </Grid>
    //                 <Grid item xs={12} md={6}>
    //                     <Controller
    //                     name='businessType'
    //                     control={businessControl}
    //                     rules={{ required: 'Business type is required' }}
    //                     render={({ field }) => (
    //                         <TextField
    //                         {...field}
    //                         select
    //                         fullWidth
    //                         label='Business type'
    //                         error={!!businessErrors.businessType}
    //                         helperText={businessErrors.businessType?.message}
    //                         required
    //                         >
    //                         <MenuItem value='' disabled>— Select type —</MenuItem>
    //                         {businessTypes.map(type => (
    //                             <MenuItem key={type} value={type}>{type}</MenuItem>
    //                         ))}
    //                         </TextField>
    //                     )}
    //                     />
    //                 </Grid>
    //                 <Grid item xs={12} md={6}>
    //                     <Controller
    //                     name='tinTaxEin'
    //                     control={businessControl}
    //                     rules={{ required: 'TIN / TAX / EIN is required' }}
    //                     render={({ field }) => (
    //                         <TextField
    //                         {...field}
    //                         fullWidth
    //                         label='TIN / TAX / EIN'
    //                         placeholder='TIN / TAX / EIN'
    //                         error={!!businessErrors.tinTaxEin}
    //                         helperText={businessErrors.tinTaxEin?.message}
    //                         required
    //                         />
    //                     )}
    //                     />
    //                 </Grid>
    //                 </Grid>

    //                 <Divider sx={{ my: 4 }} />

    //                 {/* OWNER / CONTACT Section */}
    //                 <Typography variant='h6' sx={{ mb: 3, color: 'primary.main', fontWeight: 600 }}>
    //                 OWNER / CONTACT
    //                 </Typography>
    //                 <Grid container spacing={4} sx={{ mb: 6 }}>
    //                 <Grid item xs={12} md={6}>
    //                     <Controller
    //                     name='firstName'
    //                     control={businessControl}
    //                     rules={{ required: 'First name is required' }}
    //                     render={({ field }) => (
    //                         <TextField
    //                         {...field}
    //                         fullWidth
    //                         label='First name'
    //                         placeholder='First name'
    //                         error={!!businessErrors.firstName}
    //                         helperText={businessErrors.firstName?.message}
    //                         required
    //                         />
    //                     )}
    //                     />
    //                 </Grid>
    //                 <Grid item xs={12} md={6}>
    //                     <Controller
    //                     name='lastName'
    //                     control={businessControl}
    //                     render={({ field }) => (
    //                         <TextField
    //                         {...field}
    //                         fullWidth
    //                         label='Last name'
    //                         placeholder='Last name'
    //                         />
    //                     )}
    //                     />
    //                 </Grid>
    //                 <Grid item xs={12} md={6}>
    //                     <Controller
    //                     name='email'
    //                     control={businessControl}
    //                     rules={{ required: 'Email is required', pattern: /^\S+@\S+$/i }}
    //                     render={({ field }) => (
    //                         <TextField
    //                         {...field}
    //                         fullWidth
    //                         label='Email'
    //                         placeholder='Email'
    //                         error={!!businessErrors.email}
    //                         helperText={businessErrors.email?.message}
    //                         required
    //                         />
    //                     )}
    //                     />
    //                 </Grid>
    //                 <Grid item xs={12} md={6}>
    //                     <Controller
    //                     name='phone'
    //                     control={businessControl}
    //                     rules={{ required: 'Phone is required' }}
    //                     render={({ field }) => (
    //                         <TextField
    //                         {...field}
    //                         fullWidth
    //                         label='Phone'
    //                         placeholder='Phone'
    //                         error={!!businessErrors.phone}
    //                         helperText={businessErrors.phone?.message}
    //                         required
    //                         />
    //                     )}
    //                     />
    //                 </Grid>
    //                 </Grid>

    //                 <Divider sx={{ my: 4 }} />

    //                 {/* BUSINESS ADDRESS Section */}
    //                 <Typography variant='h6' sx={{ mb: 3, color: 'primary.main', fontWeight: 600 }}>
    //                 BUSINESS ADDRESS
    //                 </Typography>
    //                 <Grid container spacing={4} sx={{ mb: 6 }}>
    //                 <Grid item xs={12}>
    //                     <Controller
    //                     name='streetAddress'
    //                     control={businessControl}
    //                     rules={{ required: 'Street address is required' }}
    //                     render={({ field }) => (
    //                         <TextField
    //                         {...field}
    //                         fullWidth
    //                         label='Street address'
    //                         placeholder='Street address'
    //                         error={!!businessErrors.streetAddress}
    //                         helperText={businessErrors.streetAddress?.message}
    //                         required
    //                         />
    //                     )}
    //                     />
    //                 </Grid>
    //                 <Grid item xs={12} md={4}>
    //                     <Controller
    //                     name='city'
    //                     control={businessControl}
    //                     rules={{ required: 'City is required' }}
    //                     render={({ field }) => (
    //                         <TextField
    //                         {...field}
    //                         fullWidth
    //                         label='City'
    //                         placeholder='City'
    //                         error={!!businessErrors.city}
    //                         helperText={businessErrors.city?.message}
    //                         required
    //                         />
    //                     )}
    //                     />
    //                 </Grid>
    //                 <Grid item xs={12} md={4}>
    //                     <Controller
    //                     name='state'
    //                     control={businessControl}
    //                     rules={{ required: 'State is required' }}
    //                     render={({ field }) => (
    //                         <TextField
    //                         {...field}
    //                         fullWidth
    //                         label='State'
    //                         placeholder='State'
    //                         error={!!businessErrors.state}
    //                         helperText={businessErrors.state?.message}
    //                         required
    //                         />
    //                     )}
    //                     />
    //                 </Grid>
    //                 <Grid item xs={12} md={4}>
    //                     <Controller
    //                     name='zip'
    //                     control={businessControl}
    //                     rules={{ required: 'ZIP is required' }}
    //                     render={({ field }) => (
    //                         <TextField
    //                         {...field}
    //                         fullWidth
    //                         label='ZIP'
    //                         placeholder='ZIP'
    //                         error={!!businessErrors.zip}
    //                         helperText={businessErrors.zip?.message}
    //                         required
    //                         />
    //                     )}
    //                     />
    //                 </Grid>
    //                 </Grid>

    //                 <Divider sx={{ my: 4 }} />

    //                 {/* COUNTRY & WEBSITE Section */}
    //                 <Grid container spacing={4} sx={{ mb: 6 }}>
    //                 <Grid item xs={12} md={6}>
    //                     <Controller
    //                     name='country'
    //                     control={businessControl}
    //                     rules={{ required: 'Country is required' }}
    //                     render={({ field }) => (
    //                         <TextField
    //                         {...field}
    //                         select
    //                         fullWidth
    //                         label='Country'
    //                         error={!!businessErrors.country}
    //                         helperText={businessErrors.country?.message}
    //                         required
    //                         >
    //                         <MenuItem value='' disabled>— Select country —</MenuItem>
    //                         {countries.map(country => (
    //                             <MenuItem key={country} value={country}>{country}</MenuItem>
    //                         ))}
    //                         </TextField>
    //                     )}
    //                     />
    //                 </Grid>
    //                 <Grid item xs={12} md={6}>
    //                     <Controller
    //                     name='website'
    //                     control={businessControl}
    //                     render={({ field }) => (
    //                         <TextField
    //                         {...field}
    //                         fullWidth
    //                         label='Website'
    //                         placeholder='https://yourcompany.com'
    //                         InputProps={{
    //                             startAdornment: <InputAdornment position="start">https://</InputAdornment>,
    //                         }}
    //                         />
    //                     )}
    //                     />
    //                 </Grid>
    //                 </Grid>

    //                 <Button
    //                 fullWidth
    //                 size='large'
    //                 type='submit'
    //                 variant='contained'
    //                 disabled={isSubmitting}
    //                 sx={{ mt: 4, py: 1.5 }}
    //                 >
    //                 {isSubmitting ? 'Submitting...' : 'Submit KYC →'}
    //                 </Button>
    //             </form>
    //             </TabPanel>
    //         </TabContext>
    //         </CardContent>
    //     </KycCard>
    //     </Box>
    // )
    // }

    // export default KycForm



    // ** React Imports
import { useState } from 'react'

// ** Next Import
import { useRouter } from 'next/router'

// ** MUI Components
import Button from '@mui/material/Button'
import Typography from '@mui/material/Typography'
import Box from '@mui/material/Box'
import TextField from '@mui/material/TextField'
import MenuItem from '@mui/material/MenuItem'
import Grid from '@mui/material/Grid'
import Card from '@mui/material/Card'
import CardContent from '@mui/material/CardContent'
import Tab from '@mui/material/Tab'
import TabContext from '@mui/lab/TabContext'
import TabList from '@mui/lab/TabList'
import TabPanel from '@mui/lab/TabPanel'
import InputAdornment from '@mui/material/InputAdornment'
import Divider from '@mui/material/Divider'
import { styled, useTheme } from '@mui/material/styles'

// ** Third Party Imports
import { useForm, Controller } from 'react-hook-form'

// ** Auth
import { useAuth } from 'src/hooks/useAuth'

// ** Configs
import themeConfig from 'src/configs/themeConfig'

// ** Import CountryField
import CountryField from 'src/pages/components/form-element/location/CountryField'

// ** Data
import { countries } from 'src/@fake-db/autocomplete'

const KycCard = styled(Card)(({ theme }) => ({
  width: '100%',
  maxWidth: 900,
  [theme.breakpoints.down('sm')]: {
    maxWidth: '100%'
  }
}))

const businessTypes = [
  'Sole Proprietorship',
  'Partnership',
  'Limited Liability Company (LLC)',
  'Corporation',
  'Non-Profit'
]

// Individual Form Data Interface
interface IndividualFormData {
  firstName: string
  lastName: string
  email: string
  phone: string
  dateOfBirth: string
  ssn: string
  streetAddress: string
  city: string
  state: string
  zip: string
  countryCode?: string | null
  passportNumber: string
}

// Business Form Data Interface
interface BusinessFormData {
  companyName: string
  businessType: string
  tinTaxEin: string
  firstName: string
  lastName: string
  email: string
  phone: string
  streetAddress: string
  city: string
  state: string
  zip: string
  countryCode?: string | null
  website: string
}

// Default values for Individual (from image)
const individualDefaultValues: IndividualFormData = {
  firstName: 'John',
  lastName: 'Doe',
  email: 'john.doe@example.com',
  phone: '+1 (555) 123-4567',
  dateOfBirth: '15-05-1985',
  ssn: '123-45-6789',
  streetAddress: '123 Main Street',
  city: 'New York',
  state: 'NY',
  zip: '10001',
  countryCode: '',
  passportNumber: 'AB1234567'
}

// Default values for Business (from image)
const businessDefaultValues: BusinessFormData = {
  companyName: 'Acme Corp',
  businessType: '',
  tinTaxEin: 'XX-XXXXXXX',
  firstName: 'John',
  lastName: 'Doe',
  email: 'john.doe@acmecorp.com',
  phone: '+1 (555) 123-4567',
  streetAddress: '123 Corporate Blvd',
  city: 'New York',
  state: 'NY',
  zip: '10001',
  countryCode: '',
  website: 'https://www.acmecorp.com'
}

const KycForm = () => {
  // ** Hooks
  const theme = useTheme()
  const auth = useAuth()
  const [tabValue, setTabValue] = useState<string>('individual')
  const [isSubmitting, setIsSubmitting] = useState(false)

  // Individual form
  const {
    control: individualControl,
    handleSubmit: handleIndividualSubmit,
    formState: { errors: individualErrors }
  } = useForm<IndividualFormData>({
    defaultValues: individualDefaultValues,
    mode: 'onBlur'
  })

  // Business form
  const {
    control: businessControl,
    handleSubmit: handleBusinessSubmit,
    formState: { errors: businessErrors }
  } = useForm<BusinessFormData>({
    defaultValues: businessDefaultValues,
    mode: 'onBlur'
  })

  const handleTabChange = (event: React.SyntheticEvent, newValue: string) => {
    setTabValue(newValue)
  }

  const onIndividualSubmit = async (data: IndividualFormData) => {
    setIsSubmitting(true)
    
    // Simulate API call
    setTimeout(() => {
      console.log('Individual KYC Data submitted:', data)
      localStorage.setItem('kycCompleted', 'true')
      localStorage.setItem('kycType', 'individual')
      localStorage.setItem('kycData', JSON.stringify(data))
      
      // Call auth.verifyUser to complete the login flow
      // This will set the user and redirect to dashboard
      auth.verifyUser()
      
      setIsSubmitting(false)
    }, 1000)
  }

  const onBusinessSubmit = async (data: BusinessFormData) => {
    setIsSubmitting(true)
    
    // Simulate API call
    setTimeout(() => {
      console.log('Business KYC Data submitted:', data)
      localStorage.setItem('kycCompleted', 'true')
      localStorage.setItem('kycType', 'business')
      localStorage.setItem('kycData', JSON.stringify(data))
      
      // Call auth.verifyUser to complete the login flow
      // This will set the user and redirect to dashboard
      auth.verifyUser()
      
      setIsSubmitting(false)
    }, 1000)
  }

  return (
    <Box
      sx={{
        width: '100%',
        minHeight: '100vh',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        py: 8,
        px: 2,
        backgroundColor: 'background.default'
      }}
    >
      <KycCard>
        <CardContent sx={{ p: { xs: 4, sm: 6, md: 8 } }}>
          {/* Header */}
          <Box sx={{ mb: 6, textAlign: 'center' }}>
            <Box sx={{ mb: 4, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <svg width={34} height={23.375} viewBox='0 0 32 22' fill='none' xmlns='http://www.w3.org/2000/svg'>
                <path
                  fillRule='evenodd'
                  clipRule='evenodd'
                  fill={theme.palette.primary.main}
                  d='M0.00172773 0V6.85398C0.00172773 6.85398 -0.133178 9.01207 1.98092 10.8388L13.6912 21.9964L19.7809 21.9181L18.8042 9.88248L16.4951 7.17289L9.23799 0H0.00172773Z'
                />
                <path
                  fill='#161616'
                  opacity={0.06}
                  fillRule='evenodd'
                  clipRule='evenodd'
                  d='M7.69824 16.4364L12.5199 3.23696L16.5541 7.25596L7.69824 16.4364Z'
                />
                <path
                  fill='#161616'
                  opacity={0.06}
                  fillRule='evenodd'
                  clipRule='evenodd'
                  d='M8.07751 15.9175L13.9419 4.63989L16.5849 7.28475L8.07751 15.9175Z'
                />
                <path
                  fillRule='evenodd'
                  clipRule='evenodd'
                  fill={theme.palette.primary.main}
                  d='M7.77295 16.3566L23.6563 0H32V6.88383C32 6.88383 31.8262 9.17836 30.6591 10.4057L19.7824 22H13.6938L7.77295 16.3566Z'
                />
              </svg>
              <Typography sx={{ ml: 2.5, fontWeight: 600, fontSize: '1.625rem', lineHeight: 1.385 }}>
                {themeConfig.templateName}
              </Typography>
            </Box>
            <Typography variant='h4' sx={{ mb: 2, fontWeight: 600 }}>
              Re KYC
            </Typography>
            <Typography variant='body2' sx={{ color: 'text.secondary' }}>
              Please review and complete your KYC information. Fields are pre-filled from your registration.
            </Typography>
          </Box>

          <TabContext value={tabValue}>
            <Box sx={{ borderBottom: 1, borderColor: 'divider', mb: 4 }}>
              <TabList onChange={handleTabChange} aria-label='KYC type tabs' centered>
                <Tab label='Individual' value='individual' />
                <Tab label='Business' value='business' />
              </TabList>
            </Box>

            {/* INDIVIDUAL TAB */}
            <TabPanel value='individual' sx={{ p: 0 }}>
              <form onSubmit={handleIndividualSubmit(onIndividualSubmit)}>
                {/* PERSONAL INFORMATION Section */}
                <Typography variant='h6' sx={{ mb: 3, color: 'primary.main', fontWeight: 600 }}>
                  PERSONAL INFORMATION
                </Typography>
                <Grid container spacing={4} sx={{ mb: 6 }}>
                  <Grid item xs={12} md={6}>
                    <Controller
                      name='firstName'
                      control={individualControl}
                      rules={{ required: 'First name is required' }}
                      render={({ field }) => (
                        <TextField
                          {...field}
                          fullWidth
                          label='First name'
                          placeholder='First name'
                          error={!!individualErrors.firstName}
                          helperText={individualErrors.firstName?.message}
                          required
                        />
                      )}
                    />
                  </Grid>
                  <Grid item xs={12} md={6}>
                    <Controller
                      name='lastName'
                      control={individualControl}
                      rules={{ required: 'Last name is required' }}
                      render={({ field }) => (
                        <TextField
                          {...field}
                          fullWidth
                          label='Last name'
                          placeholder='Last name'
                          error={!!individualErrors.lastName}
                          helperText={individualErrors.lastName?.message}
                          required
                        />
                      )}
                    />
                  </Grid>
                  <Grid item xs={12} md={6}>
                    <Controller
                      name='email'
                      control={individualControl}
                      rules={{ required: 'Email is required', pattern: /^\S+@\S+$/i }}
                      render={({ field }) => (
                        <TextField
                          {...field}
                          fullWidth
                          label='Email'
                          placeholder='Email'
                          error={!!individualErrors.email}
                          helperText={individualErrors.email?.message}
                          required
                        />
                      )}
                    />
                  </Grid>
                  <Grid item xs={12} md={6}>
                    <Controller
                      name='phone'
                      control={individualControl}
                      rules={{ required: 'Phone is required' }}
                      render={({ field }) => (
                        <TextField
                          {...field}
                          fullWidth
                          label='Phone'
                          placeholder='Phone'
                          error={!!individualErrors.phone}
                          helperText={individualErrors.phone?.message}
                          required
                        />
                      )}
                    />
                  </Grid>
                  <Grid item xs={12} md={6}>
                    <Controller
                      name='dateOfBirth'
                      control={individualControl}
                      rules={{ required: 'Date of birth is required' }}
                      render={({ field }) => (
                        <TextField
                          {...field}
                          fullWidth
                          label='Date of birth'
                          placeholder='dd-mm-yyyy'
                          error={!!individualErrors.dateOfBirth}
                          helperText={individualErrors.dateOfBirth?.message}
                          required
                        />
                      )}
                    />
                  </Grid>
                  <Grid item xs={12} md={6}>
                    <Controller
                      name='ssn'
                      control={individualControl}
                      rules={{ required: 'SSN is required' }}
                      render={({ field }) => (
                        <TextField
                          {...field}
                          fullWidth
                          label='SSN'
                          placeholder='XXX-XX-XXXX'
                          error={!!individualErrors.ssn}
                          helperText={individualErrors.ssn?.message}
                          required
                        />
                      )}
                    />
                  </Grid>
                </Grid>

                <Divider sx={{ my: 4 }} />

                {/* ADDRESS Section */}
                <Typography variant='h6' sx={{ mb: 3, color: 'primary.main', fontWeight: 600 }}>
                  ADDRESS
                </Typography>
                <Grid container spacing={4} sx={{ mb: 6 }}>
                  <Grid item xs={12}>
                    <Controller
                      name='streetAddress'
                      control={individualControl}
                      rules={{ required: 'Street address is required' }}
                      render={({ field }) => (
                        <TextField
                          {...field}
                          fullWidth
                          label='Street address'
                          placeholder='Street address'
                          error={!!individualErrors.streetAddress}
                          helperText={individualErrors.streetAddress?.message}
                          required
                        />
                      )}
                    />
                  </Grid>
                  <Grid item xs={12} md={4}>
                    <Controller
                      name='city'
                      control={individualControl}
                      rules={{ required: 'City is required' }}
                      render={({ field }) => (
                        <TextField
                          {...field}
                          fullWidth
                          label='City'
                          placeholder='City'
                          error={!!individualErrors.city}
                          helperText={individualErrors.city?.message}
                          required
                        />
                      )}
                    />
                  </Grid>
                  <Grid item xs={12} md={4}>
                    <Controller
                      name='state'
                      control={individualControl}
                      rules={{ required: 'State is required' }}
                      render={({ field }) => (
                        <TextField
                          {...field}
                          fullWidth
                          label='State'
                          placeholder='State'
                          error={!!individualErrors.state}
                          helperText={individualErrors.state?.message}
                          required
                        />
                      )}
                    />
                  </Grid>
                  <Grid item xs={12} md={4}>
                    <Controller
                      name='zip'
                      control={individualControl}
                      rules={{ required: 'ZIP is required' }}
                      render={({ field }) => (
                        <TextField
                          {...field}
                          fullWidth
                          label='ZIP'
                          placeholder='ZIP'
                          error={!!individualErrors.zip}
                          helperText={individualErrors.zip?.message}
                          required
                        />
                      )}
                    />
                  </Grid>
                </Grid>

                <Divider sx={{ my: 4 }} />

                {/* COUNTRY & PASSPORT Section */}
                <Grid container spacing={4} sx={{ mb: 6 }}>
                  <Grid item xs={12} md={6}>
                    <Controller
                      name='countryCode'
                      control={individualControl}
                      rules={{ required: 'Country is required' }}
                      render={({ field }) => {
                        const selectedCountry = countries.find(c => c.phone === field.value) || null

                        return (
                          <CountryField
                            {...field}
                            value={selectedCountry}
                            onChange={(event, newValue) => {
                              field.onChange(newValue?.phone || null)
                            }}
                            valueType='phone'
                            label='Country *'
                            error={!!individualErrors.countryCode}
                            helperText={individualErrors.countryCode?.message}
                            fullWidth
                            ref={field.ref}
                          />
                        )
                      }}
                    />
                  </Grid>
                  <Grid item xs={12} md={6}>
                    <Controller
                      name='passportNumber'
                      control={individualControl}
                      render={({ field }) => (
                        <TextField
                          {...field}
                          fullWidth
                          label='Passport number'
                          placeholder='e.g. AB1234567'
                        />
                      )}
                    />
                  </Grid>
                </Grid>

                <Button
                  fullWidth
                  size='large'
                  type='submit'
                  variant='contained'
                  disabled={isSubmitting}
                  sx={{ mt: 4, py: 1.5 }}
                >
                  {isSubmitting ? 'Submitting...' : 'Submit KYC →'}
                </Button>
              </form>
            </TabPanel>

            {/* BUSINESS TAB */}
            <TabPanel value='business' sx={{ p: 0 }}>
              <form onSubmit={handleBusinessSubmit(onBusinessSubmit)}>
                {/* BUSINESS DETAILS Section */}
                <Typography variant='h6' sx={{ mb: 3, color: 'primary.main', fontWeight: 600 }}>
                  BUSINESS DETAILS
                </Typography>
                <Grid container spacing={4} sx={{ mb: 6 }}>
                  <Grid item xs={12} md={6}>
                    <Controller
                      name='companyName'
                      control={businessControl}
                      rules={{ required: 'Company name is required' }}
                      render={({ field }) => (
                        <TextField
                          {...field}
                          fullWidth
                          label='Company name'
                          placeholder='Company name'
                          error={!!businessErrors.companyName}
                          helperText={businessErrors.companyName?.message}
                          required
                        />
                      )}
                    />
                  </Grid>
                  <Grid item xs={12} md={6}>
                    <Controller
                      name='businessType'
                      control={businessControl}
                      rules={{ required: 'Business type is required' }}
                      render={({ field }) => (
                        <TextField
                          {...field}
                          select
                          fullWidth
                          label='Business type'
                          error={!!businessErrors.businessType}
                          helperText={businessErrors.businessType?.message}
                          required
                        >
                          <MenuItem value='' disabled>— Select type —</MenuItem>
                          {businessTypes.map(type => (
                            <MenuItem key={type} value={type}>{type}</MenuItem>
                          ))}
                        </TextField>
                      )}
                    />
                  </Grid>
                  <Grid item xs={12} md={6}>
                    <Controller
                      name='tinTaxEin'
                      control={businessControl}
                      rules={{ required: 'TIN / TAX / EIN is required' }}
                      render={({ field }) => (
                        <TextField
                          {...field}
                          fullWidth
                          label='TIN / TAX / EIN'
                          placeholder='TIN / TAX / EIN'
                          error={!!businessErrors.tinTaxEin}
                          helperText={businessErrors.tinTaxEin?.message}
                          required
                        />
                      )}
                    />
                  </Grid>
                </Grid>

                <Divider sx={{ my: 4 }} />

                {/* OWNER / CONTACT Section */}
                <Typography variant='h6' sx={{ mb: 3, color: 'primary.main', fontWeight: 600 }}>
                  OWNER / CONTACT
                </Typography>
                <Grid container spacing={4} sx={{ mb: 6 }}>
                  <Grid item xs={12} md={6}>
                    <Controller
                      name='firstName'
                      control={businessControl}
                      rules={{ required: 'First name is required' }}
                      render={({ field }) => (
                        <TextField
                          {...field}
                          fullWidth
                          label='First name'
                          placeholder='First name'
                          error={!!businessErrors.firstName}
                          helperText={businessErrors.firstName?.message}
                          required
                        />
                      )}
                    />
                  </Grid>
                  <Grid item xs={12} md={6}>
                    <Controller
                      name='lastName'
                      control={businessControl}
                      render={({ field }) => (
                        <TextField
                          {...field}
                          fullWidth
                          label='Last name'
                          placeholder='Last name'
                        />
                      )}
                    />
                  </Grid>
                  <Grid item xs={12} md={6}>
                    <Controller
                      name='email'
                      control={businessControl}
                      rules={{ required: 'Email is required', pattern: /^\S+@\S+$/i }}
                      render={({ field }) => (
                        <TextField
                          {...field}
                          fullWidth
                          label='Email'
                          placeholder='Email'
                          error={!!businessErrors.email}
                          helperText={businessErrors.email?.message}
                          required
                        />
                      )}
                    />
                  </Grid>
                  <Grid item xs={12} md={6}>
                    <Controller
                      name='phone'
                      control={businessControl}
                      rules={{ required: 'Phone is required' }}
                      render={({ field }) => (
                        <TextField
                          {...field}
                          fullWidth
                          label='Phone'
                          placeholder='Phone'
                          error={!!businessErrors.phone}
                          helperText={businessErrors.phone?.message}
                          required
                        />
                      )}
                    />
                  </Grid>
                </Grid>

                <Divider sx={{ my: 4 }} />

                {/* BUSINESS ADDRESS Section */}
                <Typography variant='h6' sx={{ mb: 3, color: 'primary.main', fontWeight: 600 }}>
                  BUSINESS ADDRESS
                </Typography>
                <Grid container spacing={4} sx={{ mb: 6 }}>
                  <Grid item xs={12}>
                    <Controller
                      name='streetAddress'
                      control={businessControl}
                      rules={{ required: 'Street address is required' }}
                      render={({ field }) => (
                        <TextField
                          {...field}
                          fullWidth
                          label='Street address'
                          placeholder='Street address'
                          error={!!businessErrors.streetAddress}
                          helperText={businessErrors.streetAddress?.message}
                          required
                        />
                      )}
                    />
                  </Grid>
                  <Grid item xs={12} md={4}>
                    <Controller
                      name='city'
                      control={businessControl}
                      rules={{ required: 'City is required' }}
                      render={({ field }) => (
                        <TextField
                          {...field}
                          fullWidth
                          label='City'
                          placeholder='City'
                          error={!!businessErrors.city}
                          helperText={businessErrors.city?.message}
                          required
                        />
                      )}
                    />
                  </Grid>
                  <Grid item xs={12} md={4}>
                    <Controller
                      name='state'
                      control={businessControl}
                      rules={{ required: 'State is required' }}
                      render={({ field }) => (
                        <TextField
                          {...field}
                          fullWidth
                          label='State'
                          placeholder='State'
                          error={!!businessErrors.state}
                          helperText={businessErrors.state?.message}
                          required
                        />
                      )}
                    />
                  </Grid>
                  <Grid item xs={12} md={4}>
                    <Controller
                      name='zip'
                      control={businessControl}
                      rules={{ required: 'ZIP is required' }}
                      render={({ field }) => (
                        <TextField
                          {...field}
                          fullWidth
                          label='ZIP'
                          placeholder='ZIP'
                          error={!!businessErrors.zip}
                          helperText={businessErrors.zip?.message}
                          required
                        />
                      )}
                    />
                  </Grid>
                </Grid>

                <Divider sx={{ my: 4 }} />

                {/* COUNTRY & WEBSITE Section */}
                <Grid container spacing={4} sx={{ mb: 6 }}>
                  <Grid item xs={12} md={6}>
                    <Controller
                      name='countryCode'
                      control={businessControl}
                      rules={{ required: 'Country is required' }}
                      render={({ field }) => {
                        const selectedCountry = countries.find(c => c.phone === field.value) || null

                        return (
                          <CountryField
                            {...field}
                            value={selectedCountry}
                            onChange={(event, newValue) => {
                              field.onChange(newValue?.phone || null)
                            }}
                            valueType='phone'
                            label='Country *'
                            error={!!businessErrors.countryCode}
                            helperText={businessErrors.countryCode?.message}
                            fullWidth
                            ref={field.ref}
                          />
                        )
                      }}
                    />
                  </Grid>
                  <Grid item xs={12} md={6}>
                    <Controller
                      name='website'
                      control={businessControl}
                      render={({ field }) => (
                        <TextField
                          {...field}
                          fullWidth
                          label='Website'
                          placeholder='https://yourcompany.com'
                          InputProps={{
                            startAdornment: <InputAdornment position="start">https://</InputAdornment>,
                          }}
                        />
                      )}
                    />
                  </Grid>
                </Grid>

                <Button
                  fullWidth
                  size='large'
                  type='submit'
                  variant='contained'
                  disabled={isSubmitting}
                  sx={{ mt: 4, py: 1.5 }}
                >
                  {isSubmitting ? 'Submitting...' : 'Submit KYC →'}
                </Button>
              </form>
            </TabPanel>
          </TabContext>
        </CardContent>
      </KycCard>
    </Box>
  )
}

export default KycForm