"use client";

import { useEffect, useState } from "react";
import { getFiles, deleteFile, FileItem } from "@/lib/api";
import { FilePreview } from "./FilePreview";
import { File, Image as ImageIcon, FileText, FileCode, Trash2, Download, Paperclip, RefreshCw } from "lucide-react";

interface FileListProps {
  channelId: string;
}

function getFileIcon(file: FileItem) {
  const ext = file.name.split(".").pop()?.toLowerCase() || "";
  if (file.type.startsWith("image/") || ["png", "jpg", "jpeg", "gif", "svg", "webp"].includes(ext)) {
    return <ImageIcon size={20} className="text-slack-blue" />;
  }
  if (file.type === "application/pdf" || ext === "pdf") {
    return <FileText size={20} className="text-slack-red" />;
  }
  if (["js", "ts", "jsx", "tsx", "py", "go", "java", "c", "cpp", "rb", "rs", "html", "css", "json", "yaml", "yml"].includes(ext)) {
    return <FileCode size={20} className="text-slack-green" />;
  }
  return <File size={20} className="text-gray-400" />;
}

function formatSize(bytes: number | undefined) {
  if (!bytes) return "";
  if (bytes < 1024) return `${bytes} B`;
  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
}

export function FileList({ channelId }: FileListProps) {
  const [files, setFiles] = useState<FileItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [selectedFile, setSelectedFile] = useState<FileItem | null>(null);

  const loadFiles = () => {
    setLoading(true);
    setError("");
    getFiles(channelId)
      .then((data) => setFiles(Array.isArray(data) ? data : []))
      .catch((err) => {
        console.error("Failed to load files:", err);
        setError("Failed to load files");
      })
      .finally(() => setLoading(false));
  };

  useEffect(() => {
    loadFiles();
  }, [channelId]); // eslint-disable-line react-hooks/exhaustive-deps

  const handleDelete = (fileId: string) => {
    if (!confirm("Delete this file?")) return;
    deleteFile(fileId)
      .then(() => {
        setFiles((prev) => prev.filter((f) => f.id !== fileId));
      })
      .catch((err) => console.error("Failed to delete file:", err));
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center text-gray-400 py-12">
        <RefreshCw size={20} className="animate-pulse" />
      </div>
    );
  }

  if (error) {
    return (
      <div className="flex items-center justify-center text-slack-red py-12 text-sm">
        {error}
        <button
          onClick={loadFiles}
          className="ml-2 text-slack-purple hover:underline"
        >
          Retry
        </button>
      </div>
    );
  }

  if (files.length === 0) {
    return (
      <div className="flex flex-col items-center justify-center py-16 text-gray-400">
        <Paperclip size={48} className="mb-3 opacity-50" />
        <p className="text-sm">No files shared yet.</p>
      </div>
    );
  }

  return (
    <>
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
        {files.map((file) => (
          <div
            key={file.id}
            className="group p-3 rounded-lg border border-gray-200 bg-white shadow-sm hover:border-slack-purple/30 transition-colors"
          >
            <div className="flex items-start gap-3">
              <button
                onClick={() => setSelectedFile(file)}
                className="flex-shrink-0"
              >
                {getFileIcon(file)}
              </button>
              <div className="flex-1 min-w-0">
                <button
                  onClick={() => setSelectedFile(file)}
                  className="text-sm font-medium text-gray-700 hover:text-slack-purple truncate block text-left w-full"
                >
                  {file.name}
                </button>
                <div className="flex items-center gap-2 text-xs text-gray-400 mt-0.5">
                  {file.size && <span>{formatSize(file.size)}</span>}
                  {file.uploaded_by_user?.name && (
                    <span>· {file.uploaded_by_user.name}</span>
                  )}
                  {file.created_at && (
                    <span>
                      · {new Date(file.created_at).toLocaleDateString("en-US", {
                        month: "short",
                        day: "numeric",
                      })}
                    </span>
                  )}
                </div>
              </div>
              <div className="flex items-center gap-1 flex-shrink-0">
                <button
                  onClick={() => setSelectedFile(file)}
                  className="p-1 rounded text-gray-400 hover:text-slack-purple hover:bg-gray-50 transition-colors"
                  title="Preview"
                >
                  <Download size={14} />
                </button>
                <button
                  onClick={() => handleDelete(file.id)}
                  className="opacity-0 group-hover:opacity-100 p-1 rounded text-gray-400 hover:text-slack-red hover:bg-gray-50 transition-all"
                  title="Delete"
                >
                  <Trash2 size={14} />
                </button>
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* Preview modal */}
      {selectedFile && (
        <FilePreview
          file={selectedFile}
          onClose={() => setSelectedFile(null)}
        />
      )}
    </>
  );
}

export default FileList;