import React, { useState, useMemo, useRef } from "react";
import { IFileUploadSetting, IFileUploadField } from "@edr/types/freight";
import {
  UploadCloud,
  FileText,
  Image as ImageIcon,
  File,
  Trash2,
  AlertCircle,
  CheckCircle2,
} from "lucide-react";
import { cn } from "../../lib/utils";
import { Button } from "../button";
import type { ViewableFile } from "../FileViewer";

export interface SmartFileInputProps {
  /** The settings object containing features and their upload fields config. */
  file: IFileUploadSetting;
  /** Controlled value: maps each fileKey to the selected File or File[]. */
  value?: Record<string, File | File[] | null>;
  /** Callback triggered when any field's files change. */
  onChange?: (value: Record<string, File | File[] | null>) => void;
  /** External form errors mapped by fileKey. */
  errors?: Record<string, string>;
  /**
   * fileKeys whose document is already uploaded on the server. Such fields show
   * an "Already uploaded" badge and a replace-oriented dropzone hint, even when
   * no in-memory File is currently selected for them.
   */
  uploadedKeys?: string[];
  /**
   * Metadata for already-uploaded files, keyed by fileKey. When a field has
   * entries here, they're listed with view/download links (instead of the
   * generic placeholder text) and the field counts as uploaded even if it's
   * not also listed in `uploadedKeys`.
   */
  existingFiles?: Record<
    string,
    { name: string; url: string; size?: number; mimeType?: string | null }[]
  >;
  /**
   * When provided, already-uploaded files render as buttons that call this with
   * the file instead of opening a new browser tab. Wire it to `useFileViewer`'s
   * `view` to preview documents inline:
   *
   *   const { view, viewer } = useFileViewer();
   *   <SmartFileInput ... onViewFile={view} />
   *   {viewer}
   */
  onViewFile?: (file: ViewableFile) => void;
  /** Disabled state for the entire file input group. */
  disabled?: boolean;
  /** Display variant style. Default is "default" (large dropzone). Minimal renders a compact upload button. */
  variant?: "default" | "minimal";
  /** Optional custom container CSS classes. */
  className?: string;

  containerClassName?: string;
}

/** Helper to format file sizes in bytes to a human-readable string. */
function formatBytes(bytes: number, decimals = 2) {
  if (bytes === 0) return "0 Bytes";
  const k = 1024;
  const dm = decimals < 0 ? 0 : decimals;
  const sizes = ["Bytes", "KB", "MB", "GB"];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
}

/** Render a suitable icon based on file extension. */
function FileIcon({ name, className }: { name: string; className?: string }) {
  const ext = name.split(".").pop()?.toLowerCase() || "";

  if (ext === "pdf") {
    return <FileText className={cn("text-red-500", className)} />;
  }

  if (["png", "jpg", "jpeg", "webp", "svg", "gif"].includes(ext)) {
    return <ImageIcon className={cn("text-blue-500", className)} />;
  }

  if (["csv", "xls", "xlsx"].includes(ext)) {
    return <FileText className={cn("text-emerald-500", className)} />;
  }

  if (["zip", "rar", "tar", "gz", "7z"].includes(ext)) {
    return <File className={cn("text-amber-500", className)} />;
  }

  return <File className={cn("text-slate-400", className)} />;
}

type ExistingFile = {
  name: string;
  url: string;
  size?: number;
  mimeType?: string | null;
};

/**
 * A single already-uploaded file. Renders a click-to-view button when
 * `onViewFile` is set (inline preview via the FileViewer), otherwise a plain
 * new-tab anchor.
 */
