"use client";

import { useRef, useState } from "react";
import { Paperclip, X, FileText, Image as ImageIcon, Loader2 } from "lucide-react";
import { uploadFile } from "@/lib/api";

interface UploadedFile {
  name: string;
  url?: string;
  type: string;
  size: number;
}

interface FileUploadProps {
  onFileUploaded: (file: UploadedFile) => void;
}

export function FileUpload({ onFileUploaded }: FileUploadProps) {
  const fileInputRef = useRef<HTMLInputElement>(null);
  const [uploading, setUploading] = useState(false);
  const [error, setError] = useState("");
  const [preview, setPreview] = useState<UploadedFile | null>(null);

  const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;

    setError("");
    setUploading(true);

    // Show local preview immediately
    const localPreview: UploadedFile = {
      name: file.name,
      type: file.type,
      size: file.size,
    };
    if (file.type.startsWith("image/")) {
      localPreview.url = URL.createObjectURL(file);
    }
    setPreview(localPreview);

    try {
      const result = await uploadFile(file);
      const uploaded: UploadedFile = {
        name: result.name || file.name,
        url: result.url || result.file_url || result.fileUrl,
        type: file.type,
        size: file.size,
      };
      setPreview(uploaded);
      onFileUploaded(uploaded);
    } catch (err: any) {
      const msg =
        err.response?.data?.error ||
        err.response?.data?.message ||
        err.message ||
        "Upload failed";
      setError(typeof msg === "string" ? msg : JSON.stringify(msg));
      setPreview(null);
    } finally {
      setUploading(false);
      // Reset input so same file can be selected again
      if (fileInputRef.current) fileInputRef.current.value = "";
    }
  };

  const handleRemovePreview = () => {
    setPreview(null);
    setError("");
  };

  const formatSize = (bytes: number) => {
    if (bytes < 1024) return `${bytes} B`;
    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
  };

  const isImage = preview?.type.startsWith("image/");

  return (
    <div className="relative">
      <input
        ref={fileInputRef}
        type="file"
        onChange={handleFileSelect}
        className="hidden"
      />

      {/* Clip button */}
      <button
        type="button"
        onClick={() => fileInputRef.current?.click()}
        disabled={uploading}
        className="p-2 rounded-md text-gray-500 hover:bg-gray-100 hover:text-gray-700 disabled:opacity-40 transition-colors"
        title="Attach a file"
      >
        {uploading ? <Loader2 size={20} className="animate-spin" /> : <Paperclip size={20} />}
      </button>

      {/* Preview chip */}
      {preview && (
        <div className="mb-2 flex items-center gap-2 p-2 rounded-md bg-gray-50 border border-gray-200">
          {isImage && preview.url ? (
            <img
              src={preview.url}
              alt={preview.name}
              className="w-10 h-10 rounded object-cover"
            />
          ) : (
            <div className="w-10 h-10 rounded bg-gray-200 flex items-center justify-center">
              {isImage ? <ImageIcon size={18} className="text-gray-500" /> : <FileText size={18} className="text-gray-500" />}
            </div>
          )}
          <div className="flex-1 min-w-0">
            <p className="text-xs font-medium text-gray-700 truncate">{preview.name}</p>
            <p className="text-xs text-gray-400">{formatSize(preview.size)}</p>
          </div>
          <button
            type="button"
            onClick={handleRemovePreview}
            className="p-1 rounded text-gray-400 hover:text-gray-600 hover:bg-gray-200 transition-colors"
          >
            <X size={16} />
          </button>
        </div>
      )}

      {/* Error */}
      {error && (
        <div className="mb-2 p-2 rounded-md bg-red-50 border border-red-200 text-red-700 text-xs">
          {error}
        </div>
      )}
    </div>
  );
}