'use client'

import { usePathname, useRouter } from 'next/navigation'
import { PrefetchKind } from 'next/dist/client/components/router-reducer/router-reducer-types'
// import { useChat, type Message } from '@aigxion/isdk/react'
import toast from 'react-hot-toast'

import { cn } from '@/lib/utils'
import { ChatList } from '@/components/chat-list'
import { ChatPanel } from '@/components/chat-panel'
import { ChatScrollAnchor } from '@/components/chat-scroll-anchor'
import { nanoid } from '@/lib/utils'
import { functionSchemas } from '@/lib/functions/schemas'
import { Landing } from '@/components/landing'
import { useGlobalStore } from '@/app/state/global-store'
import { useW3GPTDeploy } from '@/lib/hooks/use-w3gpt-deploy'
// import { useNetwork } from 'wagmi'
import { useEffect, useState } from 'react'
import { FadeIn } from './landing/fade-in'

import Image from 'next/image';
import logoImage from '@/components/images/logo.png';
import { useTranslation } from 'react-i18next'
import { Button, Modal } from 'antd'
import { type Message, useChat } from '@/lib/hooks/use-chat'
import { ChatRequest, FunctionCallHandler } from '@aigxion/isdk'

export interface ChatProps extends React.ComponentProps<'div'> {
  initialMessages?: Message[]
  id?: string
  showLanding?: boolean
  avatarUrl?: string | null | undefined
}

export function Chat({
  id,
  initialMessages,
  className,
  showLanding = false,
  avatarUrl
}: ChatProps) {
  const router = useRouter()
  const path = usePathname()
  const { t, i18n } = useTranslation()

  const isChatPage = path.includes('chat')
  const {
    setIsGenerating,
    setIsDeploying,
    setDeployContractConfig,
    verifyContractConfig,
    lastDeploymentData,
    setLastDeploymentData
  } = useGlobalStore()

  // const { chain } = useNetwork()
  // const fallbackChainId = chain?.unsupported === false ? chain.id : 5001
  // const activeChainId = chain?.id ?? fallbackChainId
  // const { deploy } = useW3GPTDeploy({ chainId: activeChainId })


  useEffect(() => {
    let isLounted = true

    async function verifyContract() {

    }

    verifyContract()


    // try {
    //   let data = localStorage.getItem("UserData");
    //   if (data == null) return

    //   data = JSON.parse(data)

    //   console.log("UserData", data)

    // } catch (error) {
    //   console.log(error)
    // }

    return () => {
      isLounted = false
    }
  }, [])

  useEffect(() => {
    let isMounted = true

    async function verifyContract() {
      if (
        !verifyContractConfig?.deployHash ||
        lastDeploymentData?.verificationStatus === 'success'
      ) {
        return
      }

      try {
        const response = await fetch('/api/verify-contract', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(verifyContractConfig)
        })

        const data = await response.json()

        if (typeof data === 'string' && data.startsWith('0x') && isMounted) {
          toast.success('Contract verified successfully!')
          lastDeploymentData &&
            setLastDeploymentData({
              ...lastDeploymentData,
              verificationStatus: 'success'
            })
        } else {
          setTimeout(verifyContract, 15000) // Retry after 15 seconds
        }
      } catch (error) {
        console.error('Verification failed', error)
        setTimeout(verifyContract, 15000) // Retry after 15 seconds
      }
    }

    verifyContract()

    return () => {
      isMounted = false
    }
  }, [lastDeploymentData, verifyContractConfig, setLastDeploymentData])

  const functionCallHandler: FunctionCallHandler = async (
    chatMessages,
    functionCall
  ) => {
    if (functionCall.name === 'deploy_contract') {
      setIsDeploying(true)
      const { chainId, contractName, sourceCode, constructorArgs } = JSON.parse(
        functionCall.arguments || '{}'
      )

      // setDeployContractConfig({
      //   chainId: chainId ?? activeChainId,
      //   contractName,
      //   sourceCode,
      //   constructorArgs
      // })

      // const verifiedContractAddress = await deploy({
      //   chainId: chainId ?? activeChainId,
      //   contractName,
      //   sourceCode,
      //   constructorArgs
      // })

      // const functionResponse: ChatRequest = {
      //   messages: [
      //     ...chatMessages,
      //     {
      //       id: nanoid(),
      //       name: 'deploy_contract',
      //       role: 'function',
      //       content: JSON.stringify({ verifiedContractAddress })
      //     }
      //   ],
      //   functions: functionSchemas
      // }
      // return functionResponse
    } else if (functionCall.name === 'text_to_image') {
      const response = await fetch('/api/text-to-image', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ text: functionCall.arguments })
      })
      if (!response.ok) {
        throw new Error(response.statusText)
      }
      const { imageUrl, metadataUrl } = await response.json()

      const functionResponse: ChatRequest = {
        messages: [
          ...chatMessages,
          {
            id: nanoid(),
            name: 'text-to-image',
            role: 'function',
            content: JSON.stringify({ imageUrl, metadataUrl })
          }
        ],
        functions: functionSchemas
      }
      return functionResponse
    }
  }

  const { messages, append, reload, stop, isLoading, input, setInput } =
    useChat({
      experimental_onFunctionCall: functionCallHandler,
      initialMessages,
      id,
      body: {
        id
      },
      onResponse(response) {
        setIsGenerating(true)
        if (!isChatPage) {
          // router.prefetch(`${i18n.language}/chat/${id}`, {
          //   kind: PrefetchKind.FULL
          // })
        }
        if (response.status === 401) {
          toast.error(response.statusText)
        }
      },
      onFinish() {
        setIsGenerating(false)
        if (!isChatPage) {
          // history.pushState({}, '', `${i18n.language}/chat/${id}`)
          // history.go(1)
        }
      }
    })

  return (
    <>
      <div className={cn('px-4  pt-4 md:pt-10 h-full relative', className)}>
        <FadeIn >
          {/* {showLanding && <Landing disableAnimations={isChatPage} />} */}
          {/* {showLanding && <h3 className='text-center text-2xl font-bold py-4'>What do you want to ask about AI or Blockchain?</h3>} */}
          {
            showLanding &&
            // <Image src={logoImage} height={40} alt="show" className="cursor-pointer m-auto" onClick={() => { }} />
            <LogoAI
              className='flex text-center m-auto'
            />
          }

        </FadeIn>
        <ChatList messages={messages} avatarUrl={avatarUrl} />


        <ChatScrollAnchor trackVisibility={isLoading} />

        {!!messages && <ChatPanel
          id={id}
          stop={stop}
          isLoading={isLoading}
          append={append}
          reload={reload}
          messages={messages}
          input={input}
          setInput={setInput}

        />}

      </div>
    </>
  )
}


