'use client';

import Image from 'next/image';
import { useRef } from 'react';

interface FileUploadProps {
  onFileSelect: (files: FileList) => void;
  acceptedTypes?: string;
  maxSize?: string;
}

export function FileUpload({ onFileSelect, acceptedTypes = '.pdf,.doc,.docx,.jpg,.png', maxSize = '5MB' }: FileUploadProps) {
  const fileInputRef = useRef<HTMLInputElement>(null);

  const handleClick = () => {
    fileInputRef.current?.click();
  };

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files.length > 0) {
      onFileSelect(e.target.files);
    }
  };

  const handleDrop = (e: React.DragEvent) => {
    e.preventDefault();
    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
      onFileSelect(e.dataTransfer.files);
    }
  };

  const handleDragOver = (e: React.DragEvent) => {
    e.preventDefault();
  };

  return (
    <div
      onClick={handleClick}
      onDrop={handleDrop}
      onDragOver={handleDragOver}
      className="border-2 border-dashed border-[#00293D]/20 rounded-[10px] p-6 text-center cursor-pointer hover:border-[#E58625]/50 transition-colors"
    >
      <input
        ref={fileInputRef}
        type="file"
        accept={acceptedTypes}
        onChange={handleChange}
        className="hidden"
        multiple
      />
      <p className="text-[14px] font-serif text-[#00293D]/70 mb-2">
        Drag and drop files here or click to upload files to provide documentation or verification for licensing credentials.
      </p>
      <p className="text-[12px] font-serif text-[#00293D]/50">
        {acceptedTypes.split(',').join(', ')} and more are accepted
      </p>
      <button
        type="button"
        className="mt-4 px-6 py-2 bg-[#E58625] text-white text-[14px] font-semibold font-serif rounded-full hover:bg-[#E58625]/90 transition-colors"
      >
        Upload
      </button>
    </div>
  );
}

interface AttachedFileProps {
  fileName: string;
  onRemove: () => void;
}

export function AttachedFile({ fileName, onRemove }: AttachedFileProps) {
  return (
    <div className="flex items-center justify-between p-3 bg-gray-50 rounded-[10px]">
      <div className="flex items-center gap-2">
        <Image src="/assets/icons/document-icon.svg" alt="Document" width={20} height={20} />
        <span className="text-[14px] font-serif text-[#00293D]">{fileName}</span>
      </div>
      <button onClick={onRemove} className="text-[#00293D]/50 hover:text-red-500 transition-colors">
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 4L4 12M4 4L12 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      </button>
    </div>
  );
}
