'use client';

import * as React from 'react';

import { UploadCloudIcon } from '@/icons';
import { cva, type VariantProps } from '@/lib/cva';
import { cn } from '@/lib/utils';
import { buttonVariants } from '@/components/button/button';

/*
 * CBAR's FileUpload has five `type` values, but only two of them are a distinct
 * surface: the dashed drop target and a plain trigger button. Its `input`,
 * `clearable` and `paste` types are its Input component with a file trigger
 * attached, which this kit composes rather than ships as variants — see §9a of
 * the README.
 */
const uploadVariants = cva(
  cn(
    'group/upload relative cursor-pointer',
    'transition-colors duration-(--ui-duration-fast) ease-(--ui-ease-standard)'
  ),
  {
    variants: {
      variant: {
        dropzone: cn(
          /* CBAR draws the dashed rule at 2px and sizes the box to ~224px tall;
             the padding alone would collapse it to the height of its label. */
          'flex min-h-56 flex-col items-center justify-center gap-4 rounded-sm border-2 border-dashed border-input bg-background px-3 py-2 text-center',
          'hover:border-ring/60 hover:bg-accent/40',
          'focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50',
          'data-dragging:border-ring data-dragging:bg-accent/60'
        ),
        button: cn(
          buttonVariants({ variant: 'outline', size: 'md' }),
          'focus-within:ring-[3px] focus-within:ring-ring/50'
        ),
      },
    },
    defaultVariants: {
      variant: 'dropzone',
    },
  }
);

/** A picked file, tagged so a caller can track it across progress callbacks. */
export interface UploadFile extends File {
  uid: string;
}

export type UploadRequestMethod = 'POST' | 'PUT' | 'PATCH';

export interface UploadProgressEvent extends Partial<ProgressEvent> {
  /** 0–100. Absent when the browser reports an indeterminate length. */
  percent?: number;
}

export interface UploadRequestError extends Error {
  status?: number;
  method?: UploadRequestMethod;
  url?: string;
}

/** The description of one transfer, handed to `customRequest`. */
export interface UploadRequestOption<T = unknown> {
  action: string;
  method: UploadRequestMethod;
  /** Form field name the file is sent under. */
  filename: string;
  file: File | Blob;
  data?: Record<string, unknown>;
  headers?: Record<string, string>;
  withCredentials?: boolean;
  onProgress?: (event: UploadProgressEvent) => void;
  onSuccess?: (body: T, xhr?: XMLHttpRequest) => void;
  onError?: (error: UploadRequestError | ProgressEvent, body?: T) => void;
}

export interface UploadRequestHandle {
  abort: () => void;
}

/**
 * `false` cancels the upload, a `File`/`Blob` replaces what gets sent (for
 * client-side resizing or encryption), and anything else lets it proceed.
 */
export type BeforeUploadResult = File | Blob | boolean | void;

export interface UploadProps extends VariantProps<typeof uploadVariants> {
  /** Where to send the file. A function is resolved per file, for signed URLs. */
  action?: string | ((file: UploadFile) => string | PromiseLike<string>);
  method?: UploadRequestMethod;
  /** Form field name the file is sent under. */
  name?: string;
  /** Extra form fields. A function is resolved per file. */
  data?:
    | Record<string, unknown>
    | ((file: UploadFile) => Record<string, unknown> | PromiseLike<Record<string, unknown>>);
  headers?: Record<string, string>;
  withCredentials?: boolean;
  accept?: string;
  multiple?: boolean;
  /** Pick a whole folder rather than individual files. */
  directory?: boolean;
  disabled?: boolean;
  /** Set `false` to open the picker yourself, e.g. from a button elsewhere. */
  openFileDialogOnClick?: boolean;
  beforeUpload?: (
    file: UploadFile,
    fileList: UploadFile[]
  ) => BeforeUploadResult | Promise<BeforeUploadResult>;
  /** Take over the transfer entirely — resumable uploads, SDK clients, S3. */
  customRequest?: (
    option: UploadRequestOption,
    info: { defaultRequest: (option: UploadRequestOption) => UploadRequestHandle }
  ) => UploadRequestHandle | void;
  onStart?: (file: UploadFile) => void;
  onProgress?: (event: UploadProgressEvent, file: UploadFile) => void;
  onSuccess?: (response: unknown, file: UploadFile, xhr?: XMLHttpRequest) => void;
  onError?: (error: UploadRequestError | ProgressEvent, body: unknown, file: UploadFile) => void;
  id?: string;
  className?: string;
  classNames?: { input?: string };
  children?: React.ReactNode;
  'aria-label'?: string;
}