export const LogoAI: React.FC<{ className?: string, width?: string }> = ({ className, width }) => {

  return (
    <svg
      className={className}
      width={!!width ? width : "186"}
      height="40"
      version="1.1"
      id=""
      xmlns="http://www.w3.org/2000/svg"
      xmlnsXlink="http://www.w3.org/1999/xlink"
      x="0px"
      y="0px"
      viewBox="0 0 3477.56 1000"
      style={{
        // 废弃属性
        // enableBackground: 'new 0 0 3477.56 1000' 
      }}
      xmlSpace="preserve"
    >
      <style>
        {`
        .st0{opacity:0.24;}
        .st1{fill:#2565D5;}
        .st2{fill:#36C072;}
        .st3{fill:#191919;}
      `}
      </style>
      <g>
        <g>
        </g>
      </g>
      <g className="st0">
      </g>
      <g>
        <polygon className="st1" points="643.09,378.66 536.6,560.35 701.54,833.7 746.33,907.97 963.7,907.97 	" />
        <polygon className="st2" points="500.55,143.33 392.41,321.38 500.58,500.65 608.43,321.43 	" />
        <polygon className="st1" points="36.3,907.97 253.67,907.97 422.84,629.82 465.37,559.14 357.45,379.28 	" />
      </g>
      <g>
        <polygon className="st1" points="1616.79,1237.59 1615.18,1240.33 1617.67,1244.46 1618.34,1245.58 1621.62,1245.58 	" />
        <polygon className="st2" points="1614.64,1234.04 1613.01,1236.73 1614.64,1239.43 1616.27,1236.73 	" />
        <polygon className="st1" points="1607.64,1245.58 1610.92,1245.58 1613.47,1241.38 1614.11,1240.32 1612.48,1237.6 	" />
      </g>
      <g>
        <g>
          <g>
            <path className="st3" d="M1130.46,895.66v-86.92c15.93,2.41,31.63,3.62,47.07,3.62c27.04,0,46-7.6,56.86-22.82
				c10.86-15.21,16.3-37.77,16.3-67.72V260.44h109.37V726.9c0,56.97-14.97,99.95-44.9,128.93c-29.95,28.97-72.44,43.46-127.48,43.46
				C1167.89,899.28,1148.82,898.07,1130.46,895.66z"/>
            <path className="st3" d="M1802.61,590.73l-252.06,15.93c1.93,28.01,11.34,48.53,28.25,61.57c16.9,13.04,42.73,19.56,77.51,19.56
				c23.17,0,47.19-2.77,72.06-8.33c24.87-5.54,44.06-11.95,57.59-19.2v82.58c-12.57,7.24-32.59,13.65-60.12,19.2
				c-27.53,5.54-57.47,8.33-89.82,8.33c-42.01,0-76.9-6.04-104.66-18.11c-27.77-12.07-49.02-32.96-63.74-62.65
				c-14.74-29.7-22.09-70.37-22.09-122.04c0-51.66,7.48-92.35,22.46-122.04c14.96-29.7,36.45-50.58,64.46-62.65
				c28-12.07,63.49-18.11,106.48-18.11c43.46,0,77.5,7,102.12,21c24.63,14.01,41.65,33.45,51.07,58.31
				c9.42,24.88,14.12,55.66,14.12,92.35C1806.24,554.27,1805.03,572.38,1802.61,590.73z M1710.63,521.19
				c0-24.63-4.83-43.69-14.49-57.22c-9.67-13.51-28.73-20.28-57.22-20.28c-31.87,0-54.21,6.88-67,20.64
				c-12.8,13.76-19.92,36.83-21.37,69.17L1710.63,521.19z"/>
            <path className="st3" d="M1914.52,743.55c-16.66-15.93-24.99-41.76-24.99-77.5V212.63h105.02V640.7c0,16.91,2.41,28.38,7.25,34.41
				c4.82,6.04,13.28,9.06,25.35,9.06c8.21,0,15.21-0.73,21.01-2.18v81.12c-13.53,2.9-28.5,4.35-44.91,4.35
				C1960.75,767.46,1931.18,759.49,1914.52,743.55z"/>
            <path className="st3" d="M2134.7,743.55c-16.66-15.93-24.99-41.76-24.99-77.5V212.63h105.02V640.7c0,16.91,2.41,28.38,7.25,34.41
				c4.82,6.04,13.28,9.06,25.35,9.06c8.21,0,15.21-0.73,21.01-2.18v81.12c-13.53,2.9-28.5,4.35-44.91,4.35
				C2180.93,767.46,2151.36,759.49,2134.7,743.55z"/>
            <path className="st3" d="M2326.28,817.44c31.87,0,55.17-4.6,69.9-13.76c14.72-9.18,25.23-23.9,31.51-44.19l-152.1-387.51h116.61
				l91.99,278.86h4.35l86.92-278.86h112.99l-131.1,354.92c-17.87,48.76-35.85,85.83-53.96,111.18
				c-18.1,25.35-40.69,43.33-67.72,53.96c-27.05,10.61-63.51,15.93-109.38,15.93V817.44z"/>
            <path className="st3" d="M3056.38,638.53h-204.26l-43.46,124.58h-114.45l187.6-502.67h147.76l186.15,502.67h-116.62L3056.38,638.53z
				 M3024.5,547.27l-65.18-190.5h-8.69l-66.64,190.5H3024.5z"/>
            <path className="st3" d="M3283.44,314.03c-7.97-2.41-13.53-7.48-16.66-15.21c-3.15-7.72-4.7-20.03-4.7-36.94
				c0-16.41,1.56-28.36,4.7-35.85c3.14-7.48,8.69-12.42,16.66-14.85c7.96-2.41,20.39-3.62,37.3-3.62c17.39,0,29.93,1.21,37.66,3.62
				c7.72,2.43,13.15,7.25,16.3,14.49c3.14,7.25,4.7,19.32,4.7,36.22c0,16.91-1.57,29.22-4.7,36.94c-3.15,7.73-8.69,12.8-16.66,15.21
				c-7.96,2.43-20.4,3.62-37.3,3.62C3303.84,317.66,3291.41,316.46,3283.44,314.03z M3267.87,371.98h105.02v391.13h-105.02V371.98z"
            />
          </g>
        </g>
      </g>
    </svg>
  )
};