import {useLocation, useNavigate, Link} from 'react-router-dom'
import {useQuery, useMutation} from '@tanstack/react-query'
import {FaCaretDown} from "react-icons/fa";
import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
import {useEffect, useState} from 'react';
import RouteLinks from '../../RouteLinks';
import {getSubscriptionsView, updateTemplate, updateCustomTemplate, rebuildTemplate} from '../../services/siteServices'
import queryKeys from '../../services/queryKeys'
import getDateTimeFromDateString from '../../helpers/getDateTimeFromDateString';
import RebuildModal from './RebuildModal';

export default function SubscriptionViewCom() {


    const {state} = useLocation()
    const navigate = useNavigate()

    const [rebuildStatus, setRebuildStatus] = useState({status: false, data: {}})

    const [values, setValues] = useState({custom_id: '', template_uid: ''})

    const handleValueChange = ({target: {name, value}}) => {
        if (name == 'custom_template') {
            setValues(prev => ({...prev, custom_id: value}))
        } else if (name == 'template') {
            setValues(prev => ({...prev, template_uid: value}))
        } else {
            setValues(prev => ({...prev}))
        }
    }

    useEffect(() => {
        if (!state?.subscriptionUID) {
            navigate(RouteLinks.homePage, {replace: true})
        }
    }, [])

    const {data, isFetching, isError, error} = useQuery({
        queryKey: queryKeys.subscriptions_view,
        queryFn: () => {
            // const filterData = filter?.type ? {[filter?.type]: filter.id} : {}
            const reqData = {
                subscription_uid: state?.subscriptionUID
                // page,
                // ...filterData
            }
            return getSubscriptionsView(reqData)
        },
        staleTime: 0 //0 mins
    })
    const subscriptionViewData = data?.data // ACCOUNT VIEW DATA
    const customTemplates = subscriptionViewData?.available_custom_templates
    const availableTemplates = subscriptionViewData?.available_templates
    const selectedSubscription = subscriptionViewData?.subscription
    const currentCustomTem = subscriptionViewData?.available_custom_templates?.filter(item => item?.custom_id == subscriptionViewData?.subscription?.custom_template)[0]?.custom_id
    const currentTemplate = subscriptionViewData?.available_templates?.filter(item => item?.template_uid == subscriptionViewData?.subscription?.product_template)[0]?.template_uid
    // // console.log('subscriptionViewData', subscriptionViewData, currentCustomTem, currentTemplate)

    // useEffect(()=>{
    //     if(data){
    //         const currentCustomTem = subscriptionViewData?.available_custom_templates?.filter(item => item?.custom_id == subscriptionViewData?.subscription?.custom_template)[0]?.custom_id
    //         const currentTemplate = subscriptionViewData?.available_templates?.filter(item => item?.template_uid == subscriptionViewData?.subscription?.product_template)[0]?.template_uid
    //         setValues({custom_id: currentCustomTem || '', template_uid: currentTemplate || ''})
    //     }
    // },[data])

    const templateRebuild = useMutation({
        mutationFn: (fields) => {
            return rebuildTemplate(fields)
        },
        onSettled: () => {
            setTimeout(() => {
                setRebuildStatus({status: false, data: {}})
                templateRebuild.reset()
            }, 3000)
        }
    })

    const templateUpdate = useMutation({
        mutationFn: (fields) => {
            return updateTemplate(fields)
        },
        // onError: (error) => {
        // },
        // onSuccess: (res) => {
        // },
        onSettled: () => {
            setTimeout(() => {
                templateUpdate.reset()
            }, 3000)
        }
    })

    const customTemplateUpdate = useMutation({
        mutationFn: (fields) => {
            return updateCustomTemplate(fields)
        },
        // onError: (error) => {
        // },
        // onSuccess: (res) => {
        // },
        onSettled: () => {
            setTimeout(() => {
                customTemplateUpdate.reset()
            }, 3000)
        }
    })

    const handleUpdateTemplate = () => {
        const reqData = {
            subscrtiption_uid: state?.subscriptionUID,
            template_uid: values.template_uid
        }
        templateUpdate.mutate(reqData)
    }

    const handleRebuildTemplate = () => {
        const reqData = {
            subscription_uid: state?.subscriptionUID,
        }
        templateRebuild.mutate(reqData)
    }

    const handleUpdateCustomTemplate = () => {
        const reqData = {
            subscrtiption_uid: state?.subscriptionUID,
            custom_id: values.custom_id
        }
        customTemplateUpdate.mutate(reqData)
    }


    return (
        <div className='w-full flex flex-col gap-8'>
            <BreadcrumbCom title={`Subscription View [${state?.subscriptionUID}]`}
                           paths={['Dashboard', 'Subscription View']}/>

            {isFetching ?
                <>
                    <p className='text-slate-800'>Loading...</p>
                </>
                : isError ?
                    <p className='text-red-500'>{error.message}</p>
                    :
                    <>
                        <div
                            className='w-full box bg-white dark:bg-black-box text-black-body dark:text-white-body overflow-x-auto'>
                            <table className="py-2 w-full text-sm bg-[aliceblue] dark:bg-transparent rounded-[10px]">
                                <tbody>
                                <tr className="py-2 border-t border-dashed border-slate-300">
                                    <td className="px-2 py-2">
                                        <div className="text-left">
                                            <div className="text-base font-semibold">{getDateTimeFromDateString(selectedSubscription?.added)}</div>
                                            <div className="text-base font-semibold">{getDateTimeFromDateString(selectedSubscription?.updated)}</div>
                                            <div className="text-base font-semibold">ID: {selectedSubscription?.id}</div>
                                        </div>
                                    </td>
                                    <td className="px-2">
                                        <div className="text-left">
                                            <div
                                                className="text-base font-semibold">{selectedSubscription?.product_id}</div>
                                            <div><a href={`http://${selectedSubscription?.primary_server}:${selectedSubscription?.provision_port}`}
                                                    target='_blank'
                                                    rel="noreferrer">{selectedSubscription?.primary_server}:{selectedSubscription?.provision_port}</a>
                                            </div>

                                        </div>
                                    </td>
                                    <td className="px-2">
                                        <div className="text-left">


                                            <span className="text-base font-semibold">
                                                     <a href={`https://${selectedSubscription?.internal_url}`}
                                                        target='_blank'
                                                        rel="noreferrer">{selectedSubscription?.internal_url}</a>
                                                    </span>

                                            <br/>
                                            <span className="text-base font-semibold">
                                                    <a href={`${selectedSubscription?.external_url}`}
                                                       target='_blank'
                                                       rel="noreferrer">{selectedSubscription?.external_url}</a>
                                                    </span>

                                            <br/>


                                            <div   className="text-base font-semibold">
                                                <br/><span>Template :</span> {selectedSubscription?.product_template}
                                                <br/><span>Custom :</span> {selectedSubscription?.custom_template}
                                            </div>
                                        </div>
                                    </td>
                                    <td className="px-2">
                                        <div className="text-right">
                                            <div
                                                className="text-base font-semibold">{selectedSubscription?.status}</div>
                                        </div>
                                    </td>
                                    <td className="px-2">
                                        <div className="text-right">
                                            <button name='template'
                                                    onClick={() => setRebuildStatus({status: true, data: {}})}
                                                    className={`rounded-md p-2 bg-primary text-white text-center`}>
                                                Rebuild
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>

                        <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>

                            <div className='w-full'>
                                <label className='font-medium'>Assign Template</label>
                                <div className='flex flex-col xs:flex-row md:items-center gap-2'>
                                    <div className='w-full h-10 relative overflow-hidden rounded-md'>
                                        <select name='template' value={currentTemplate || values.template_uid}
                                                onChange={handleValueChange}
                                                className='w-full h-full p-2 appearance-none dark:bg-transparent border-0 dark:border-1 border-white ring-0 outline-none'>
                                            <option value=''>None</option>
                                            {availableTemplates && availableTemplates.map(item => (
                                                <option key={item?.template_uid}
                                                        value={item?.template_uid}>{`${item?.product_id}-${item?.provision_name}`}</option>
                                            ))}
                                        </select>
                                        <FaCaretDown className='text-base absolute top-1/2 -translate-y-1/2 right-2'/>
                                    </div>
                                    <button name='template' onClick={handleUpdateTemplate}
                                            disabled={(templateUpdate.isPending || !values.template_uid)}
                                            className={`rounded-md p-2 bg-primary text-white text-center ${(templateUpdate.isPending || !values.template_uid) && 'opacity-50'}`}>Update
                                    </button>
                                </div>
                                <p className={`p-2 mt-4 ${templateUpdate.isSuccess ? 'text-emerald-500' : 'text-red-500'}`}>{templateUpdate.isSuccess ? 'Template updated' : templateUpdate.isSuccess ? 'Unable to complete request, try again' : ''}</p>
                            </div>
                        </div>

                        <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>

                            <div className='w-full'>
                                <label className='font-medium'>Assign Custom Template</label>
                                <div className='flex flex-col xs:flex-row md:items-center gap-2'>
                                    <div className='w-full h-10 relative overflow-hidden rounded-md'>
                                        <select name='custom_template' value={currentCustomTem || values.custom_id}
                                                onChange={handleValueChange}
                                                className='w-full h-full p-2 appearance-none dark:bg-transparent border-0 dark:border-1 border-white ring-0 outline-none'>
                                            <option value=''>None</option>
                                            {customTemplates && customTemplates.map(item => (
                                                <option key={item?.custom_id}
                                                        value={item?.custom_id}>{`${item?.custom_id}-${item?.provision_name}`}</option>
                                            ))}
                                        </select>
                                        <FaCaretDown className='text-base absolute top-1/2 -translate-y-1/2 right-2'/>
                                    </div>
                                    <button name='custom_template' onClick={handleUpdateCustomTemplate}
                                            disabled={(customTemplateUpdate.isPending || !values.custom_id)}
                                            className={`rounded-md p-2 bg-primary text-white text-center ${(customTemplateUpdate.isPending || !values.custom_id) && 'opacity-50'}`}>Update
                                    </button>
                                </div>
                                <p className={`p-2 mt-4 ${customTemplateUpdate.isSuccess ? 'text-emerald-500' : 'text-red-500'}`}>{customTemplateUpdate.isSuccess ? 'Custom Template updated' : customTemplateUpdate.isSuccess ? 'Unable to complete request, try again' : ''}</p>
                            </div>
                        </div>
                    </>
            }
            {rebuildStatus?.status &&
                <RebuildModal data={{}} templateRebuild={templateRebuild} proceedFunc={handleRebuildTemplate}
                              closeModal={() => setRebuildStatus({status: false, data: {}})}/>}
        </div>
    )
}