function ExistingFileLink({
  file: f,
  onViewFile,
  className,
  showSize = false,
}: {
  file: ExistingFile;
  onViewFile?: (file: ViewableFile) => void;
  className?: string;
  showSize?: boolean;
}) {
  const label =
    showSize && typeof f.size === "number"
      ? `${f.name} (${formatBytes(f.size)})`
      : f.name;

  if (onViewFile) {
    return (
      <button
        type="button"
        onClick={(e) => {
          e.stopPropagation();
          onViewFile({ name: f.name, url: f.url, mimeType: f.mimeType });
        }}
        className={cn(
          "relative z-10 text-left text-xs text-primary hover:underline truncate max-w-xs",
          className,
        )}
      >
        {label}
      </button>
    );
  }

  return (
    <a
      href={f.url}
      target="_blank"
      rel="noopener noreferrer"
      onClick={(e) => e.stopPropagation()}
      className={cn(
        "relative z-10 text-xs text-primary hover:underline truncate max-w-xs",
        className,
      )}
    >
      {label}
    </a>
  );
}

/**
 * A file the user just picked (in memory, not yet persisted). Rendered with a
 * subtle "just added" entrance + an emerald accent so a fresh upload reads as
 * distinct from the neutral surrounding surface.
 */
function NewFileCard({
  file: fileObj,
  onRemove,
  disabled,
  hasError,
  inputName,
}: {
  file: File;
  onRemove: () => void;
  disabled?: boolean;
  hasError?: boolean;
  inputName: string;
}) {
  return (
    <div
      className={cn(
        "relative z-10 flex items-center justify-between gap-3 rounded-lg border bg-card p-3 shadow-2xs transition",
        "animate-in fade-in slide-in-from-top-1 duration-300 hover:shadow-xs",
        hasError
          ? "border-destructive/30"
          : "border-emerald-300/60 dark:border-emerald-500/25",
      )}
    >
      <div className="flex min-w-0 items-center gap-3">
        <div className="flex items-center justify-center rounded-md bg-muted p-2">
          <FileIcon name={fileObj.name} className="h-5 w-5" />
        </div>

        <div className="min-w-0">
          <p
            className="truncate max-w-[200px] text-sm font-medium text-foreground md:max-w-md"
            title={fileObj.name}
          >
            {fileObj.name}
          </p>
          <div className="mt-0.5 flex items-center gap-2">
            <span className="text-xs text-muted-foreground">
              {formatBytes(fileObj.size)}
            </span>
            <span className="flex items-center gap-0.5 text-xs font-medium text-emerald-600 dark:text-emerald-400">
              <CheckCircle2 className="h-3 w-3" /> Ready to upload
            </span>
          </div>
        </div>
      </div>

      <button
        type="button"
        disabled={disabled}
        onClick={onRemove}
        className={cn(
          "relative z-10 rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive",
          disabled && "pointer-events-none opacity-50",
        )}
        aria-label={`Remove file ${fileObj.name}`}
      >
        <Trash2 className="h-4 w-4" />
      </button>

      {/* Hidden input to represent file details in traditional form submissions */}
      <input type="hidden" name={inputName} value={fileObj.name} />
    </div>
  );
}

