"use client";
import Image from "next/image";
import { useState, useRef } from "react";

export default function UploadTryItOn() {
  const [image1, setImage1] = useState<string | null>(null);
  const [image2, setImage2] = useState<string | null>(null);
  const [video, setVideo] = useState<string | null>(null);

  const handleImageUpload = (
    e: React.ChangeEvent<HTMLInputElement>,
    setImage: (url: string | null) => void
  ) => {
    const file = e.target.files?.[0];
    if (file) setImage(URL.createObjectURL(file));
  };

  const handleVideoUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) setVideo(URL.createObjectURL(file));
  };

  return (
    <div className="grid w-full grid-cols-1 gap-1 sm:grid-cols-3">
      <UploadBox
        label="Upload Image or video"
        fileUrl={image1}
        onUpload={(e) => handleImageUpload(e, setImage1)}
        onRemove={() => setImage1(null)}
        accept="image/*"
        isVideo={false}
      />

      <UploadBox
        label="Upload Image or video"
        fileUrl={image2}
        onUpload={(e) => handleImageUpload(e, setImage2)}
        onRemove={() => setImage2(null)}
        accept="image/*"
        isVideo={false}
      />

      <UploadBox
        label="Upload Image or video"
        fileUrl={video}
        onUpload={handleVideoUpload}
        onRemove={() => setVideo(null)}
        accept="video/*"
        isVideo={true}
      />
    </div>
  );
}

type UploadBoxProps = {
  label: string;
  fileUrl: string | null;
  accept: string;
  isVideo: boolean;
  onUpload: (e: React.ChangeEvent<HTMLInputElement>) => void;
  onRemove: () => void;
};

function UploadBox({
  label,
  fileUrl,
  accept,
  isVideo,
  onUpload,
  onRemove,
}: UploadBoxProps) {
  const fileInputRef = useRef<HTMLInputElement | null>(null);

  const openFilePicker = () => {
    fileInputRef.current?.click();
  };

  return (
    <div className="flex flex-col items-center justify-center border border-dashed hover:border-solid hover:bg-white transition-all duration-300 bg-gray-100 mob-noise">
      {!fileUrl ? (
        <>
          {/* Hidden File Input */}
          <input
            ref={fileInputRef}
            type="file"
            accept={accept}
            onChange={onUpload}
            className="hidden"
          />

          {/* Custom click area */}
          <div
            onClick={openFilePicker}
            className="flex h-32 w-full cursor-pointer items-center justify-center px-4 py-2 text-center text-xs"
          >
            {label}
          </div>
        </>
      ) : (
        <div className="relative flex w-full flex-col items-center gap-3">
          {isVideo ? (
            <video src={fileUrl} controls className="video-responsive" />
          ) : (
            <Image
              src={fileUrl}
              height={180}
              width={180}
              alt={`${label} preview`}
              className="img-responsive"
            />
          )}

          <button
            onClick={onRemove}
            className="absolute right-2 top-2 flex h-8 w-8 items-center justify-center rounded-full bg-gray-900/50 text-white"
          >
            <i className="icon-[iconamoon--close-bold]"></i>
          </button>
        </div>
      )}
    </div>
  );
}