import React from 'react';
import { Box, Input, Text, VStack, HStack, FormLabel } from '@chakra-ui/react';
import { SlCloudUpload } from 'react-icons/sl';
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';
import { OPACITY_ON_LOAD } from '../../Layout/animations';

// Yup validation schema
const schema = yup.object().shape({
    cin: yup
        .string()
        .required('CIN is required')
        .matches(/^[A-Za-z0-9]{21}$/, 'CIN must be exactly 21 characters long'),
    pan: yup
        .string()
        .required('Company PAN is required')
        .matches(/[A-Z]{5}[0-9]{4}[A-Z]{1}$/, 'Invalid PAN format'),
    gst: yup
        .string()
        .required('GST number is required')
        .matches(/\d{2}[A-Z]{5}\d{4}[A-Z]{1}[A-Z\d]{1}[Z]{1}[A-Z\d]{1}/, 'Invalid GST number format'),
    // gstFile: yup.mixed().required('GST certificate is required'),
    // panFile: yup.mixed().required('PAN card is required'),
});

const OnboardingAddCompanyDetails = () => {
    const { register, handleSubmit, formState: { errors } } = useForm({
        resolver: yupResolver(schema),
    });

    const onSubmit = (data) => {
        console.log('Form Data:', data);
    };

    return (
    <Box {...OPACITY_ON_LOAD}>
            <Text color={'#49475A'} fontWeight={500} fontSize={'sm'} mb={1}>
                Add company details
            </Text>
            <Text color={'#49475A'} fontWeight={500} fontSize={'xs'}>
                Lorem ipsum dolor sit amet, adipiscing elit.
            </Text>

            <Box as="form" onSubmit={handleSubmit(onSubmit)}>
                {/* CIN Field */}
                <Box mb={3}>
                    <FormLabel color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
                        CIN
                    </FormLabel>
                    <Input
                        type='text'
                        border="1px solid #e2e8f0"
                        borderRadius="md"
                        fontSize={"sm"}
                        fontWeight={500}
                        {...register('cin')}
                    />
                    {errors.cin && <Text color="red.500" fontWeight={500} fontSize="xs">{errors.cin.message}</Text>}
                </Box>

                {/* Company PAN Field */}
                <Box mb={3}>
                    <Text color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
                        Company PAN
                    </Text>
                    <Input
                        type='text'
                        border="1px solid #e2e8f0"
                        borderRadius="md"
                        fontSize={"sm"}
                        fontWeight={500}
                        {...register('pan')}
                    />
                    {errors.pan && <Text color="red.500" fontWeight={500} fontSize="xs">{errors.pan.message}</Text>}
                </Box>

                {/* Company GST Number */}
                <Box mb={3}>
                    <Text color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
                        Company GST number
                    </Text>
                    <Input
                        type='text'
                        border="1px solid #e2e8f0"
                        borderRadius="md"
                        fontSize={"sm"}
                        fontWeight={500}
                        {...register('gst')}
                    />
                    {errors.gst && <Text color="red.500" fontWeight={500} fontSize="xs">{errors.gst.message}</Text>}
                </Box>

                {/* Upload GST Certificate */}
                <Box mb={3}>
                    <Text color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
                        Upload GST Certificate
                    </Text>
                    <Box my={2}
                        position="relative"
                        onClick={() => document.getElementById('gst-file-input').click()}
                    >
                        <VStack
                            border={"1px dashed #D0D5DD"}
                            boxShadow={"md"}
                            borderRadius={"md"}
                            bg={"#faf8fd"}
                            p={4}
                            h={"28"}
                            justifyContent={"center"}
                            cursor="pointer"
                        >
                            <SlCloudUpload color={"#191D23"} size={30} />
                            <Text
                                color={"#191D23"}
                                fontWeight={"500"}
                                fontSize={"sm"}
                                mt={'2'}
                                mb={0}
                            >
                                Drag and drop files here or{' '}
                                <Text as="span" textDecoration="underline">
                                    Choose file
                                </Text>
                            </Text>
                        </VStack>
                        <input
                            type="file"
                            id="gst-file-input"
                            style={{ display: 'none' }}
                            {...register('gstFile')}
                        />
                    </Box>
                    {errors.gstFile && <Text color="red.500" fontSize="xs">{errors.gstFile.message}</Text>}

                    <HStack justifyContent={"space-between"}>
                        <Text color={"#C3C3C3"} fontSize={"xs"} fontWeight={400} mb={1}>
                            Supported formats- jpg, png, svg
                        </Text>
                        <Text color={"#C3C3C3"} fontSize={"xs"} fontWeight={400} mb={1}>
                            Maximum size - 20MB
                        </Text>
                    </HStack>
                </Box>

                {/* Upload PAN Card */}
                <Box mb={3}>
                    <Text color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
                        Upload PAN Card
                    </Text>
                    <Box my={2}
                        position="relative"
                        onClick={() => document.getElementById('pan-file-input').click()}
                    >
                        <VStack
                            border={"1px dashed #D0D5DD"}
                            boxShadow={"md"}
                            borderRadius={"md"}
                            bg={"#faf8fd"}
                            p={4}
                            h={"28"}
                            justifyContent={"center"}
                            cursor="pointer"
                        >
                            <SlCloudUpload color={"#191D23"} size={30} />
                            <Text
                                color={"#191D23"}
                                fontWeight={"500"}
                                fontSize={"sm"}
                                mt={'2'}
                                mb={0}
                            >
                                Drag and drop files here or{' '}
                                <Text as="span" textDecoration="underline">
                                    Choose file
                                </Text>
                            </Text>
                        </VStack>
                        <input
                            type="file"
                            id="pan-file-input"
                            style={{ display: 'none' }}
                            {...register('panFile')}
                        />
                    </Box>
                    {errors.panFile && <Text color="red.500" fontSize="xs">{errors.panFile.message}</Text>}

                    <HStack justifyContent={"space-between"}>
                        <Text color={"#C3C3C3"} fontSize={"xs"} fontWeight={400} mb={1}>
                            Supported formats- jpg, png, svg
                        </Text>
                        <Text color={"#C3C3C3"} fontSize={"xs"} fontWeight={400} mb={1}>
                            Maximum size - 20MB
                        </Text>
                    </HStack>
                </Box>

                {/* Submit Button */}
                <Box mt={6}>
                    <Text
                        as="button"
                        bg={'#6311CB'}
                        color={"white"}
                        fontWeight={600}
                        fontSize={'sm'}
                        p={2}
                        borderRadius={"md"}
                        type="submit"
                    >
                        Submit
                    </Text>
                </Box>
            </Box>
        </Box>
    );
};

export default OnboardingAddCompanyDetails;