export function SmartFileInput({
  file,
  value,
  onChange,
  errors,
  uploadedKeys,
  existingFiles,
  onViewFile,
  disabled = false,
  variant = "default",
  className,
  containerClassName,
}: SmartFileInputProps) {
  // Local state to manage files when the component is used in an uncontrolled manner
  const [internalFiles, setInternalFiles] = useState<Record<string, File[]>>(
    {},
  );

  // Local validation errors
  const [localErrors, setLocalErrors] = useState<Record<string, string>>({});

  // Drag-and-drop state active per field
  const [dragActive, setDragActive] = useState<Record<string, boolean>>({});

  // File input refs for programmatic clicks in minimal variant
  const fileInputRefs = useRef<Record<string, HTMLInputElement | null>>({});

  // Memoize fields sorted by the order property (ascending)
  const sortedFields = useMemo(() => {
    return [...file.fields].sort((a, b) => a.order - b.order);
  }, [file.fields]);

  // Create a map of fields for quick lookup
  const fieldsMap = useMemo(() => {
    return file.fields.reduce(
      (acc, currentField) => {
        acc[currentField.fileKey] = currentField;
        return acc;
      },
      {} as Record<string, IFileUploadField>,
    );
  }, [file.fields]);

  // Resolve current files list for a field
  const getFilesForField = (fieldKey: string): File[] => {
    const val = value ? value[fieldKey] : internalFiles[fieldKey];
    if (!val) return [];
    return Array.isArray(val) ? val : [val];
  };

  const handleFilesChange = (fieldKey: string, newFiles: File[]) => {
    const field = fieldsMap[fieldKey];
    if (!field) return;

    const newValue = field.isMultiple ? newFiles : newFiles[0] || null;

    if (onChange) {
      const updatedValues = {
        ...(value || {}),
        [fieldKey]: newValue,
      };
      onChange(updatedValues);
    } else {
      setInternalFiles((prev) => ({
        ...prev,
        [fieldKey]: newFiles,
      }));
    }
  };

  const processFiles = (field: IFileUploadField, incomingFiles: File[]) => {
    const currentFiles = getFilesForField(field.fileKey);
    const maxAllowed = field.isMultiple ? Math.max(1, field.maxFiles) : 1;

    // Clean up extensions (e.g. '.pdf' or 'pdf' -> 'pdf')
    const allowedExts = field.allowedExtensions.map((ext) =>
      ext.toLowerCase().replace(/^\./, ""),
    );

    let validIncoming: File[] = [];
    let errorMsg = "";

    for (const fileObj of incomingFiles) {
      const ext = fileObj.name.split(".").pop()?.toLowerCase() || "";
      const isExtValid = allowedExts.length === 0 || allowedExts.includes(ext);
      const isSizeValid = fileObj.size <= field.maxSizeMb * 1024 * 1024;

      if (!isExtValid) {
        errorMsg = `Invalid file extension. Allowed: ${field.allowedExtensions.join(
          ", ",
        )}`;
        break;
      }

      if (!isSizeValid) {
        errorMsg = `File size exceeds the limit of ${field.maxSizeMb}MB`;
        break;
      }

      validIncoming.push(fileObj);
    }

    if (errorMsg) {
      setLocalErrors((prev) => ({ ...prev, [field.fileKey]: errorMsg }));
      return;
    }

    // Clear local error on successful file addition
    setLocalErrors((prev) => {
      const updated = { ...prev };
      delete updated[field.fileKey];
      return updated;
    });

    let newFilesList: File[] = [];
    if (field.isMultiple) {
      newFilesList = [...currentFiles, ...validIncoming].slice(0, maxAllowed);
      if (currentFiles.length + validIncoming.length > maxAllowed) {
        setLocalErrors((prev) => ({
          ...prev,
          [field.fileKey]: `Only up to ${maxAllowed} files are allowed for this field. Excess files were ignored.`,
        }));
      }
    } else {
      newFilesList = validIncoming.slice(0, 1);
    }

    handleFilesChange(field.fileKey, newFilesList);
  };

  const handleDrag = (
    e: React.DragEvent,
    fieldKey: string,
    active: boolean,
  ) => {
    e.preventDefault();
    e.stopPropagation();
    if (disabled) return;
    setDragActive((prev) => ({ ...prev, [fieldKey]: active }));
  };

  const handleDrop = (e: React.DragEvent, field: IFileUploadField) => {
    e.preventDefault();
    e.stopPropagation();
    if (disabled) return;
    setDragActive((prev) => ({ ...prev, [field.fileKey]: false }));

    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
      const filesArray = Array.from(e.dataTransfer.files);
      processFiles(field, filesArray);
    }
  };

  const handleFileSelect = (
    e: React.ChangeEvent<HTMLInputElement>,
    field: IFileUploadField,
  ) => {
    if (e.target.files && e.target.files.length > 0) {
      const filesArray = Array.from(e.target.files);
      processFiles(field, filesArray);
      e.target.value = ""; // reset so same file can be selected again
    }
  };

  const removeFile = (fieldKey: string, indexToRemove: number) => {
    if (disabled) return;
    const currentFiles = getFilesForField(fieldKey);
    const updatedFiles = currentFiles.filter((_, idx) => idx !== indexToRemove);

    const field = fieldsMap[fieldKey];
    if (field && field.isRequired && updatedFiles.length === 0) {
      setLocalErrors((prev) => ({
        ...prev,
        [fieldKey]: "This file is required",
      }));
    } else {
      setLocalErrors((prev) => {
        const updated = { ...prev };
        delete updated[fieldKey];
        return updated;
      });
    }

    handleFilesChange(fieldKey, updatedFiles);
  };

  return (
    <div className={cn("flex flex-col gap-6", className)}>
      {file.description && (
        <div className="text-sm text-muted-foreground border-b border-border pb-3">
          {file.description}
        </div>
      )}

      <div className={cn("flex flex-col gap-6", containerClassName)}>
        {sortedFields.map((field) => {
          const currentFiles = getFilesForField(field.fileKey);
          const maxFiles = field.isMultiple ? Math.max(1, field.maxFiles) : 1;
          const reachedLimit = currentFiles.length >= maxFiles;
          const fieldError =
            errors?.[field.fileKey] || localErrors[field.fileKey];
          const isDragOver = dragActive[field.fileKey];
          const existingForField = existingFiles?.[field.fileKey] ?? [];
          // Already uploaded server-side and nothing newly picked to replace it.
          const isUploaded =
            ((uploadedKeys?.includes(field.fileKey) ?? false) ||
              existingForField.length > 0) &&
            currentFiles.length === 0;

          // Format accepted files for the HTML input element
          const acceptString = field.allowedExtensions
            .map((ext) => (ext.startsWith(".") ? ext : `.${ext}`))
            .join(",");

          return (
            <div
              key={field.id || field.fileKey}
              className="flex flex-col gap-2"
            >
              {/* Field Header */}
              <div className="flex flex-col md:flex-row md:items-baseline justify-between gap-1">
                <label className="text-sm font-semibold text-foreground flex items-center gap-1.5">
                  <span className="flex items-center gap-1">
                    {field.fileLabel}
                    {field.isRequired && (
                      <span
                        className="text-destructive font-bold"
                        aria-hidden="true"
                      >
                        *
                      </span>
                    )}
                  </span>
                  {isUploaded && (
                    <span className="inline-flex items-center gap-1 rounded-full bg-emerald-50 px-2 py-0.5 text-[11px] font-medium text-emerald-600 dark:bg-emerald-500/10 dark:text-emerald-400">
                      <CheckCircle2 className="h-3 w-3" /> Already uploaded
                    </span>
                  )}
                </label>

                <span className="text-xs text-muted-foreground">
                  Max size: {field.maxSizeMb}MB
                  {field.isMultiple &&
                    ` • Files: ${currentFiles.length}/${maxFiles}`}
                </span>
              </div>

              {/* Help / Description Text */}
              {field.helpText && (
                <p className="text-xs text-muted-foreground">
                  {field.helpText}
                </p>
              )}

              {/*
                Multiple-file fields (default variant) render as ONE integrated
                drag-and-drop surface. Uploaded files live INSIDE the dropzone as
                lightweight rows — part of the surface, not separate cards — with
                the "add more" prompt on the same surface below them. A full-cover
                transparent input makes clicking anywhere (outside a file row)
                open the picker; the prompt is pointer-transparent so clicks fall
                through to it, while file rows and their controls sit above it.
              */}
              {variant === "default" && field.isMultiple ? (
                <div
                  onDragOver={(e) => handleDrag(e, field.fileKey, true)}
                  onDragLeave={(e) => handleDrag(e, field.fileKey, false)}
                  onDrop={(e) => handleDrop(e, field)}
                  className={cn(
                    "relative flex flex-col gap-2.5 rounded-xl border-2 border-dashed p-4 transition-all",
                    isDragOver
                      ? "border-primary bg-primary/5 dark:bg-primary/10"
                      : fieldError
                        ? "border-destructive/70"
                        : "border-border bg-card/40 hover:border-primary/40",
                    disabled && "pointer-events-none opacity-50",
                  )}
                >
                  {/* Click anywhere on the surface (except a file row) to browse */}
                  {!reachedLimit && (
                    <input
                      type="file"
                      multiple
                      accept={acceptString}
                      disabled={disabled}
                      onChange={(e) => handleFileSelect(e, field)}
                      className="absolute inset-0 z-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed"
                      aria-label={`Add files to ${field.fileLabel}`}
                    />
                  )}

                  {(existingForField.length > 0 || currentFiles.length > 0) && (
                    <div className="relative z-10 flex flex-col gap-1.5">
                      {/* Already-saved (server) files — view/download only */}
                      {existingForField.map((f, idx) => (
                        <div
                          key={`${f.url}-${idx}`}
                          className="flex items-center gap-2.5 rounded-lg bg-background/70 px-3 py-2 ring-1 ring-inset ring-border/60"
                        >
                          <FileIcon name={f.name} className="h-4 w-4 shrink-0" />
                          <div className="min-w-0 flex-1">
                            <ExistingFileLink
                              file={f}
                              onViewFile={onViewFile}
                              className="max-w-none font-medium text-foreground hover:text-primary"
                              showSize
                            />
                          </div>
                          <span className="shrink-0 text-[11px] text-muted-foreground">
                            Saved
                          </span>
                        </div>
                      ))}

                      {/* Just-added (in-memory) files */}
                      {currentFiles.map((fileObj, idx) => (
                        <div
                          key={`${fileObj.name}-${idx}`}
                          className="flex items-center gap-2.5 rounded-lg bg-background/70 px-3 py-2 ring-1 ring-inset ring-emerald-300/50 dark:ring-emerald-500/25 animate-in fade-in slide-in-from-top-1 duration-300"
                        >
                          <FileIcon
                            name={fileObj.name}
                            className="h-4 w-4 shrink-0"
                          />
                          <div className="min-w-0 flex-1">
                            <p
                              className="truncate text-xs font-medium text-foreground"
                              title={fileObj.name}
                            >
                              {fileObj.name}
                            </p>
                            <p className="text-[11px] text-muted-foreground">
                              {formatBytes(fileObj.size)}
                            </p>
                          </div>
                          <span className="flex shrink-0 items-center gap-0.5 text-[11px] font-medium text-emerald-600 dark:text-emerald-400">
                            <CheckCircle2 className="h-3 w-3" /> Ready
                          </span>
                          <button
                            type="button"
                            disabled={disabled}
                            onClick={() => removeFile(field.fileKey, idx)}
                            className={cn(
                              "rounded-md p-1 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive",
                              disabled && "pointer-events-none opacity-50",
                            )}
                            aria-label={`Remove file ${fileObj.name}`}
                          >
                            <Trash2 className="h-3.5 w-3.5" />
                          </button>
                          <input
                            type="hidden"
                            name={`${field.fileKey}[]`}
                            value={fileObj.name}
                          />
                        </div>
                      ))}
                    </div>
                  )}

                  {reachedLimit ? (
                    <div className="relative z-10 flex items-center justify-center gap-1.5 py-2 text-xs font-medium text-muted-foreground">
                      <CheckCircle2 className="h-3.5 w-3.5 text-emerald-500" />
                      Maximum of {maxFiles} files reached
                    </div>
                  ) : (
                    <div
                      className={cn(
                        "pointer-events-none relative z-10 flex flex-col items-center justify-center gap-1 text-center",
                        existingForField.length > 0 || currentFiles.length > 0
                          ? "py-1"
                          : "py-6",
                      )}
                    >
                      <div
                        className={cn(
                          "rounded-full bg-muted text-muted-foreground",
                          existingForField.length > 0 || currentFiles.length > 0
                            ? "p-1.5"
                            : "p-3",
                        )}
                      >
                        <UploadCloud
                          className={cn(
                            existingForField.length > 0 ||
                              currentFiles.length > 0
                              ? "h-4 w-4"
                              : "h-6 w-6",
                            isDragOver && "animate-bounce text-primary",
                          )}
                        />
                      </div>
                      <p className="text-sm font-semibold text-foreground">
                        {isDragOver
                          ? "Drop your files here"
                          : existingForField.length > 0 ||
                              currentFiles.length > 0
                            ? "Add more files, or "
                            : "Drag & drop your files here, or "}
                        {!isDragOver && (
                          <span className="text-primary font-bold">browse</span>
                        )}
                      </p>
                      <p className="text-xs text-muted-foreground">
                        {field.allowedExtensions.join(", ").toUpperCase() ||
                          "All formats"}
                        {" • "}
                        {currentFiles.length}/{maxFiles} added
                      </p>
                    </div>
                  )}
                </div>
              ) : (
                <>
                  {/* Selected Files List */}
                  {currentFiles.length > 0 && (
                    <div className="flex flex-col gap-2">
                      {currentFiles.map((fileObj, idx) => (
                        <NewFileCard
                          key={`${fileObj.name}-${idx}`}
                          file={fileObj}
                          disabled={disabled}
                          hasError={!!fieldError}
                          inputName={
                            field.isMultiple
                              ? `${field.fileKey}[]`
                              : field.fileKey
                          }
                          onRemove={() => removeFile(field.fileKey, idx)}
                        />
                      ))}
                    </div>
                  )}

                  {/* Dropzone area */}
                  {!reachedLimit &&
                    (variant === "minimal" ? (
                      <div className="flex flex-wrap items-center gap-3">
                        <Button
                          type="button"
                          variant="outline"
                          size="sm"
                          disabled={disabled}
                          onClick={() =>
                            fileInputRefs.current[field.fileKey]?.click()
                          }
                          className="gap-1.5 cursor-pointer"
                        >
                          <UploadCloud className="h-4 w-4 text-muted-foreground" />
                          <span>
                            {isUploaded ? "Replace File" : "Upload File"}
                          </span>
                        </Button>
                        <input
                          type="file"
                          ref={(el) => {
                            if (fileInputRefs.current) {
                              fileInputRefs.current[field.fileKey] = el;
                            }
                          }}
                          multiple={field.isMultiple}
                          accept={acceptString}
                          disabled={disabled}
                          onChange={(e) => handleFileSelect(e, field)}
                          className="hidden"
                        />
                        <span className="text-xs text-muted-foreground">
                          Accepts:{" "}
                          {field.allowedExtensions.join(", ").toUpperCase() ||
                            "All"}
                        </span>
                        {existingForField.length > 0 && (
                          <div className="flex flex-col gap-1 basis-full">
                            {existingForField.map((f, idx) => (
                              <ExistingFileLink
                                key={`${f.url}-${idx}`}
                                file={f}
                                onViewFile={onViewFile}
                              />
                            ))}
                          </div>
                        )}
                      </div>
                    ) : isUploaded ? (
                      // Uploaded state: a solid success panel that still doubles as a
                      // replace target (click anywhere or drag a new file onto it).
                      <div
                        onDragOver={(e) => handleDrag(e, field.fileKey, true)}
                        onDragLeave={(e) => handleDrag(e, field.fileKey, false)}
                        onDrop={(e) => handleDrop(e, field)}
                        className={cn(
                          "group relative flex items-center gap-4 rounded-lg border p-4 transition-all",
                          isDragOver
                            ? "border-2 border-dashed border-primary bg-primary/5 dark:bg-primary/10"
                            : "border-emerald-300/70 bg-emerald-50/60 dark:border-emerald-500/30 dark:bg-emerald-500/10",
                          disabled &&
                            "opacity-50 pointer-events-none cursor-not-allowed",
                        )}
                      >
                        <input
                          type="file"
                          multiple={field.isMultiple}
                          accept={acceptString}
                          disabled={disabled}
                          onChange={(e) => handleFileSelect(e, field)}
                          id={`file-input-${field.fileKey}`}
                          className="absolute inset-0 w-full h-full opacity-0 cursor-pointer disabled:cursor-not-allowed"
                          aria-label={`Replace ${field.fileLabel}`}
                        />

                        <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-emerald-100 text-emerald-600 dark:bg-emerald-500/20 dark:text-emerald-400">
                          {isDragOver ? (
                            <UploadCloud className="h-5 w-5 animate-bounce" />
                          ) : (
                            <CheckCircle2 className="h-5 w-5" />
                          )}
                        </div>

                        <div className="min-w-0 flex-1">
                          <p className="text-sm font-semibold text-foreground">
                            {isDragOver
                              ? "Drop to replace"
                              : "Document uploaded"}
                          </p>
                          {existingForField.length > 0 ? (
                            <div className="mt-0.5 flex flex-col gap-0.5">
                              {existingForField.map((f, idx) => (
                                <ExistingFileLink
                                  key={`${f.url}-${idx}`}
                                  file={f}
                                  onViewFile={onViewFile}
                                  showSize
                                />
                              ))}
                            </div>
                          ) : (
                            <p className="mt-0.5 text-xs text-muted-foreground">
                              {isDragOver
                                ? "Release to replace the document on file."
                                : "Saved to your application. Drag a new file here or click to replace it."}
                            </p>
                          )}
                        </div>

                        <span className="inline-flex shrink-0 items-center gap-1.5 rounded-md border border-primary/40 bg-card px-3 py-1.5 text-xs font-semibold text-primary shadow-2xs transition group-hover:border-primary group-hover:bg-primary/5">
                          <UploadCloud className="h-3.5 w-3.5" />
                          Replace file
                        </span>
                      </div>
                    ) : (
                      <div
                        onDragOver={(e) => handleDrag(e, field.fileKey, true)}
                        onDragLeave={(e) => handleDrag(e, field.fileKey, false)}
                        onDrop={(e) => handleDrop(e, field)}
                        className={cn(
                          "relative border-2 border-dashed rounded-lg p-6 flex flex-col items-center justify-center text-center transition-all bg-card/50",
                          isDragOver
                            ? "border-primary bg-primary/5 dark:bg-primary/10"
                            : "border-border hover:border-primary/50 hover:bg-muted/10",
                          fieldError &&
                            "border-destructive hover:border-destructive/80",
                          disabled &&
                            "opacity-50 pointer-events-none cursor-not-allowed",
                        )}
                      >
                        <input
                          type="file"
                          multiple={field.isMultiple}
                          accept={acceptString}
                          disabled={disabled}
                          onChange={(e) => handleFileSelect(e, field)}
                          id={`file-input-${field.fileKey}`}
                          className="absolute inset-0 w-full h-full opacity-0 cursor-pointer disabled:cursor-not-allowed"
                        />

                        <div className="p-3 bg-muted rounded-full mb-3 text-muted-foreground transition group-hover:scale-110">
                          <UploadCloud
                            className={cn(
                              "h-6 w-6 text-muted-foreground",
                              isDragOver && "text-primary animate-bounce",
                            )}
                          />
                        </div>

                        <p className="text-sm font-semibold text-foreground">
                          Drag & drop your file here, or{" "}
                          <span className="text-primary font-bold hover:underline">
                            browse
                          </span>
                        </p>

                        <p className="text-xs text-muted-foreground mt-1">
                          Supported formats:{" "}
                          {field.allowedExtensions.join(", ").toUpperCase() ||
                            "All"}
                        </p>
                      </div>
                    ))}
                </>
              )}

              {/* Validation Error Message */}
              {fieldError && (
                <div className="flex items-center gap-1.5 mt-1 text-xs text-destructive animate-in fade-in slide-in-from-top-1 duration-200">
                  <AlertCircle className="h-3.5 w-3.5" />
                  <span>{fieldError}</span>
                </div>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}

export default SmartFileInput;