import { useEffect, useId, useRef, useState, type ChangeEvent, type DragEvent as ReactDragEvent, type InputHTMLAttributes } from "react";
import { cn } from "../../lib/cn";
import {
  fieldNote,
  matchesAcceptedFileTypes,
  UploadPreviewChip,
  type FieldMeta,
  type UploadPreviewItem,
} from "./shared";

export type FileUploadProps = FieldMeta & {
  accept?: string;
  acceptedFileTypes?: string[];
  autoUpload?: boolean;
  className?: string;
  defaultUploadState?: "idle" | "error" | "success" | "uploading";
  fileName?: string;
  maxFiles?: number;
  minFiles?: number;
  multiple?: boolean;
  onFileRemove?: (fileName: string, index: number) => void;
  onFilesChange?: (files: FileList) => void;
  onUploadCancel?: () => void;
  onChange?: InputHTMLAttributes<HTMLInputElement>["onChange"];
  onUploadRequest?: (files: File[]) => Promise<void> | void;
  onUploadRetry?: (files: File[]) => Promise<void> | void;
  uploadProgress?: number;
  uploadState?: "idle" | "error" | "success" | "uploading";
  uploadButtonLabel?: string;
  uploadingLabel?: string;
};

export function FileUpload({
  accept,
  acceptedFileTypes,
  autoUpload = true,
  className,
  defaultUploadState = "idle",
  fileName,
  maxFiles,
  minFiles,
  multiple,
  onFileRemove,
  onFilesChange,
  onUploadCancel,
  onChange,
  onUploadRequest,
  onUploadRetry,
  error,
  hint,
  label,
  uploadProgress,
  uploadState,
  uploadButtonLabel = "Upload files",
  uploadingLabel = "Uploading files",
}: FileUploadProps) {
  const generatedId = useId();
  const inputRef = useRef<HTMLInputElement>(null);
  const [dragActive, setDragActive] = useState(false);
  const [internalUploadState, setInternalUploadState] = useState<FileUploadProps["uploadState"]>(defaultUploadState);
  const [internalError, setInternalError] = useState<string | undefined>();
  const [selectedFiles, setSelectedFiles] = useState<UploadPreviewItem[]>(
    fileName ? [{ name: fileName, size: 0, type: "" }] : [],
  );
  const resolvedUploadState = uploadState ?? internalUploadState;
  const isUploading = resolvedUploadState === "uploading";
  const resolvedAccept = accept ?? acceptedFileTypes?.join(",");
  const selectedCount = selectedFiles.length;
  const helperText = [
    resolvedAccept ? `Allowed: ${resolvedAccept}` : null,
    minFiles ? `Min ${minFiles}` : null,
    maxFiles ? `Max ${maxFiles}` : null,
    multiple ? "Multiple files" : "Single file",
    autoUpload ? "Uploads automatically" : "Manual upload",
  ]
    .filter(Boolean)
    .join(" · ");

  useEffect(() => {
    return () => {
      selectedFiles.forEach((file) => {
        if (file.url) {
          URL.revokeObjectURL(file.url);
        }
      });
    };
  }, [selectedFiles]);

  async function runUpload(kind: "initial" | "retry") {
    if (selectedFiles.length === 0) {
      return;
    }

    const files = selectedFiles.map((file) => file.file).filter(Boolean) as File[];
    if (files.length === 0) {
      return;
    }

    setInternalUploadState("uploading");
    setInternalError(undefined);

    try {
      const action = kind === "retry" ? onUploadRetry ?? onUploadRequest : onUploadRequest;
      if (action) {
        await action(files);
      }
      setInternalUploadState("success");
    } catch (uploadError) {
      setInternalUploadState("error");
      setInternalError(uploadError instanceof Error ? uploadError.message : "Upload failed. Retry to continue.");
    }
  }

  function handleFiles(files: FileList | null) {
    if (!files || files.length === 0) {
      return;
    }

    if (isUploading) {
      return;
    }

    const nextFiles = Array.from(files);
    const normalizedFiles = multiple ? nextFiles : nextFiles.slice(0, 1);

    if (maxFiles && normalizedFiles.length > maxFiles) {
      setInternalUploadState("error");
      setInternalError(`You can upload at most ${maxFiles} file${maxFiles === 1 ? "" : "s"}.`);
      return;
    }

    if (minFiles && normalizedFiles.length < minFiles) {
      setInternalUploadState("error");
      setInternalError(`Select at least ${minFiles} file${minFiles === 1 ? "" : "s"}.`);
      return;
    }

    const invalidFile = normalizedFiles.find((file) => !matchesAcceptedFileTypes(file, acceptedFileTypes));
    if (invalidFile) {
      setInternalUploadState("error");
      setInternalError(`"${invalidFile.name}" is not an allowed file type.`);
      return;
    }

    setSelectedFiles((current) => {
      current.forEach((file) => {
        if (file.url) {
          URL.revokeObjectURL(file.url);
        }
      });

      return normalizedFiles.map((file) => ({
        file,
        name: file.name,
        size: file.size,
        type: file.type,
        url:
          file.type.startsWith("image/") || file.type === "application/pdf"
            ? URL.createObjectURL(file)
            : undefined,
      }));
    });
    setInternalError(undefined);
    setInternalUploadState(autoUpload ? "uploading" : "idle");
    onFilesChange?.(files);
    onChange?.({
      target: { files },
      currentTarget: { files },
    } as ChangeEvent<HTMLInputElement>);

    if (autoUpload) {
      void Promise.resolve().then(() => runUpload("initial"));
    }
  }

  function handleDrop(event: ReactDragEvent<HTMLDivElement>) {
    event.preventDefault();
    setDragActive(false);
    handleFiles(event.dataTransfer.files);
  }

  function removeFile(index: number) {
    if (isUploading) {
      return;
    }
    setSelectedFiles((current) => {
      const next = current.filter((_, itemIndex) => itemIndex !== index);
      const removed = current[index];
      if (removed?.url) {
        URL.revokeObjectURL(removed.url);
      }
      onFileRemove?.(removed?.name ?? "", index);
      if (next.length === 0) {
        setInternalUploadState("idle");
        setInternalError(undefined);
      }
      return next;
    });
  }

  const selectedLabel = selectedFiles[0]?.name ?? fileName ?? "Choose a file to upload";
  return (
    <label className={cn("flex w-full flex-col gap-2", className)} htmlFor={generatedId}>
      {label ? <span className="text-sm font-medium text-[var(--uhuru-text-primary)]">{label}</span> : null}
      <div
        className={cn(
          "rounded-[min(var(--uhuru-radius-lg),1.125rem)] border border-dashed p-4 transition",
          dragActive
            ? "border-[var(--uhuru-border-accent)] bg-[var(--uhuru-accent-subtle)]"
            : resolvedUploadState === "success"
              ? "border-[var(--uhuru-success-border)] bg-[var(--uhuru-success-bg)]"
              : resolvedUploadState === "error"
                ? "border-[var(--uhuru-error-border)] bg-[var(--uhuru-error-bg)]"
                : "border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-muted)]",
        )}
        onClick={() => {
          if (isUploading) {
            return;
          }
          inputRef.current?.click();
        }}
        onDragEnter={(event) => {
          event.preventDefault();
          if (isUploading) {
            return;
          }
          setDragActive(true);
        }}
        onDragLeave={(event) => {
          event.preventDefault();
          if (event.currentTarget.contains(event.relatedTarget as Node | null)) {
            return;
          }
          setDragActive(false);
        }}
        onDragOver={(event) => {
          event.preventDefault();
          if (isUploading) {
            return;
          }
          setDragActive(true);
        }}
        onDrop={handleDrop}
        role="button"
        tabIndex={0}
        onKeyDown={(event) => {
          if (isUploading) {
            return;
          }
          if (event.key === "Enter" || event.key === " ") {
            event.preventDefault();
            inputRef.current?.click();
          }
        }}
      >
        <div className="flex min-w-0 flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
          <div className="grid min-w-0 flex-1 gap-1">
            <span className="truncate text-sm font-medium text-[var(--uhuru-text-primary)] sm:whitespace-nowrap">
              {dragActive
                ? "Drop files to upload"
                : selectedFiles.length > 1
                  ? `${selectedFiles.length} files selected`
                  : selectedLabel}
            </span>
            <span className="text-xs text-[var(--uhuru-text-secondary)]">
              {dragActive
                ? "Release to attach the selected files."
                : resolvedUploadState === "uploading"
                  ? `${uploadingLabel}${uploadProgress !== undefined ? ` · ${uploadProgress}%` : ""}`
                  : resolvedUploadState === "success"
                    ? "Files uploaded successfully."
                    : resolvedUploadState === "error"
                      ? "Upload interrupted. Review the files and retry."
                      : "Drag and drop files here or click to browse."}
            </span>
            {helperText ? (
              <span className="truncate text-[0.6875rem] text-[var(--uhuru-text-tertiary)]">
                {helperText}
              </span>
            ) : null}
            {internalError ? (
              <span className="text-xs text-[var(--uhuru-error-text)]">{internalError}</span>
            ) : null}
          </div>
          <div className="flex shrink-0 items-center gap-2 self-start sm:self-center">
            <span className="inline-flex h-[var(--uhuru-control-height)] min-w-[8.75rem] shrink-0 items-center justify-center whitespace-nowrap rounded-[var(--uhuru-radius-control)] border border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-default)] px-4 text-sm font-medium text-[var(--uhuru-text-primary)] shadow-[var(--uhuru-shadow-sm)]">
              {isUploading ? "Uploading" : "Browse files"}
            </span>
            {isUploading ? (
              <button
                aria-label="Cancel upload"
                className="inline-flex h-[var(--uhuru-control-height)] w-[var(--uhuru-control-height)] items-center justify-center rounded-[var(--uhuru-radius-control)] border border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-default)] text-[var(--uhuru-text-primary)] transition hover:bg-[var(--uhuru-surface-muted)]"
                onClick={(event) => {
                  event.preventDefault();
                  event.stopPropagation();
                  setInternalUploadState("error");
                  setInternalError("Upload cancelled. Resume when ready.");
                  onUploadCancel?.();
                }}
                type="button"
              >
                <svg aria-hidden="true" className="h-4 w-4" fill="none" viewBox="0 0 20 20">
                  <path d="M6 6L14 14M14 6L6 14" stroke="currentColor" strokeLinecap="round" strokeWidth="1.8" />
                </svg>
              </button>
            ) : null}
          </div>
        </div>
        {resolvedUploadState === "uploading" ? (
          <div className="mt-4 grid gap-2">
            <div className="h-2 overflow-hidden rounded-full bg-[var(--uhuru-surface-default)]">
              <div
                className="h-full rounded-full bg-[var(--uhuru-action-primary)] transition-[width] duration-300"
                style={{ width: `${Math.max(6, Math.min(uploadProgress ?? 24, 100))}%` }}
              />
            </div>
          </div>
        ) : null}
        {resolvedUploadState === "success" ? (
          <div className="mt-4 inline-flex items-center gap-2 rounded-full bg-[var(--uhuru-success-bg)] px-3 py-1.5 text-xs font-medium text-[var(--uhuru-success-text)]">
            <svg aria-hidden="true" className="h-4 w-4" fill="none" viewBox="0 0 20 20">
              <path d="M4.75 10.5L8.25 14L15.25 6" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" />
            </svg>
            Upload complete
          </div>
        ) : null}
        {selectedFiles.length > 0 && resolvedUploadState !== "success" ? (
          <div className="mt-4 flex items-center gap-2">
            {!autoUpload ? (
              <button
                className="inline-flex h-[var(--uhuru-control-height)] items-center justify-center rounded-[var(--uhuru-radius-control)] border border-[var(--uhuru-border-strong)] bg-[var(--uhuru-action-primary)] px-[var(--uhuru-control-padding-x)] text-sm font-medium text-[var(--uhuru-text-inverse)] disabled:cursor-not-allowed disabled:opacity-50"
                disabled={selectedCount < (minFiles ?? 1)}
                onClick={(event) => {
                  event.preventDefault();
                  event.stopPropagation();
                  void runUpload("initial");
                }}
                type="button"
              >
                {uploadButtonLabel}
              </button>
            ) : null}
            {resolvedUploadState === "error" ? (
              <button
                className="inline-flex h-[var(--uhuru-control-height)] items-center justify-center rounded-[var(--uhuru-radius-control)] border border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-default)] px-[var(--uhuru-control-padding-x)] text-sm text-[var(--uhuru-text-primary)]"
                onClick={(event) => {
                  event.preventDefault();
                  event.stopPropagation();
                  void runUpload("retry");
                }}
                type="button"
              >
                {autoUpload ? "Resume upload" : "Retry upload"}
              </button>
            ) : null}
          </div>
        ) : null}
        {selectedFiles.length > 0 ? (
          <div className="mt-4 flex min-w-0 max-w-full flex-wrap gap-2 overflow-hidden">
            {selectedFiles.map((file, index) => (
              <UploadPreviewChip
                file={file}
                index={index}
                isUploading={isUploading}
                key={`${file.name}-${index}`}
                onRemove={removeFile}
              />
            ))}
          </div>
        ) : null}
        <input
          accept={resolvedAccept}
          className="sr-only"
          id={generatedId}
          multiple={multiple}
          disabled={isUploading}
          onChange={(event) => {
            handleFiles(event.target.files);
          }}
          ref={inputRef}
          type="file"
        />
      </div>
      {fieldNote(error, hint)}
    </label>
  );
}