'use client'
import Breadcrumb from '@/components/breadcrumb/Breadcrumb'
import Layout from '@/components/layout/Layout'
import { currentLangCode, placeholderImage, slugGenerator, validateSlugFormat } from '@/utils/helpers'
import { translate } from '@/utils/translation'
import { createUpdateEpisodeApi } from '@/utils/api/api'
import { resetCreatedEpisode, resetCreatedPodcast, selectCreatedEpisode, selectCreatedPodcast } from '@/components/store/reducers/createPodcastReducer'
import React, { useEffect, useRef, useState } from 'react'
import { useSelector } from 'react-redux'
import DatePicker from 'react-datepicker'
import { AiFillAudio, AiFillPicture } from 'react-icons/ai'
import { IoIosCloseCircle } from 'react-icons/io'
import { SlCalender } from 'react-icons/sl'
import Image from 'next/image'
import toast from 'react-hot-toast'
import { useRouter } from 'next/router'
import {
    Select,
    SelectContent,
    SelectGroup,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from "@/components/ui/select"

const SOURCE_TYPES = [
    { value: 'youtube_link', label: 'youtubeUrlLbl' },
    { value: 'upload', label: 'uploadAudioLbl' },
]

const CreateEpisode = () => {

    const publishDateRef = useRef(null)
    const router = useRouter()
    const currLangCode = currentLangCode()
    const isEditEpisode = router.pathname?.includes('edit-episode')

    const createdPodcast = useSelector(selectCreatedPodcast)
    const createdEpisode = useSelector(selectCreatedEpisode)

    const [defaultValue, setDefaultValue] = useState({
        defaultEpisodeNo: '',
        defaultTitle: '',
        defaultSlug: '',
        defaultDescription: '',
        defaultPublishDate: new Date(),
        defaultSourceType: '',
        defaultAudioUrl: '',
        defaultAudioFile: null,
        defaultImageData: null,
        defaultImageFile: null,
    })
    const [isSubmitting, setIsSubmitting] = useState(false)

    useEffect(() => {
        if (isEditEpisode && createdEpisode) {
            setDefaultValue({
                defaultEpisodeNo: createdEpisode?.episode_no || '',
                defaultTitle: createdEpisode?.title || '',
                defaultSlug: createdEpisode?.slug || '',
                defaultDescription: createdEpisode?.description || '',
                defaultPublishDate: createdEpisode?.published_at ? new Date(createdEpisode.published_at.replace(' ', 'T')) : null,
                defaultSourceType: createdEpisode?.source_type || '',
                defaultAudioUrl: createdEpisode?.audio_url || '',
                defaultAudioFile: null,
                defaultImageData: createdEpisode?.image || null,
                defaultImageFile: null,
            })
        }
    }, [isEditEpisode, createdEpisode])

    const handleMainImage = e => {
        const selectedFile = e.target.files[0]
        if (!selectedFile) {
            return
        }
        if (!selectedFile.type.startsWith('image/')) {
            toast.error(translate('pleaseSelectImageFile'))
            return
        }
        setDefaultValue({ ...defaultValue, defaultImageData: URL.createObjectURL(selectedFile), defaultImageFile: selectedFile })
    }

    const handleAudioFile = e => {
        const selectedFile = e.target.files[0]
        if (!selectedFile) {
            return
        }
        if (!selectedFile.type.startsWith('audio/')) {
            toast.error(translate('audioRequired'))
            return
        }
        setDefaultValue({ ...defaultValue, defaultAudioFile: selectedFile })
    }

    const finalSubmit = async (e, isAddToDraft = 0) => {
        e.preventDefault()

        if (!createdPodcast?.id && !createdEpisode?.podcast_id) {
            toast.error(translate('podcastRequired'))
            return
        }
        if (!defaultValue.defaultEpisodeNo) {
            toast.error(translate('episodeNoRequired'))
            return
        }
        if (!defaultValue.defaultTitle) {
            toast.error(translate('titlerequired'))
            return
        }
        if (!defaultValue.defaultSlug || !validateSlugFormat(defaultValue.defaultSlug)) {
            toast.error(translate('slugValid'))
            return
        }
        if (!defaultValue.defaultDescription) {
            toast.error(translate('descriptionisrequire'))
            return
        }
        if (!defaultValue.defaultPublishDate) {
            toast.error(translate('publishDateRequired'))
            return
        }
        if (!defaultValue.defaultSourceType) {
            toast.error(translate('sourceTypeRequired'))
            return
        }
        if (defaultValue.defaultSourceType === 'youtube_link' && !defaultValue.defaultAudioUrl) {
            toast.error(translate('youtubeUrlLbl'))
            return
        }
        if (!isEditEpisode && defaultValue.defaultSourceType === 'upload' && !defaultValue.defaultAudioFile) {
            toast.error(translate('audioRequired'))
            return
        }
        if (!isEditEpisode && !defaultValue.defaultImageFile) {
            toast.error(translate('uploadMainImageLbl'))
            return
        }

        const publishDate = defaultValue.defaultPublishDate
        const formattedPublishDate = `${publishDate.getFullYear()}-${String(publishDate.getMonth() + 1).padStart(2, '0')}-${String(publishDate.getDate()).padStart(2, '0')}`

        try {
            setIsSubmitting(true)
            const response = await createUpdateEpisodeApi.createUpdateEpisode({
                action_type: isEditEpisode ? 2 : 1,
                episode_id: isEditEpisode ? createdEpisode?.id : undefined,
                podcast_id: createdPodcast?.id || createdEpisode?.podcast_id,
                title: defaultValue.defaultTitle,
                slug: defaultValue.defaultSlug,
                episode_no: Number(defaultValue.defaultEpisodeNo),
                description: defaultValue.defaultDescription,
                published_date: formattedPublishDate,
                is_draft: isAddToDraft,
                source_type: defaultValue.defaultSourceType,
                audio_url: defaultValue.defaultSourceType === 'youtube_link' ? defaultValue.defaultAudioUrl : undefined,
                audio_file: defaultValue.defaultSourceType === 'upload' ? defaultValue.defaultAudioFile : undefined,
                image: defaultValue.defaultImageFile,
            })
            if (response?.data?.error) {
                toast.error(response?.data?.message)
            } else {
                toast.success(translate(isAddToDraft === 1 ? 'draftCreatedSuccessfully' : (isEditEpisode ? 'episodeUpdatedSuccessfully' : 'episodeCreatedSuccessfully')))
                router.push(`/${currLangCode}/manage-podcast/${createdPodcast?.slug}`)
                resetCreatedPodcast()
                resetCreatedEpisode()
            }
        } catch (error) {
            toast.error(error?.response?.data?.message)
        } finally {
            setIsSubmitting(false)
        }
    }

    useEffect(() => {

        const title = defaultValue?.defaultTitle
        const timeout = setTimeout(() => {
            setDefaultValue({ ...defaultValue, defaultSlug: title ? slugGenerator(title) : '' })
        }, 500);
        return () => clearTimeout(timeout)

    }, [defaultValue?.defaultTitle])

    return (
        <Layout>
            <Breadcrumb secondElement={translate('managePodcast')} thirdElement={translate(isEditEpisode ? 'editEpisode' : 'createEpisode')} podcastPage={true} managePodcast={true} />
            <section className='container commonMT'>
                <form className='flex flex-col gap-5'>
                    {/* Podcast */}
                    <div className="">
                        <label htmlFor="podcast" className='text-base md:text-lg font-medium textPrimary'>{translate('podcast')}</label>
                        <div className='w-full h-[40px] bg-white font-[400] text-black mt-2 flex items-center border borderColor commonRadius px-4 py-2'>{createdPodcast?.title}</div>
                    </div>

                    <div className='grid grid-cols-1 sm:grid-cols-2 gap-6'>
                        {/* Episode No */}
                        <div className="">
                            <label htmlFor="episodeNo" className='text-base md:text-lg font-medium textPrimary'>{translate('episodeNoLbl')}</label>
                            <input
                                id="episodeNo"
                                type="number"
                                className="w-full border borderColor commonRadius dark:text-black px-4 py-2 mt-2 focus:outline-none"
                                placeholder={translate('episodeNoLbl')}
                                value={defaultValue.defaultEpisodeNo}
                                onChange={e => setDefaultValue({ ...defaultValue, defaultEpisodeNo: e.target.value })}
                            />
                        </div>

                        {/* Episode Title */}
                        <div className="">
                            <label htmlFor="title" className='text-base md:text-lg font-medium textPrimary'>{translate('episodeTitleLbl')}</label>
                            <input
                                id="title"
                                type="text"
                                className="w-full border borderColor commonRadius dark:text-black px-4 py-2 mt-2 focus:outline-none"
                                placeholder={translate('episodeTitleLbl')}
                                value={defaultValue.defaultTitle}
                                onChange={e => setDefaultValue({ ...defaultValue, defaultTitle: e.target.value })}
                            />
                        </div>
                    </div>

                    {/* Slug */}
                    <div className="">
                        <label htmlFor="slug" className='text-base md:text-lg font-medium textPrimary'>{translate('slugLbl')}</label>
                        <input
                            id="slug"
                            type="text"
                            className="w-full border borderColor commonRadius dark:text-black px-4 py-2 mt-2 focus:outline-none"
                            placeholder={translate('slug')}
                            value={defaultValue.defaultSlug}
                            onChange={e => setDefaultValue({ ...defaultValue, defaultSlug: e.target.value })}
                        />
                    </div>

                    {/* Episode Description */}
                    <div className="">
                        <label htmlFor="description" className='text-base md:text-lg font-medium textPrimary'>{translate('episodeDescriptionLbl')}</label>
                        <textarea
                            id="description"
                            rows={4}
                            className="w-full border borderColor commonRadius dark:text-black px-4 py-2 mt-2 focus:outline-none"
                            placeholder={translate('episodeDescriptionLbl')}
                            value={defaultValue.defaultDescription}
                            onChange={e => setDefaultValue({ ...defaultValue, defaultDescription: e.target.value })}
                        />
                    </div>

                    <div className='grid grid-cols-1 sm:grid-cols-2 gap-6'>
                        {/* Publish Date */}
                        <div className="">
                            <label htmlFor="publishDate" className='text-base md:text-lg font-medium textPrimary'>{translate('publishDate')}</label>
                            <div
                                className='datePickerWrapper flex items-center justify-between p-2 border borderColor commonRadius bg-white mt-2 cursor-pointer'
                                onClick={() => publishDateRef.current?.setOpen(true)}
                            >
                                <DatePicker
                                    ref={publishDateRef}
                                    dateFormat='yyyy-MM-dd'
                                    selected={defaultValue.defaultPublishDate}
                                    placeholderText={translate('publishDate')}
                                    clearButtonTitle
                                    todayButton={'Today'}
                                    minDate={new Date()}
                                    onChange={date => setDefaultValue({ ...defaultValue, defaultPublishDate: date })}
                                />
                                <SlCalender className='form-calender' />
                            </div>
                        </div>

                        {/* Select Source Type */}
                        <div className="">
                            <label htmlFor="sourceType" className='text-base md:text-lg font-medium textPrimary'>{translate('selectSourceTypeLbl')}</label>
                            <Select
                                value={defaultValue.defaultSourceType}
                                onValueChange={value => setDefaultValue({ ...defaultValue, defaultSourceType: value, defaultAudioUrl: '', defaultAudioFile: null })}
                            >
                                <SelectTrigger className={`w-full h-[40px] bg-white font-[400] mt-2 ${defaultValue.defaultSourceType ? 'text-black' : 'text-gray-500'}`}>
                                    <SelectValue placeholder={translate('selectSourceTypeLbl')} />
                                </SelectTrigger>
                                <SelectContent>
                                    <SelectGroup>
                                        {
                                            SOURCE_TYPES.map(elem => (
                                                <SelectItem value={elem.value} key={elem.value}>{translate(elem.label)}</SelectItem>
                                            ))
                                        }
                                    </SelectGroup>
                                </SelectContent>
                            </Select>
                        </div>
                    </div>

                    {/* YouTube URL */}
                    {
                        defaultValue.defaultSourceType === 'youtube_link' &&
                        <div className="">
                            <label htmlFor="audioUrl" className='text-base md:text-lg font-medium textPrimary'>{translate('youtubeUrlLbl')}</label>
                            <input
                                id="audioUrl"
                                type="text"
                                className="w-full border borderColor commonRadius dark:text-black px-4 py-2 mt-2 focus:outline-none"
                                placeholder={translate('youtubeUrlLbl')}
                                value={defaultValue.defaultAudioUrl}
                                onChange={e => setDefaultValue({ ...defaultValue, defaultAudioUrl: e.target.value })}
                            />
                        </div>
                    }

                    {/* Upload Audio */}
                    {
                        defaultValue.defaultSourceType === 'upload' &&
                        <div className="">
                            <div className="relative h-[100px] bg-white border border-dashed borderColor p-4 flexCenter commonRadius text-center cursor-pointer hover:border-red-500 transition">
                                <input
                                    type="file"
                                    accept="audio/*"
                                    className="absolute h-full w-full top-0 left-0 bottom-0 right-0 cursor-pointer opacity-0"
                                    onChange={e => handleAudioFile(e)}
                                />
                                <div className='flexCenter flex-col text-gray-400 gap-2'>
                                    <span className='text-2xl'><AiFillAudio /></span>
                                    <span>{defaultValue.defaultAudioFile?.name || translate('uploadAudioLbl')}</span>
                                </div>
                            </div>
                            {
                                isEditEpisode && !defaultValue.defaultAudioFile && defaultValue.defaultAudioUrl &&
                                <div className='mt-2 bg-white rounded-xl p-4 border'>
                                    <audio controls src={defaultValue.defaultAudioUrl} className="w-full" />
                                </div>
                            }
                        </div>
                    }

                    {/* Upload Main Image */}
                    <div className="">
                        <div className="relative h-[140px] bg-white border border-dashed borderColor p-4 flexCenter commonRadius text-center cursor-pointer hover:border-red-500 transition">
                            <input
                                type="file"
                                accept="image/*"
                                className="absolute h-full w-full top-0 left-0 bottom-0 right-0 cursor-pointer opacity-0"
                                onChange={e => handleMainImage(e)}
                            />
                            <div className='flexCenter flex-col text-gray-400 gap-2'>
                                <span className='text-2xl'><AiFillPicture /></span>
                                <span>{translate('uploadMainImageLbl')}</span>
                            </div>
                        </div>
                        {
                            defaultValue.defaultImageData &&
                            <div className='flex items-start justify-start mt-2 w-max relative'>
                                <span onClick={() => setDefaultValue({ ...defaultValue, defaultImageData: null, defaultImageFile: null })} className='absolute top-0 right-0 bg-black text-white rounded-full cursor-pointer'><IoIosCloseCircle /></span>
                                <Image src={defaultValue.defaultImageData} alt="Main Upload" className="h-24 w-24 object-cover border commonRadius" onError={placeholderImage} height={0} width={0} />
                            </div>
                        }
                    </div>


                    {/* Footer Buttons */}
                    <div className='flex items-center gap-3 flex-wrap justify-end mt-4'>
                        <button
                            className='border secondaryBorder dark:border-white/50 px-3 py-2 rounded-md text-[18px] font-[600] w-[200px] disabled:opacity-50 disabled:cursor-not-allowed'
                            onClick={e => finalSubmit(e, 1)}
                            disabled={isSubmitting}
                        >{translate('saveAsDraft')}</button>
                        <button
                            className='commonBtn px-3 !py-2 text-[18px] font-[600] w-[200px] disabled:opacity-50 disabled:cursor-not-allowed'
                            onClick={e => finalSubmit(e)}
                            disabled={isSubmitting}
                        >{translate(isEditEpisode ? 'update' : 'publishBtn')}</button>
                    </div>
                </form>
            </section>
        </Layout>
    )
}

export default CreateEpisode