"use client";
import { FormButton } from "@/app/components/form/forms";
import { TextLink } from "@/app/components/button";
import { SingleChip } from "@/app/components/chips";
import OnboardingTabs from "@/app/components/onboarding-tabs";
import AuthBanner from "@/app/components/banner/authbanner";
import { useRouter } from "next/navigation";
import { useState, useEffect } from 'react';
export default function Onboarding() {

  type Category = {
    id: string;
    label: string;
  };
  
  const router = useRouter()
  const [vibe, setVibe] = useState<Category[]>([]);
  const [selectedInterests, setSelectedInterests] = useState<string[]>([]);

  const handleSelect = (interest:any) => {
    setSelectedInterests((prev) =>
      prev.includes(interest)
        ? prev.filter((item) => item !== interest)
        : [...prev, interest]
    );
  };

  const handleSubmit = async (e:any) =>{
    e.preventDefault();
  

    try {
      const response = await fetch('/api/onboarding/step3', {
        method: "POST",
        headers: { 
          "Content-Type": "application/json",
         },
        body: JSON.stringify({selectedInterests:selectedInterests}),
      });
      const data = await response.json(); 
      router.push('/category');

    } catch (err) {
      console.log("Something went wrong. Please try again.");
    }

  };
  useEffect(() => {
    getCategoryList();
  }, []);
  async function getCategoryList() {
    try {
      const response = await fetch('/api/vibe', {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
        },
      });
  
      if (!response.ok) {
        throw new Error(`Error: ${response.status} - ${response.statusText}`);
      }
  
      const data = await response.json();
      console.log("response-category", data.data);
       setVibe(data.data);
     
      return data; // Return the data if needed
    } catch (error) {
      console.error("Error fetching category list:", error);
    }
  }

  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 sm:gap-4">
      <AuthBanner />
      <div className="flex flex-1 flex-col pb-15 md:mt-8">
        <div className="mx-auto mt-8 w-[90%]">
          <div className="flex flex-1 grow gap-2">
            <OnboardingTabs
              id="ot_account_setup"
              title="Account setup"
              subtitle="Step 1"
              status="complete"
            />
            <OnboardingTabs
              id="ot_personal_info"
              title="Personal info"
              subtitle="Step 2"
              status="complete"
            />
            <OnboardingTabs
              id="ot_interest"
              title="Interest"
              subtitle="Step 3"
              status="current"
            />
          </div>
          <div className="mt-8">
            <h1>I am feeling</h1>
            <form onSubmit={handleSubmit}>
             

              <p className="font-macropolo mt-10 text-xl font-medium tracking-wider text-gray-950 uppercase">
              
              </p>
              <div className="mt-1 flex flex-wrap gap-2">
              {vibe && vibe.map((category) => (
                    <SingleChip
                      key={category.id}
                      id={category.id}
                      label={category.label}
                      value={category.id}
                      onClick={() => handleSelect(category.id)}
                    />
                  ))}
              </div>
              <FormButton
                id="btn_save_account_setup"
                label="TUNE IN"
                type="submit"
                color="gray"
                hairline="amber"
                disabled={false}
              />
            </form>
          </div>
          <div className="mt-10 flex justify-between">
            <TextLink id="sdsdf" href="/onboarding/step2" label="Back to personal info" color="gray" />
            <TextLink id="sdsfdsd" href="/onboarding/step2" label="Skip, Interest" color="gray" />
          </div>
        </div>
      </div>
    </div>
  );
}