"use client";

import { formatFileSize } from "@/utils/shared";
import Image from "next/image";
import { UseFormRegisterReturn } from "react-hook-form";

interface FileImageUploadCardProps {
  label: string;
  inputId: string;
  accept?: string;
  title?: string;
  hint?: string;
  recommendation?: string;
  fallbackFileName?: string;
  previewUrl?: string | null;
  selectedFileName?: string;
  selectedFileSize?: number | null;
  isLoading?: boolean;
  uploadProgress?: number;
  errorMessage?: string;
  onClear: () => void;
  fileRegister: UseFormRegisterReturn;
}

const FileImageUploadCard = ({
  label,
  inputId,
  accept = "image/png,image/jpeg,image/jpg,image/webp",
  title = "Click to upload your profile image",
  hint = "PNG, JPG, WEBP up to 5MB",
  recommendation = "Recommended size: 400 x 400",
  fallbackFileName = "Current profile image",
  previewUrl,
  selectedFileName,
  selectedFileSize,
  isLoading = false,
  uploadProgress = 0,
  errorMessage,
  onClear,
  fileRegister,
}: FileImageUploadCardProps) => {
  return (
    <div>
      <label className="text-body-sm font-semibold capitalize text-dark dark:text-white">
        {label}
      </label>
      <div className="relative mt-3 overflow-hidden rounded-2xl border border-stroke/70 bg-gradient-to-br from-white via-white to-primary/[0.04] p-4 shadow-theme-xs backdrop-blur-sm dark:border-dark-3 dark:from-dark-2 dark:via-dark-2 dark:to-primary/[0.12]">
        <div className="pointer-events-none absolute -right-16 -top-16 h-40 w-40 rounded-full bg-primary/10 blur-3xl dark:bg-primary/20" />
        <div className="pointer-events-none absolute -bottom-16 -left-16 h-36 w-36 rounded-full bg-purple-500/10 blur-3xl dark:bg-purple-500/20" />
        <input
          id={inputId}
          type="file"
          accept={accept}
          className="sr-only"
          {...fileRegister}
        />

        {!previewUrl ? (
          <label
            htmlFor={inputId}
            className="group relative flex cursor-pointer flex-col items-center justify-center rounded-xl border-2 border-dashed border-stroke/80 bg-white/70 px-4 py-9 text-center transition-all duration-300 hover:-translate-y-0.5 hover:border-primary hover:bg-primary/[0.03] dark:border-dark-3 dark:bg-dark/20 dark:hover:bg-primary/[0.08]"
          >
            <div className="mb-3 rounded-2xl bg-primary/[0.12] p-3 text-primary shadow-theme-xs transition-transform duration-300 group-hover:scale-105 group-hover:rotate-3 dark:bg-primary/[0.2]">
              <svg
                className="h-6 w-6 text-primary"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
                />
              </svg>
            </div>
            <p className="text-sm font-semibold text-dark dark:text-white">
              {title}
            </p>
            <p className="mt-1 text-xs text-dark-5">{hint}</p>
            <div className="mt-4 inline-flex items-center rounded-full border border-primary/20 bg-primary/[0.08] px-3 py-1 text-[11px] font-medium text-primary dark:border-primary/40 dark:bg-primary/[0.18]">
              {recommendation}
            </div>
          </label>
        ) : (
          <div className="flex items-center gap-4 rounded-xl border border-stroke/70 bg-white/70 p-3.5 shadow-theme-xs backdrop-blur-sm dark:border-dark-3 dark:bg-dark/30">
            <div className="relative h-20 w-20 overflow-hidden rounded-xl bg-gray-2 ring-1 ring-stroke/80 dark:bg-dark-3 dark:ring-dark-3">
              <Image
                src={previewUrl}
                alt="Profile preview"
                fill
                unoptimized
                sizes="80px"
                className="object-cover transition-transform duration-500 hover:scale-105"
              />
              {isLoading && (
                <div className="absolute inset-0 flex items-center justify-center bg-black/40">
                  <div className="h-5 w-5 animate-spin rounded-full border-2 border-white border-t-transparent"></div>
                </div>
              )}
            </div>
            <div className="min-w-0 flex-1">
              <div className="mb-1 inline-flex items-center rounded-full border border-success/25 bg-success/10 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-success dark:border-success/30 dark:bg-success/15">
                Ready
              </div>
              <p className="truncate text-sm font-semibold text-dark dark:text-white">
                {selectedFileName || fallbackFileName}
              </p>
              {selectedFileSize ? (
                <p className="mt-0.5 text-xs text-dark-5">
                  {formatFileSize(selectedFileSize)}
                </p>
              ) : null}
              {isLoading ? (
                <div className="mt-1">
                  <p className="text-xs font-medium text-primary">
                    Uploading image... {uploadProgress}%
                  </p>
                  <div className="mt-1.5 h-1.5 w-full overflow-hidden rounded-full bg-gray-2 dark:bg-dark-3">
                    <div
                      className="h-full rounded-full bg-gradient-to-r from-primary to-purple-500 transition-all duration-300"
                      style={{ width: `${uploadProgress}%` }}
                    />
                  </div>
                </div>
              ) : null}
            </div>
            <div className="flex items-center gap-2">
              <label
                htmlFor={inputId}
                className="cursor-pointer rounded-lg border border-stroke/80 bg-white px-3 py-1.5 text-xs font-semibold text-dark shadow-theme-xs transition-all hover:-translate-y-0.5 hover:border-primary hover:text-primary dark:border-dark-3 dark:bg-dark-2 dark:text-white"
              >
                Change
              </label>
              <button
                type="button"
                onClick={onClear}
                className="rounded-lg border border-error/35 bg-error/5 px-3 py-1.5 text-xs font-semibold text-error transition-all hover:-translate-y-0.5 hover:bg-error/10"
              >
                Remove
              </button>
            </div>
          </div>
        )}
      </div>

      {errorMessage ? (
        <p className="mt-1 text-sm font-medium text-red-500">{errorMessage}</p>
      ) : null}
    </div>
  );
};

export default FileImageUploadCard;
