"use client";
import React, { useEffect, useState } from "react";
import { FormButton } from "@/app/components/form/forms";
import TextArea from "@/app/components/form/TextArea";

const STORAGE_KEY = "piece_imagine";

interface PieceImagineProps {
  jumpToNext?: () => void;
}

export default function PieceImagine({ jumpToNext }: PieceImagineProps) {
  const [pieceImagine, setPieceImagine] = useState("");

  useEffect(() => {
    const saved = localStorage.getItem(STORAGE_KEY);
    if (saved) {
      setPieceImagine(saved);
    }
  }, []);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    localStorage.setItem(STORAGE_KEY, pieceImagine.trim());
    jumpToNext?.();
  };

  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    setPieceImagine(e.target.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div className="mx-auto flex w-full flex-col items-center justify-center gap-2 align-middle">
        <div className="mx-auto flex w-full flex-col items-center justify-center gap-2 text-center md:w-2/3">
          <h2 className="vision">
            Where do you <span className="font-medium">imagine wearing</span> this piece?
          </h2>
          <p className="text-xs/4 md:text-sm font-light">
            A celebration, a quiet evening, everyday life, or somewhere in
            between — your setting helps shape the story.
          </p>
        </div>

        <div className="cc-vision-wrap">
          <div className="ccvision-scrollcontent">
            <div className="mx-auto mt-15 flex w-full flex-col md:w-[50%]">
              <TextArea
                label=""
                name="pieceImagine"
                maxLength={1000}
                placeholder="Type your answer here"
                showLimitMessage={true}
                value={pieceImagine}
                onChange={handleChange}
              />
            </div>
          </div>

          <div className="ccBottomBtnWrap">
            <FormButton
              id="btn_cc_save_piece_imagine"
              label="Save Idea"
              type="submit"
              color="gray"
              hairline="blue"
            />
          </div>
        </div>
      </div>
    </form>
  );
}