"use client"
import LogoIcon from "./assets/LogoIcon"
import LogoText from "./assets/LogoText"
import { useEffect, useState } from "react"
import { SubmitSecondOnboardingPage } from "./SubmitSecondOnboardingPage"
import { useRouter } from "next/navigation"
import CfRadioButton from "./CfRadioButton"
import FinishSection from "./FinishSection"
import PythonLibrariesInput from "./PythonLibrariesInput"

export default function SecondPage({ className = "" }: SecondPageProps) {
  const [teamSize, setTeamSize] = useState<string>("")
  const [pythonUsage, setPythonUsage] = useState<string>("")
  const [pythonLibraries, setPythonLibraries] = useState<string[]>([])
  const [colleagueInviteEmail, setColleagueInviteEmail] = useState("")
  const [isSubmitted, setIsSubmitted] = useState(false)
  const [emailInputElement, setEmailInputElement] = useState<HTMLInputElement | null>(null)
  const router = useRouter()
  useEffect(() => {
    setEmailInputElement(document.getElementById("colleague-invite") as HTMLInputElement)
  }, [])

  const submitSecondPage = async () => {
    setIsSubmitted(true)
    if (!emailInputElement?.checkValidity()) {
      return
    }
    const formData = {
      teamSize,
      pythonUsage,
      pythonLibraries,
      colleagueInviteEmail,
    }
    console.log("Form data: ", formData)

    await SubmitSecondOnboardingPage(teamSize, pythonUsage, pythonLibraries, colleagueInviteEmail)
    // Redirect to the next page or show a success message
    await router.push("/app")
  }

  return (
    <div
      className={`font-inter z-[3] flex flex-wrap rounded-sm border border-solid border-white bg-[radial-gradient(#FAFAFA1F,_#F6F6F600)] px-8 pb-8 pt-20 text-base
 leading-5 backdrop-blur-md ${className}`}
    >
      {/* md breakpoint is typically 768px */}
      <div
        id="welcometext"
        className="flex flex-wrap items-start justify-start w-full lg:w-1/2 mb-8 md:mb-0"
      >
        <div className="flex flex-col gap-y-8 self-stretch">
          <div className="flex items-center gap-x-[11px]">
            <LogoIcon className="h-8 w-12 flex-shrink-0" />
            <LogoText className="mb-[2.9px] h-5 w-36" />
          </div>
          <h1 className="text-[26px] font-semibold leading-8 text-white mb-8">
            Please take a minute to help us personalize your experience.
          </h1>
        </div>
      </div>
      <div
        id="questions"
        className="flex flex-col items-start justify-start text-white gap-y-6 px-4 w-full lg:w-1/2"
      >
        <section className="font-inter leading-5 text-white">What&apos;s your team size?</section>
        <CfRadioButton
          options={["Just me", "2-5", "6-10", "11-20", "21-50", "50+"]}
          name="teamSize"
          onChange={option => setTeamSize(option)}
        />
        <section className="font-inter flex items-center self-stretch pt-9 leading-5 text-white">
          <p>What % of your codebase uses Python (an estimate is fine)?</p>
        </section>
        <CfRadioButton
          options={["<25%", "26% - 50%", "51%+"]}
          name="pythonUsage"
          onChange={option => setPythonUsage(option)}
        />
        <section className="font-inter flex items-center self-stretch pt-9 leading-5 text-white">
          <p>What libraries or frameworks in Python do you use often?</p>
        </section>
        <PythonLibrariesInput onChange={setPythonLibraries} />
        <section className="font-inter flex items-center self-stretch pt-9 leading-5 text-white">
          <p>Do you have any colleagues we should invite to Codeflash?</p>
        </section>
        <div
          className={`flex w-full items-center self-stretch rounded-sm border border-solid ${
            isSubmitted && !emailInputElement?.checkValidity()
              ? "border-yellow-400"
              : "border-white/10"
          } bg-white/5 px-[11px] py-[7px] focus-within:[box-shadow:0_0_4px_#1e40af]`}
        >
          <input
            className="font-source_code_pro flex-grow leading-tight text-stone-400 [min-width:0] [outline:none] placeholder:text-[#B6AFAF]"
            placeholder="Enter email here"
            id="colleague-invite"
            type="email"
            value={colleagueInviteEmail}
            onChange={e => {
              setColleagueInviteEmail(e.target.value)
            }}
          />
        </div>
        {isSubmitted && !emailInputElement?.checkValidity() && (
          <label className="text-xs leading-5 text-yellow-400" htmlFor="colleague-invite">
            Please enter a valid email
          </label>
        )}
        <FinishSection onClick={submitSecondPage} buttonText="Finish" />
        <div className="font-sora self-stretch pt-1 text-center leading-normal text-yellow-400">
          <a href="#" onClick={submitSecondPage} className="hover:underline">
            Skip personalization and start optimizing
          </a>
        </div>
      </div>
    </div>
  )
}

interface SecondPageProps {
  className?: string
}
