"use client";
import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { FormInput, FormButton } from "@/app/components/form/forms";
import CCPageBg from "@/app/components/coCreationJourney/pageBg";

export default function CoCreationThankYou() {
  const router = useRouter();
  const [storedFirstName, setStoredFirstName] = useState<string | null>(null);

  useEffect(() => {
    const firstName = localStorage.getItem("firstName");
    if (firstName) {
      setStoredFirstName(firstName);
    }
  }, []);

  const handleStartAgain = () => {
    router.push("/design-journey");
  };

  const handleGoHome = () => {
    router.push("/");
  };

  return (
    <>
      <CCPageBg />
      <div className="inset fixed top-0 left-0 z-60 h-full w-full">
        <div className="mx-auto flex h-lvh w-full flex-col items-center justify-center gap-4 text-center align-middle md:w-[40%]">
          <div className="mx-auto flex w-full flex-col items-center justify-center gap-2 text-center">
            <h1>Awesome!</h1>
            <h4 className="font-light">
              <span className="capitalize">{storedFirstName ? `${storedFirstName}, ` : ""}</span> You{"'"}ve
              completed the first step toward bringing your Morni to life.
            </h4>
          </div>
          <div className="flex flex-col gap-2 text-sm font-light">
            <p className="">
              <span className="font-medium text-blue-600">Thank you for sharing your ideas and inspirations.</span> With your inputs, our team now has a strong foundation to begin
              crafting a piece that reflects your story and style.
            </p>
            <p className="font-light">
              From here, our designers and artisans take over — blending your
              vision with Morni{"'"}s craftsmanship to create something truly
              personal.
            </p>
            <p>
              Your Morni is officially in the making.
            </p>
            <p className="mt-5 capitalize">
              order tracking number 
            </p>
            <p className=" text-3xl text-blue-600 font-bogart uppercase">
              #318
            </p>
          </div>
          <div className="mx auto flex w-full flex-col items-center justify-between gap-8 md:w-[75%]">
            <FormButton
              id="btn_save_new_address"
              label="Start Again Co-Creation"
              type="submit"
              color="gray"
              hairline="blue"
              onClick={handleStartAgain}
            />
            <button className="btn-outline" onClick={handleGoHome}>
              Back to Morni{"'"}s home
            </button>
          </div>
        </div>
      </div>
    </>
  );
}