"use client";

import { useCallback, useRef, useState } from "react";
import { Film, Upload } from "lucide-react";
import { useTranslations } from "next-intl";

import { formatFileSize } from "@/lib/trimmer-utils";
import { cn } from "@/lib/utils";

interface TrimmerUploadZoneProps {
  uploadedFile: File | null;
  onFileSelect: (file: File) => void;
}

export function TrimmerUploadZone({
  uploadedFile,
  onFileSelect,
}: TrimmerUploadZoneProps) {
  const t = useTranslations("auto.componentsTrimmerTrimmerUploadZone");
  const inputRef = useRef<HTMLInputElement>(null);
  const [isDragging, setIsDragging] = useState(false);

  const handleFiles = useCallback(
    (files: FileList | null) => {
      const file = files?.[0];
      if (file && file.type.startsWith("video/")) {
        onFileSelect(file);
      }
    },
    [onFileSelect]
  );

  return (
    <section className="rounded-xl border border-gray-800 bg-gray-900 p-6 shadow-sm">
      <input
        ref={inputRef}
        type="file"
        accept="video/*"
        className="hidden"
        onChange={(event) => handleFiles(event.target.files)}
      />
      <div
        role="button"
        tabIndex={0}
        onClick={() => inputRef.current?.click()}
        onKeyDown={(event) => {
          if (event.key === "Enter" || event.key === " ") {
            event.preventDefault();
            inputRef.current?.click();
          }
        }}
        onDragOver={(event) => {
          event.preventDefault();
          setIsDragging(true);
        }}
        onDragLeave={() => setIsDragging(false)}
        onDrop={(event) => {
          event.preventDefault();
          setIsDragging(false);
          handleFiles(event.dataTransfer.files);
        }}
        className={cn(
          "flex cursor-pointer flex-col items-center justify-center rounded-xl border-2 border-dashed px-6 py-12 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500",
          isDragging
            ? "border-blue-500 bg-blue-950/40"
            : "border-gray-700 bg-gray-800 hover:border-blue-500/60 hover:bg-gray-800/80"
        )}
      >
        <Upload className="mb-3 h-10 w-10 text-blue-500" aria-hidden />
        <p className="text-sm font-semibold text-white">
          {t("dropPrompt")}
        </p>
        <p className="mt-1 text-xs text-gray-400">{t("supportedFormats")}</p>
      </div>

      {uploadedFile ? (
        <div className="mt-4 flex items-center gap-3 rounded-lg border border-gray-800 bg-gray-800 px-4 py-3">
          <Film className="h-5 w-5 shrink-0 text-blue-500" aria-hidden />
          <div className="min-w-0">
            <p className="truncate text-sm font-medium text-white">
              {uploadedFile.name}
            </p>
            <p className="text-xs text-gray-400">
              {formatFileSize(uploadedFile.size)}
            </p>
          </div>
        </div>
      ) : null}
    </section>
  );
}
