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";

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>;
  /** 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;
}

/** 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)} />;
}

export function SmartFileInput({
  file,
  value,
  onChange,
  errors,
  disabled = false,
  variant = "default",
  className,
}: 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>
      )}
      
      {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];

        // 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">
                {field.fileLabel}
                {field.isRequired && (
                  <span className="text-destructive font-bold" aria-hidden="true">
                    *
                  </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>
            )}

            {/* Selected Files List */}
            {currentFiles.length > 0 && (
              <div className="flex flex-col gap-2">
                {currentFiles.map((fileObj, idx) => (
                  <div
                    key={`${fileObj.name}-${idx}`}
                    className={cn(
                      "flex items-center justify-between p-3 rounded-lg border bg-card transition shadow-2xs hover:shadow-xs",
                      fieldError ? "border-destructive/30" : "border-border"
                    )}
                  >
                    <div className="flex items-center gap-3 min-w-0">
                      <div className="p-2 bg-muted rounded-md flex items-center justify-center">
                        <FileIcon name={fileObj.name} className="h-5 w-5" />
                      </div>
                      
                      <div className="min-w-0">
                        <p className="text-sm font-medium text-foreground truncate max-w-[200px] md:max-w-md" title={fileObj.name}>
                          {fileObj.name}
                        </p>
                        <div className="flex items-center gap-2 mt-0.5">
                          <span className="text-xs text-muted-foreground">
                            {formatBytes(fileObj.size)}
                          </span>
                          <span className="flex items-center gap-0.5 text-xs text-primary font-medium">
                            <CheckCircle2 className="h-3 w-3" /> Ready
                          </span>
                        </div>
                      </div>
                    </div>

                    <button
                      type="button"
                      disabled={disabled}
                      onClick={() => removeFile(field.fileKey, idx)}
                      className={cn(
                        "p-1.5 rounded-md text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors",
                        disabled && "opacity-50 pointer-events-none"
                      )}
                      aria-label={`Remove file ${fileObj.name}`}
                    >
                      <Trash2 className="h-4 w-4" />
                    </button>
                    
                    {/* Hidden inputs to represent file details in traditional form submissions */}
                    <input
                      type="hidden"
                      name={field.isMultiple ? `${field.fileKey}[]` : field.fileKey}
                      value={fileObj.name}
                    />
                  </div>
                ))}
              </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>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>
                </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>
  );
}

export default SmartFileInput;
