import React, { useState } from "react";
import { Upload, FileText, Loader2, CheckCircle2 } from "lucide-react";
import { Input } from "@/components/ui/input";

export default function DragDropFileUpload({
  onFileSelect,
  accept = ".pdf,.jpg,.jpeg,.png,.doc,.docx",
  label,
  hint,
  uploading = false,
  uploaded = false,
  uploadedFileName = null,
  disabled = false
}) {
  const [isDragging, setIsDragging] = useState(false);

  const handleDragEnter = (e) => {
    e.preventDefault();
    e.stopPropagation();
    if (!disabled) setIsDragging(true);
  };

  const handleDragLeave = (e) => {
    e.preventDefault();
    e.stopPropagation();
    setIsDragging(false);
  };

  const handleDragOver = (e) => {
    e.preventDefault();
    e.stopPropagation();
  };

  const handleDrop = (e) => {
    e.preventDefault();
    e.stopPropagation();
    setIsDragging(false);

    if (disabled) return;

    const files = e.dataTransfer.files;
    if (files && files.length > 0) {
      onFileSelect(files[0]);
    }
  };

  const handleFileInput = (e) => {
    const files = e.target.files;
    if (files && files.length > 0) {
      onFileSelect(files[0]);
    }
  };

  return (
    <div
      className={`border-2 border-dashed rounded-lg p-6 transition-all ${
        disabled
          ? 'border-slate-200 bg-slate-50 cursor-not-allowed opacity-60'
          : isDragging
          ? 'border-[#0A39DF] bg-blue-50 scale-[1.02]'
          : uploaded
          ? 'border-green-300 bg-green-50/30 hover:border-green-400'
          : 'border-slate-300 hover:border-[#0A39DF] hover:bg-blue-50/30 cursor-pointer'
      }`}
      onDragEnter={handleDragEnter}
      onDragOver={handleDragOver}
      onDragLeave={handleDragLeave}
      onDrop={handleDrop}
    >
      {label && (
        <div className="mb-4">
          <h3 className="font-semibold text-lg flex items-center gap-2">
            <FileText className={`w-5 h-5 ${uploaded ? 'text-green-600' : 'text-[#0A39DF]'}`} />
            {label}
          </h3>
          {hint && <p className="text-sm text-slate-600 mt-1">{hint}</p>}
        </div>
      )}

      <div className="flex flex-col items-center justify-center py-6">
        {uploading ? (
          <div className="flex flex-col items-center gap-3">
            <Loader2 className="w-12 h-12 animate-spin text-[#0A39DF]" />
            <p className="text-sm text-slate-600">Uploading and validating...</p>
          </div>
        ) : uploaded ? (
          <div className="flex flex-col items-center gap-3">
            <CheckCircle2 className="w-12 h-12 text-green-600" />
            <div className="text-center">
              <p className="text-sm font-medium text-green-700">Document uploaded successfully</p>
              {uploadedFileName && (
                <p className="text-xs text-slate-500 mt-1">{uploadedFileName}</p>
              )}
            </div>
            <label htmlFor={`file-input-${label}`} className="text-xs text-blue-600 hover:underline cursor-pointer">
              Upload different file
            </label>
          </div>
        ) : (
          <div className="flex flex-col items-center gap-3">
            <Upload className={`w-12 h-12 ${isDragging ? 'text-[#0A39DF] animate-bounce' : 'text-slate-400'}`} />
            <div className="text-center">
              <p className="text-sm font-medium text-slate-700">
                {isDragging ? 'Drop file here' : 'Drag and drop your file here'}
              </p>
              <p className="text-xs text-slate-500 mt-1">or</p>
              <label htmlFor={`file-input-${label}`} className="text-sm text-[#0A39DF] hover:underline cursor-pointer font-medium">
                Browse files
              </label>
              <p className="text-xs text-slate-400 mt-2">
                Accepted: {accept.split(',').join(', ')}
              </p>
            </div>
          </div>
        )}
      </div>

      <Input
        id={`file-input-${label}`}
        type="file"
        accept={accept}
        onChange={handleFileInput}
        disabled={disabled || uploading}
        className="hidden"
      />
    </div>
  );
}