"use client";

import { useState, useCallback, useRef } from "react";
import { Upload, FileText, CheckCircle2, X, Loader2, AlertCircle } from "lucide-react";

export interface UploadedFile {
  file: File;
  status: "idle" | "uploading" | "done" | "error";
  progress: number;
  error?: string;
}

interface Props {
  docKey: string;
  label: string;
  accept?: string;
  maxSizeMb?: number;
  file: UploadedFile | null;
  onSelect: (docKey: string, file: File) => void;
  onRemove: (docKey: string) => void;
}

const ACCEPTED_TYPES = ".pdf,.jpg,.jpeg,.png,.webp";
const MAX_SIZE_MB = 10;

export default function DocumentDropzone({
  docKey,
  label,
  accept = ACCEPTED_TYPES,
  maxSizeMb = MAX_SIZE_MB,
  file,
  onSelect,
  onRemove,
}: Props) {
  const [dragActive, setDragActive] = useState(false);
  const inputRef = useRef<HTMLInputElement>(null);

  const validateAndSelect = useCallback(
    (f: File) => {
      if (f.size > maxSizeMb * 1024 * 1024) {
        return;
      }
      onSelect(docKey, f);
    },
    [docKey, maxSizeMb, onSelect],
  );

  const handleDrop = useCallback(
    (e: React.DragEvent) => {
      e.preventDefault();
      setDragActive(false);
      const dropped = e.dataTransfer.files[0];
      if (dropped) validateAndSelect(dropped);
    },
    [validateAndSelect],
  );

  const handleDragOver = useCallback((e: React.DragEvent) => {
    e.preventDefault();
    setDragActive(true);
  }, []);

  const handleDragLeave = useCallback(() => setDragActive(false), []);

  const handleInputChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      const f = e.target.files?.[0];
      if (f) validateAndSelect(f);
      if (inputRef.current) inputRef.current.value = "";
    },
    [validateAndSelect],
  );

  if (file && file.status !== "idle") {
    return (
      <div
        className={`relative flex items-center gap-3 p-4 rounded-xl border transition-colors ${
          file.status === "done"
            ? "border-green-deep/30 bg-green-deep/5"
            : file.status === "error"
              ? "border-red-200 bg-red-50 dark:border-red-700/30 dark:bg-red-900/20"
              : "border-border bg-green-deep/2"
        }`}
      >
        <div
          className={`w-10 h-10 rounded-lg flex items-center justify-center shrink-0 ${
            file.status === "done"
              ? "bg-green-deep text-white"
              : file.status === "error"
                ? "bg-red-100 text-red-500 dark:bg-red-900/30 dark:text-red-400"
                : "bg-surface-elevated text-muted"
          }`}
        >
          {file.status === "uploading" ? (
            <Loader2 className="w-5 h-5 animate-spin" />
          ) : file.status === "done" ? (
            <CheckCircle2 className="w-5 h-5" />
          ) : (
            <AlertCircle className="w-5 h-5" />
          )}
        </div>

        <div className="flex-1 min-w-0">
          <p className="font-inter text-sm font-medium text-ink-soft truncate">{label}</p>
          <p className="font-inter text-xs text-muted truncate">{file.file.name}</p>
          {file.status === "uploading" && (
            <div className="mt-1.5 h-1 bg-surface-elevated rounded-full overflow-hidden">
              <div
                className="h-full bg-green-deep rounded-full transition-all duration-300"
                style={{ width: `${file.progress}%` }}
              />
            </div>
          )}
          {file.status === "error" && (
            <p className="font-inter text-xs text-red-500 dark:text-red-400 mt-0.5">{file.error ?? "Upload failed"}</p>
          )}
        </div>

        {file.status !== "uploading" && (
          <button
            onClick={() => onRemove(docKey)}
            className="p-1 rounded-md hover:bg-surface-elevated text-muted/70 hover:text-ink/60 transition-colors cursor-pointer"
            aria-label="Remove file"
          >
            <X className="w-4 h-4" />
          </button>
        )}
      </div>
    );
  }

  return (
    <div
      onDrop={handleDrop}
      onDragOver={handleDragOver}
      onDragLeave={handleDragLeave}
      onClick={() => inputRef.current?.click()}
      className={`group flex flex-col items-center gap-2 p-5 rounded-xl border-2 border-dashed cursor-pointer transition-colors ${
        dragActive
          ? "border-green-deep/50 bg-green-deep/5"
          : "border-border bg-surface hover:border-green-deep/25 hover:bg-green-deep/[0.02]"
      }`}
    >
      <input
        ref={inputRef}
        type="file"
        accept={accept}
        onChange={handleInputChange}
        className="sr-only"
        aria-label={`Upload ${label}`}
      />

      <div className={`w-10 h-10 rounded-lg flex items-center justify-center transition-colors ${
        dragActive ? "bg-green-deep/10 text-green-deep" : "bg-surface-elevated text-muted/70 group-hover:text-green-deep/60"
      }`}>
        {dragActive ? <FileText className="w-5 h-5" /> : <Upload className="w-5 h-5" />}
      </div>

      <div className="text-center">
        <p className="font-inter text-sm font-medium text-ink-soft">{label}</p>
        <p className="font-inter text-xs text-muted mt-0.5">
          {dragActive ? "Drop to upload" : "Drag & drop or click to browse"}
        </p>
        <p className="font-inter text-[10px] text-ink/25 mt-1">
          PDF, JPG, PNG up to {maxSizeMb}MB
        </p>
      </div>
    </div>
  );
}