ReviewContent.tsx

import { useEffect } from 'react';
import { ReviewStepLayout, Textarea, ImagePreviewItem, InputField } from '@/components';
import { PlusIcon } from '@/assets';
import { useReviewStore, useModalStore } from '@/store';
import { useNavigate } from 'react-router-dom';
import { useImgUpload } from '@/hooks';

const MAX_IMAGES = 5;
const MIN_TEXT_LENGTH = 30;

export default function ReviewTextForm() {
  const { text, setText, reviewTitle, setReviewTitle, isInitialized } = useReviewStore();
  const { images, addImages, removeImage } = useImgUpload(5);
  const navigate = useNavigate();

  const isValid = reviewTitle.trim().length > 0 && text.trim().length >= MIN_TEXT_LENGTH;
  const { openModal } = useModalStore();
  const handleSubmit = () => {
    if (!text.trim()) return;
    openModal('confirm', {
      title: '후기를 등록하시겠어요?',
      subtitle: '등록한 후기는 마이페이지에서 확인할 수 있어요.',
      cancelText: '취소',
      confirmText: '등록하기',
      onConfirm: () => {
        console.log('후기 등록 로직');
      },
    });
  };
  useEffect(() => {
    if (!isInitialized) {
      navigate('/review');
    }
  }, [isInitialized, navigate]);

  return (
    <ReviewStepLayout
      title="자세한 후기를 남겨주세요"
      onClickNext={handleSubmit}
      onClickBack={() => navigate('/review/tag')}
      nextLabel="등록하기"
      disabled={!isValid}
    >
      {/* 사진 업로드 */}
      <div className="flex flex-col gap-2">
        <p className="text-caption-2 text-white">
          사진 추가하기
          <span className="text-caption-3 px-2 text-red-300">최대 5장까지 업로드할 수 있어요.</span>
        </p>
        <div className="scrollbar-hidden flex gap-3 overflow-x-auto pt-3 whitespace-nowrap">
          {/* 업로드 버튼 */}

          <label className="flex h-[84px] w-[84px] shrink-0 cursor-pointer items-center justify-center rounded-md border border-white text-white">
            <PlusIcon />
            <input
              type="file"
              accept="image/*"
              multiple
              className="hidden"
              onChange={(e) => addImages(e.target.files)}
              disabled={images.length >= MAX_IMAGES}
            />
          </label>
          {/* 이미지 미리보기? */}
          {images.map((image, index) => (
            <ImagePreviewItem key={index} image={image} index={index} onRemove={removeImage} />
          ))}
        </div>
      </div>

      {/* 텍스트 입력 */}
      <div className="flex flex-col gap-1 pt-8">
        <InputField
          label="제목"
          placeholder="후기의 제목을 적어주세요"
          value={reviewTitle}
          onChange={(value) => {
            if (value.length <= 20) setReviewTitle(value);
          }}
        />
        <div className="text-caption-2 pt-8 text-white">
          후기 내용 <span className="text-red-400">*</span>
        </div>
        <Textarea
          title=""
          placeholder="관람 경험을 자유롭게 적어주세요. (예: 사운드 중심 좌석으로 돌비 효과를 제대로 느낄 수 있어서 좋았어요!)"
          minLength={30}
          placeholderColorType="gray"
          value={text}
          onChange={setText}
          width="w-full"
        />
      </div>
    </ReviewStepLayout>
  );
}