import { useState, useEffect } from 'react';
import { APP_ID } from '../../../api/config';
import { orderBookingClient } from '../../../api/clients';

export function ImagePreview({ file }: { file: any }) {
  const [url, setUrl] = useState<string | null>(null);

  useEffect(() => {
    if (file instanceof File) {
      const objectUrl = URL.createObjectURL(file);
      setUrl(objectUrl);
      return () => URL.revokeObjectURL(objectUrl);
    } else if (file && file.uuid) {
      setUrl(`${orderBookingClient.baseUrl}/app/${APP_ID}/view/files/${file.uuid}/preview`);
    } else if (typeof file === 'string' && file.startsWith('http')) {
      setUrl(file);
    }
  }, [file]);

  if (!url) return null;
  return <img src={url} alt="Preview" className="object-cover w-full h-full" />;
}

export function FileInput({
  label,
  type,
  required,
  value,
  onChange,
}: {
  label: string;
  type: 'image' | 'file' | string;
  required?: boolean;
  value: File[] | undefined | null | unknown;
  onChange: (files: File[]) => void;
}) {
  const files = Array.isArray(value) ? value : (value ? [value] : []);

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files.length > 0) {
      const newFiles = Array.from(e.target.files);
      // Since we only want 1 file, replace the existing one instead of appending
      onChange(newFiles);
    }
    // reset input so the same file can be selected again if needed
    e.target.value = '';
  };

  const removeFile = (index: number) => {
    const newFiles = [...files];
    newFiles.splice(index, 1);
    onChange(newFiles);
  };

  return (
    <div className="flex flex-col gap-1.5 font-sans">
      <span className="text-sm font-medium text-muted">
        {label}
        {required && <span className="text-ruby-600"> *</span>}
      </span>
      
      <div className="flex flex-col gap-3">
        <input
          type="file"
          required={required && files.length === 0}
          accept={type === 'image' ? 'image/*' : undefined}
          onChange={handleFileChange}
          className="w-full text-sm text-strong file:mr-4 file:py-2 file:px-4 file:rounded file:border-0 file:text-sm file:font-semibold file:bg-slate-100 file:text-navy-700 hover:file:bg-slate-200"
        />

        {files.length > 0 && (
          <div className="flex flex-wrap gap-3">
            {files.map((file, i) => (
              <div key={i} className="relative w-24 h-24 rounded-md overflow-hidden border border-border-default shadow-sm bg-slate-50 flex-shrink-0">
                {type === 'image' ? (
                  <ImagePreview file={file} />
                ) : (
                  <div className="w-full h-full flex items-center justify-center p-2 text-xs text-center break-all overflow-hidden text-muted">
                    {file.name || file.original_name || 'File'}
                  </div>
                )}
                <button
                  type="button"
                  onClick={() => removeFile(i)}
                  className="absolute top-1 right-1 bg-ruby-600/90 hover:bg-ruby-700 text-white rounded-full w-6 h-6 flex items-center justify-center text-xs shadow-md"
                  title="Remove file"
                >
                  ✕
                </button>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}