let uidSeed = 0;
/** Tags a File in place — its object identity is what callers key progress on. */
const withUid = (file: File): UploadFile => {
  const tagged = file as UploadFile;
  uidSeed += 1;
  tagged.uid = `upload-${uidSeed}`;
  return tagged;
};

const parseBody = (xhr: XMLHttpRequest) => {
  const text = xhr.responseText || xhr.response;
  if (!text) return text;
  try {
    return JSON.parse(text);
  } catch {
    /* Not every endpoint answers in JSON; hand back what actually arrived. */
    return text;
  }
};

/**
 * The transfer performed when `customRequest` is not given.
 *
 * `XMLHttpRequest` rather than `fetch`, because upload progress events and a
 * cheap abort are the two things `fetch` still cannot do.
 */
function xhrRequest(option: UploadRequestOption): UploadRequestHandle {
  const xhr = new XMLHttpRequest();

  if (option.onProgress && xhr.upload) {
    xhr.upload.onprogress = (event: ProgressEvent) => {
      option.onProgress?.({
        ...event,
        percent: event.total > 0 ? (event.loaded / event.total) * 100 : undefined,
      });
    };
  }

  const form = new FormData();
  for (const [key, value] of Object.entries(option.data ?? {})) {
    form.append(key, value as string);
  }
  form.append(option.filename, option.file);

  xhr.onerror = (event) => option.onError?.(event);

  xhr.onload = () => {
    const body = parseBody(xhr);

    if (xhr.status < 200 || xhr.status >= 300) {
      const error: UploadRequestError = Object.assign(
        new Error(`Upload failed with status ${xhr.status}`),
        { status: xhr.status, method: option.method, url: option.action }
      );
      option.onError?.(error, body);
      return;
    }

    option.onSuccess?.(body, xhr);
  };

  xhr.open(option.method, option.action, true);
  if (option.withCredentials) xhr.withCredentials = true;
  for (const [header, value] of Object.entries(option.headers ?? {})) {
    xhr.setRequestHeader(header, value);
  }
  xhr.send(form);

  return { abort: () => xhr.abort() };
}

/**
 * File picker with drag and drop.
 *
 * The visible surface is entirely yours — pass `children` to replace the
 * default dropzone. What this handles is the awkward part: a hidden but still
 * *focusable* file input wrapped in a `<label>`, so the control is reachable by
 * keyboard and announced as the file input it is, plus drop targets and an
 * abortable request that reports progress.
 *
 * Point it at an endpoint with `action`, or take over the request with
 * `customRequest` when you need signed URLs or a resumable upload.
 *
 * Keep `children` non-interactive: they sit inside a `<label>`, where a nested
 * button or link would fight the label for the click.
 *
 * ```tsx
 * <Upload
 *   action="/api/uploads"
 *   multiple
 *   accept="image/*"
 *   onSuccess={(res, file) => toast.success(`${file.name} uploaded`)}
 * />
 * ```
 */
