'use client'

import { useForm } from 'react-hook-form'
import { ArrowUp, CheckCircle, Package2 } from 'lucide-react'
import { useState } from 'react'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '~/components/ui/tabs'
import { Textarea } from '~/components/ui/textarea'
import CodeGenService from '~/app/api/services/code-gen-service'
import { useParams } from 'next/navigation'

type FormData = {
  message: string
}

interface CodeProps {
  setCode: (newCode: string) => void
}

const Rightpanel: React.FC<CodeProps> = ({ setCode }) => {
  const { register, handleSubmit, reset, watch } = useForm<FormData>()

  const [textInput, setTextInput] = useState<string[]>([])
  const [successMessage, setSuccessMessage] = useState<string | null>(null)
  const { projectId } = useParams() as { projectId: string }

  const messageValue = watch('message', '') // watch the input value

  const handleTextSubmit = async (data: FormData) => {
    setTextInput((prevMessages) => [...prevMessages, data.message])
    try {
      const codeGenService = new CodeGenService()
      const response = await codeGenService.generateCode({
        project_id: projectId,
        endpoint_description: data.message,
      })
      setSuccessMessage('Code generated successfully!')
      setTimeout(() => setSuccessMessage(null), 3000) // Hide after 3 seconds
      reset()
      const { content_base64 } = response
      setCode(atob(content_base64))
      console.log(response)
    } catch (error) {
      console.error('Error generating code:', error)
    }
  }

  return (
    <div className="size-full max-w-[400px] flex-1 shrink-0 border border-l border-neutral-100">
      <Tabs
        defaultValue="code-chat"
        className="flex h-full flex-col items-start justify-start"
      >
        <TabsList className="w-full justify-start border-b border-neutral-100 bg-transparent">
          <TabsTrigger value="code-chat" className="">
            Code chat
          </TabsTrigger>
        </TabsList>

        <TabsContent
          value="code-chat"
          className="flex w-full flex-1 flex-col px-2 py-2"
        >
          <div className="flex h-full max-h-[600px] flex-1 flex-col justify-center gap-[3rem] overflow-y-auto">
            {!textInput.length ? (
              <div className="flex flex-col items-center gap-2 py-[14px] font-[inter]">
                <Package2 className="mb-2 h-[40px] w-[40px] text-[#7A69EE]" />
                <h5 className="text-[14px] font-medium text-[#212121]">
                  No tasks running yet
                </h5>
                <small className="text-center text-[12px] font-normal text-[#6B6B6B]">
                  As you generate endpoints the progress will be displayed here
                </small>
              </div>
            ) : (
              <div className="w-full">
                {textInput.map((msg, index) => (
                  <div key={index} className="mb-4">
                    <div className="w-[90%] rounded-md bg-[#F8F8F8] p-2">
                      <p className="px-2 text-[14px]">
                        {msg} something is the messag e
                      </p>
                    </div>

                    <div className="mt-2 p-2">
                      <p>Code Generated succesfully</p>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
          {/* Success Message */}
          {successMessage && (
            <div className="bg-green-100 text-green-700 absolute bottom-[140px] left-1/2 flex -translate-x-1/2 items-center gap-2 rounded-md p-2 shadow-md">
              <CheckCircle className="h-5 w-5" />
              <span>{successMessage}</span>
            </div>
          )}

          <form
            onSubmit={handleSubmit(handleTextSubmit)}
            className="shadow-aiChat mt-4 gap-8 border-[1px] border-[#EDEDED] p-3"
          >
            <Textarea
              {...register('message')}
              rows={4}
              className="resize-none border-none p-0 outline-none focus:outline-none focus-visible:ring-0"
              placeholder="Describe the next API you want to build."
            />

            <div className="flex items-center justify-end">
              <button
                type="submit"
                className={`rounded-md px-[14px] py-2 ${
                  !messageValue.trim()
                    ? 'cursor-not-allowed bg-[#C2C2C6]'
                    : 'cursor-pointer bg-black'
                }`}
                title="Submit"
                disabled={!messageValue.trim()}
              >
                <ArrowUp className="h-[30px] w-[36px]" color="#F5F5F7" />
              </button>
            </div>
          </form>
        </TabsContent>
      </Tabs>
    </div>
  )
}

export default Rightpanel