'use client';
import { useEffect } from 'react'
import Input from '@/components/ui/Input'
import DatePicker from '@/components/ui/DatePicker'
import Upload from '@/components/ui/Upload'
import { Form, FormItem } from '@/components/ui/Form'
import { useKYCStore } from '../_store/kycStore'
import { identificationSchema } from '../_utils/validationSchemas'
import { ID_TYPE_OPTIONS } from '../_utils/constants'
import sleep from '@/utils/sleep'
import { LiIdendityCard } from '@/icons'
import { useForm, Controller } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import classNames from '@/utils/classNames'

const Identification = () => {
    const { individualData, updateIndividualData, validateFileUpload } =
        useKYCStore()

    const {
        control,
        formState: { errors },
        watch,
        setValue,
    } = useForm({
        resolver: zodResolver(identificationSchema),
        defaultValues: individualData.identification,
        mode: 'onChange',
    })

    const watchedValues = watch()

    useEffect(() => {
        const subscription = watch((value) => {
            updateIndividualData('identification', value)
        })
        return () => subscription.unsubscribe();
    }, [watch, updateIndividualData])

    const handleBeforeUpload = (
        fileList,
        fieldName,
    ) => {
        if (!fileList || fileList.length === 0) return false

        const file = fileList[0]
        const validation = validateFileUpload(file, fieldName)

        if (!validation.valid) {
            console.error(validation.error)
            return false
        }

        return true
    }

    const handleFileUpload = async (
        files,
        fieldName,
    ) => {
        if (files.length === 0) return

        const file = files[0]
        await sleep(1000)
        setValue(fieldName, file)
    }

    const handleFileRemove = (fieldName) => {
        setValue(fieldName, null)
    }

    const renderFileUpload = (
        fieldName,
        label,
        accept,
        description,
    ) => {
        const currentFile = watchedValues[fieldName]

        return (
            <FormItem
                label={label}
                invalid={Boolean(errors[fieldName])}
                errorMessage={errors[fieldName]?.message}
                asterisk>
                <div className="space-y-3">
                    <Upload
                        draggable
                        accept={accept}
                        multiple={false}
                        uploadLimit={1}
                        beforeUpload={(fileList) =>
                            handleBeforeUpload(fileList, fieldName)
                        }
                        onChange={(_, files) =>
                            handleFileUpload(files, fieldName)
                        }
                        onFileRemove={() => handleFileRemove(fieldName)}
                        fileList={currentFile ? [currentFile] : []}
                        className="bg-gray-50 dark:bg-gray-800">
                        <div className="flex flex-col items-center justify-center min-h-30 py-8">
                            <div className="mb-2">
                                <LiIdendityCard className="heading-text text-4xl" />
                            </div>
                            <p className="text-center">
                                <span className="heading-text">
                                    Click to upload
                                </span>
                                <span> or drag and drop</span>
                            </p>
                            <p className="text-xs mt-1">{description}</p>
                        </div>
                    </Upload>
                </div>
            </FormItem>
        );
    }

    return (
        <div>
            <div className="mb-8 -mt-4">
                <p>
                    Please provide your identification documents for
                    verification.
                </p>
            </div>
            <Form>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-x-4">
                    <FormItem
                        label="ID Type"
                        invalid={Boolean(errors.idType)}
                        errorMessage={errors.idType?.message}
                        className="col-span-2"
                        asterisk>
                        <Controller
                            name="idType"
                            control={control}
                            render={({ field }) => (
                                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                                    {ID_TYPE_OPTIONS.map((option) => (
                                        <button
                                            key={option.value}
                                            type="button"
                                            className={classNames(
                                                'rounded-lg border p-4 transition-colors duration-150',
                                                option.value === field.value
                                                    ? 'border-primary dark:border-primary outline outline-primary'
                                                    : 'border-gray-200 dark:border-gray-800'
                                            )}
                                            onClick={() =>
                                                field.onChange(option.value)
                                            }>
                                            <span className="flex items-center justify-start gap-2">
                                                <span
                                                    className={classNames(
                                                        'rounded-full h-4 w-4 bg-white dark:bg-gray-700 border-2 flex items-center justify-center',
                                                        option.value ===
                                                            field.value
                                                            ? 'border-primary dark:border-primary'
                                                            : 'border-gray-200 dark:border-gray-800'
                                                    )}>
                                                    <span
                                                        className={classNames('w-1.5 h-1.5 rounded-full', option.value ===
                                                            field.value
                                                            ? 'bg-primary dark:bg-primary'
                                                            : '')}></span>
                                                </span>
                                                <span className="heading-text font-medium">
                                                    {option.label}
                                                </span>
                                            </span>
                                        </button>
                                    ))}
                                </div>
                            )} />
                    </FormItem>

                    <FormItem
                        label="ID Number"
                        invalid={Boolean(errors.idNumber)}
                        errorMessage={errors.idNumber?.message}
                        asterisk>
                        <Controller
                            name="idNumber"
                            control={control}
                            render={({ field }) => (
                                <Input {...field} placeholder="Enter your ID number" />
                            )} />
                    </FormItem>

                    <FormItem
                        label="Issue Date"
                        invalid={Boolean(errors.issueDate)}
                        errorMessage={errors.issueDate?.message}
                        asterisk>
                        <Controller
                            name="issueDate"
                            control={control}
                            render={({ field }) => (
                                <DatePicker
                                    {...field}
                                    placeholder="Select issue date"
                                    inputFormat="YYYY-MM-DD"
                                    disableDate={(date) =>
                                        date > new Date()
                                    } />
                            )} />
                    </FormItem>

                    <FormItem
                        label="Expiry Date"
                        invalid={Boolean(errors.expiryDate)}
                        errorMessage={errors.expiryDate?.message}
                        asterisk>
                        <Controller
                            name="expiryDate"
                            control={control}
                            render={({ field }) => (
                                <DatePicker
                                    {...field}
                                    placeholder="Select expiry date"
                                    inputFormat="YYYY-MM-DD"
                                    disableDate={(date) =>
                                        date < new Date()
                                    } />
                            )} />
                    </FormItem>
                </div>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    {renderFileUpload(
                        'idDocumentFront',
                        'ID Document (Front)',
                        '.jpg,.jpeg,.png,.pdf',
                        'Upload the front side of your ID document (Max 5MB)'
                    )}

                    {renderFileUpload(
                        'idDocumentBack',
                        'ID Document (Back)',
                        '.jpg,.jpeg,.png,.pdf',
                        'Upload the back side of your ID document (Max 5MB)'
                    )}
                </div>
            </Form>
        </div>
    );
}

export default Identification