function Upload({
  action,
  method = 'POST',
  name = 'file',
  data,
  headers,
  withCredentials,
  accept,
  multiple,
  directory,
  disabled,
  openFileDialogOnClick = true,
  beforeUpload,
  customRequest,
  onStart,
  onProgress,
  onSuccess,
  onError,
  id,
  variant = 'dropzone',
  className,
  classNames,
  children,
  ...props
}: UploadProps) {
  const inFlight = React.useRef(new Map<string, UploadRequestHandle>());
  const [isDragging, setIsDragging] = React.useState(false);

  /* A request outliving its component would call back into unmounted state. */
  React.useEffect(() => {
    const requests = inFlight.current;
    return () => {
      requests.forEach((request) => request.abort());
      requests.clear();
    };
  }, []);

  const send = async (file: UploadFile, payload: File | Blob) => {
    onStart?.(file);

    const url = typeof action === 'function' ? await action(file) : action;
    const fields = typeof data === 'function' ? await data(file) : data;

    const settle = () => inFlight.current.delete(file.uid);

    const option: UploadRequestOption = {
      action: url ?? '',
      method,
      filename: name,
      file: payload,
      data: fields,
      headers,
      withCredentials,
      onProgress: (event) => onProgress?.(event, file),
      onSuccess: (body, xhr) => {
        settle();
        onSuccess?.(body, file, xhr);
      },
      onError: (error, body) => {
        settle();
        onError?.(error, body, file);
      },
    };

    const handle = customRequest
      ? customRequest(option, { defaultRequest: xhrRequest })
      : xhrRequest(option);

    if (handle) inFlight.current.set(file.uid, handle);
  };

  const accept_ = async (files: File[]) => {
    if (disabled || files.length === 0) return;

    const batch = (multiple ? files : files.slice(0, 1)).map(withUid);

    for (const file of batch) {
      const decision = await beforeUpload?.(file, batch);
      if (decision === false) continue;

      /* A returned File/Blob replaces what goes over the wire, while the
         original file stays the identity reported back to the caller. */
      const payload = decision instanceof Blob ? decision : file;
      void send(file, payload);
    }
  };

  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    void accept_(Array.from(event.target.files ?? []));
    /* Clearing lets the same file be picked twice in a row — without it the
       second pick fires no change event at all. */
    event.target.value = '';
  };

  const handleDrop = (event: React.DragEvent<HTMLLabelElement>) => {
    event.preventDefault();
    setIsDragging(false);
    void accept_(Array.from(event.dataTransfer.files));
  };

  return (
    <label
      data-slot="upload"
      data-variant={variant}
      data-dragging={isDragging ? '' : undefined}
      data-disabled={disabled ? '' : undefined}
      className={cn(
        uploadVariants({ variant }),
        disabled && 'pointer-events-none opacity-50',
        className
      )}
      onDragOver={(event) => {
        event.preventDefault();
        /* Only the drop target advertises itself as one — a trigger button is
           not somewhere a file can be dropped. */
        if (!disabled && variant === 'dropzone') setIsDragging(true);
      }}
      onDragLeave={() => setIsDragging(false)}
      onDrop={handleDrop}
      onClick={(event) => {
        if (!openFileDialogOnClick) event.preventDefault();
      }}
    >
      {/* Visually hidden but still in the tab order, so the control is reachable
          by keyboard and reads as the file input it actually is. */}
      <input
        id={id}
        type="file"
        accept={accept}
        multiple={multiple}
        disabled={disabled}
        onChange={handleInputChange}
        className={cn('sr-only', classNames?.input)}
        {...(directory ? ({ webkitdirectory: '', directory: '' } as object) : null)}
        {...props}
      />
      {children ??
        (variant === 'button' ? (
          <>
            <UploadCloudIcon className="size-5" />
            Upload file
          </>
        ) : (
          <UploadDropzone />
        ))}
    </label>
  );
}

/* `title` is widened to ReactNode, so the native string-only attribute of the
   same name is dropped rather than conflicting with it. */
export interface UploadDropzoneProps extends Omit<React.ComponentProps<'div'>, 'title'> {
  title?: React.ReactNode;
  hint?: React.ReactNode;
}

/** Default contents of the drop target. Replace it by passing `children`. */
function UploadDropzone({
  className,
  title = 'Drop files here, or click to browse',
  hint = 'Up to 10 MB each',
  ...props
}: UploadDropzoneProps) {
  return (
    <div
      data-slot="upload-dropzone"
      className={cn('pointer-events-none flex flex-col items-center gap-1', className)}
      {...props}
    >
      <UploadCloudIcon className="size-5 text-muted-foreground" />
      <div className="text-sm font-semibold">{title}</div>
      {/* CBAR sets the hint at the same 14px as the title and separates the two
          by weight, not size. */}
      {hint ? <div className="text-sm text-muted-foreground">{hint}</div> : null}
    </div>
  );
}

export { Upload, UploadDropzone, uploadVariants, xhrRequest };