"use client";

import { FormEvent, useEffect, useRef, useState, DragEvent } from "react";
import { useRouter } from "next/navigation";

type FileRow = {
  id: string;
  name: string;
  relativePath: string;
  contentType: string;
  sizeBytes: number;
  createdAt: string | Date;
};

const MAX_UPLOAD_SIZE = 10 * 1024 * 1024 * 1024; // 10GB in bytes

function formatBytes(bytes: number) {
  if (!bytes) return "0 B";
  const sizes = ["B", "KB", "MB", "GB", "TB"];
  const i = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), sizes.length - 1);
  const value = bytes / Math.pow(1024, i);
  return `${value.toFixed(value >= 10 || value % 1 === 0 ? 0 : 1)} ${sizes[i]}`;
}

function getFileIcon(contentType: string) {
  if (contentType.startsWith("image/")) {
    return (
      <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
      </svg>
    );
  }
  if (contentType.startsWith("video/")) {
    return (
      <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
      </svg>
    );
  }
  if (contentType.includes("pdf")) {
    return (
      <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
      </svg>
    );
  }
  return (
    <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
    </svg>
  );
}

export default function DashboardPage() {
  const router = useRouter();
  const [files, setFiles] = useState<FileRow[]>([]);
  const [loadingList, setLoadingList] = useState(true);
  const [uploading, setUploading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [isDragging, setIsDragging] = useState(false);
  const [deletingAll, setDeletingAll] = useState(false);
  const [showDeleteAllConfirm, setShowDeleteAllConfirm] = useState(false);
  const [deletingFileId, setDeletingFileId] = useState<string | null>(null);
  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
  const fileInputRef = useRef<HTMLInputElement | null>(null);
  const folderInputRef = useRef<HTMLInputElement | null>(null);

  const loadFiles = async () => {
    setLoadingList(true);
    const res = await fetch("/api/files/list");
    const data = await res.json();
    setLoadingList(false);
    if (!res.ok) {
      setError(data?.error ?? "Unable to load files");
      return;
    }
    setFiles(data.files ?? []);
  };

  useEffect(() => {
    loadFiles();
  }, []);

  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files;
    if (files && files.length > 0) {
      const fileArray = Array.from(files);
      setSelectedFiles((prev) => [...prev, ...fileArray]);
    }
    // Reset input to allow selecting the same file again
    e.target.value = "";
  };

  const getTotalSelectedSize = () => {
    return selectedFiles.reduce((acc, f) => acc + f.size, 0);
  };

  const isOverSizeLimit = () => {
    return getTotalSelectedSize() > MAX_UPLOAD_SIZE;
  };

  const handleUpload = async (e: FormEvent) => {
    e.preventDefault();
    if (selectedFiles.length === 0) {
      setError("Please choose at least one file or folder.");
      return;
    }

    if (isOverSizeLimit()) {
      setError("Total upload size exceeds 10GB limit. Please remove some files.");
      return;
    }

    const formData = new FormData();
    selectedFiles.forEach((file) => {
      const fileWithPath = file as File & { webkitRelativePath?: string };
      const filename = fileWithPath.webkitRelativePath || fileWithPath.name;
      formData.append("files", fileWithPath, filename);
    });

    setUploading(true);
    setError(null);
    const res = await fetch("/api/files/upload", {
      method: "POST",
      body: formData,
    });
    const data = await res.json();
    setUploading(false);
    if (!res.ok) {
      setError(data?.error ?? "Upload failed");
      return;
    }
    setFiles((prev) => [...data.files, ...prev]);
    setSelectedFiles([]);
  };

  const clearSelectedFiles = () => {
    setSelectedFiles([]);
  };

  const addFilesToSelection = (fileList: FileList) => {
    setSelectedFiles((prev) => [...prev, ...Array.from(fileList)]);
  };

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

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

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

  const handleDownload = async (id: string) => {
    const res = await fetch(`/api/files/${id}/download`);
    const data = await res.json();
    if (!res.ok) {
      setError(data?.error ?? "Unable to download");
      return;
    }
    window.location.assign(data.url);
  };

  const handleDelete = async (id: string) => {
    setDeletingFileId(id);
    setError(null);
    const res = await fetch(`/api/files/${id}/delete`, { method: "DELETE" });
    const data = await res.json();
    setDeletingFileId(null);
    if (!res.ok) {
      setError(data?.error ?? "Unable to delete");
      return;
    }
    setFiles((prev) => prev.filter((f) => f.id !== id));
  };

  const handleDeleteAll = async () => {
    setDeletingAll(true);
    setError(null);
    const res = await fetch("/api/files/delete-all", { method: "DELETE" });
    const data = await res.json();
    setDeletingAll(false);
    setShowDeleteAllConfirm(false);
    if (!res.ok) {
      setError(data?.error ?? "Unable to delete all files");
      return;
    }
    setFiles([]);
  };

  const handleLogout = async () => {
    await fetch("/api/auth/logout", { method: "POST" });
    router.push("/login");
  };

  return (
    <div className="min-h-screen flex flex-col">
      {/* Header */}
      <header className="border-b-4 border-accent-lime bg-bg-card sticky top-0 z-50">
        <div className="mx-auto max-w-6xl px-4 sm:px-6 py-4">
          <div className="flex items-center justify-between gap-4">
            <div className="flex items-center gap-4">
              {/* Logo */}
              <div className="flex items-center gap-2">
                <div className="w-10 h-10 bg-accent-lime flex items-center justify-center">
                  <svg className="w-6 h-6 text-bg-dark" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
                  </svg>
                </div>
                <div className="hidden sm:block">
                  <h1 className="text-lg font-black text-text-primary tracking-tight">
                    Asa's FTP
                  </h1>
                  <p className="text-xs text-text-muted uppercase tracking-wider">
                    Asa's FTP Storage
                  </p>
                </div>
              </div>
            </div>
            
            <button
              onClick={handleLogout}
              className="brutal-btn-outline text-xs px-4 py-2"
              style={{ boxShadow: "3px 3px 0 var(--accent-lime)" }}
            >
              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
              </svg>
              <span className="hidden sm:inline">Logout</span>
            </button>
          </div>
        </div>
      </header>

      {/* Main Content */}
      <main className="flex-1 mx-auto w-full max-w-6xl px-4 sm:px-6 py-6 sm:py-8">
        {/* Upload Section */}
        <section className="mb-8 animate-slide-up">
          <div className="flex items-center gap-3 mb-4">
            <div className="w-2 h-8 bg-accent-cyan" />
            <h2 className="text-xl font-black text-text-primary uppercase tracking-tight">
              Upload Files
            </h2>
          </div>
          
          <div 
            className={`brutal-card p-6 sm:p-8 transition-all duration-200 ${
              isDragging ? "border-accent-cyan" : ""
            }`}
            style={{ 
              boxShadow: isDragging 
                ? "8px 8px 0 var(--accent-cyan)" 
                : "8px 8px 0 var(--accent-lime)" 
            }}
            onDragOver={handleDragOver}
            onDragLeave={handleDragLeave}
            onDrop={handleDrop}
          >
            <form onSubmit={handleUpload}>
              {/* Drop Zone */}
              <div 
                className={`border-3 border-dashed rounded-none p-8 sm:p-12 text-center transition-colors ${
                  isDragging 
                    ? "border-accent-cyan bg-accent-cyan/5" 
                    : "border-text-muted hover:border-accent-lime"
                }`}
                style={{ borderWidth: "3px" }}
              >
                <div className="flex flex-col items-center gap-4">
                  <div className={`w-16 h-16 flex items-center justify-center transition-colors ${
                    isDragging ? "bg-accent-cyan" : "bg-bg-elevated"
                  }`}>
                    <svg 
                      className={`w-8 h-8 transition-colors ${
                        isDragging ? "text-bg-dark" : "text-text-secondary"
                      }`} 
                      fill="none" 
                      viewBox="0 0 24 24" 
                      stroke="currentColor"
                    >
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
                    </svg>
                  </div>
                  <div>
                    <p className="text-text-primary font-bold text-lg">
                      {isDragging ? "Drop files here" : "Drag & drop files here"}
                    </p>
                    <p className="text-text-muted text-sm mt-1">
                      or select files/folders from your computer
                    </p>
                  </div>
                  {/* Hidden file inputs */}
                  <input
                    type="file"
                    multiple
                    ref={fileInputRef}
                    onChange={handleFileSelect}
                    style={{ display: "none" }}
                  />
                  <input
                    type="file"
                    multiple
                    ref={folderInputRef}
                    onChange={handleFileSelect}
                    // @ts-expect-error webkitdirectory is valid in browsers
                    webkitdirectory=""
                    style={{ display: "none" }}
                  />
                  <div className="flex flex-wrap items-center justify-center gap-3">
                    <button
                      type="button"
                      onClick={() => fileInputRef.current?.click()}
                      className="brutal-btn-outline cursor-pointer text-sm"
                    >
                      <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                      </svg>
                      Select Files
                    </button>
                    <button
                      type="button"
                      onClick={() => folderInputRef.current?.click()}
                      className="brutal-btn-outline cursor-pointer text-sm"
                      style={{ 
                        borderColor: "var(--accent-cyan)",
                        boxShadow: "4px 4px 0 var(--accent-cyan)"
                      }}
                    >
                      <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
                      </svg>
                      Select Folder
                    </button>
                  </div>
                </div>
              </div>
              
              {/* Selected Files Preview */}
              {selectedFiles.length > 0 && (
                <div className={`mt-6 p-4 bg-bg-elevated border-2 ${isOverSizeLimit() ? "border-danger" : "border-text-muted"}`}>
                  <div className="flex items-center justify-between mb-3">
                    <p className="text-sm font-bold text-text-primary">
                      {selectedFiles.length} {selectedFiles.length === 1 ? "file" : "files"} selected
                      <span className={`ml-2 font-normal ${isOverSizeLimit() ? "text-danger" : "text-text-muted"}`}>
                        ({formatBytes(getTotalSelectedSize())} / 10 GB max)
                      </span>
                    </p>
                    <button
                      type="button"
                      onClick={clearSelectedFiles}
                      className="text-xs text-text-muted hover:text-danger transition-colors"
                    >
                      Clear all
                    </button>
                  </div>
                  {isOverSizeLimit() && (
                    <div className="flex items-center gap-2 mb-3 p-2 bg-danger/10 border border-danger text-danger text-xs">
                      <svg className="w-4 h-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                      </svg>
                      Total size exceeds 10GB limit. Remove some files to continue.
                    </div>
                  )}
                  <div className="flex flex-wrap gap-2 max-h-32 overflow-y-auto">
                    {selectedFiles.slice(0, 10).map((file, idx) => (
                      <span
                        key={idx}
                        className="inline-flex items-center gap-1.5 px-2 py-1 bg-bg-card text-xs text-text-secondary border border-text-muted"
                      >
                        <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                        </svg>
                        {file.name.length > 25 ? file.name.slice(0, 22) + "..." : file.name}
                      </span>
                    ))}
                    {selectedFiles.length > 10 && (
                      <span className="inline-flex items-center px-2 py-1 bg-accent-lime/20 text-xs text-accent-lime font-bold">
                        +{selectedFiles.length - 10} more
                      </span>
                    )}
                  </div>
                </div>
              )}

              {/* Upload Button */}
              <div className="mt-6 flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-4">
                <p className="text-text-muted text-sm">
                  {selectedFiles.length === 0 
                    ? "Supports files and entire folders with preserved structure"
                    : "Ready to upload"}
                </p>
                <button
                  type="submit"
                  className="brutal-btn"
                  disabled={uploading || selectedFiles.length === 0 || isOverSizeLimit()}
                >
                  {uploading ? (
                    <>
                      <svg className="animate-spin h-5 w-5" viewBox="0 0 24 24">
                        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
                        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
                      </svg>
                      Uploading...
                    </>
                  ) : (
                    <>
                      <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
                      </svg>
                      Upload {selectedFiles.length > 0 ? `${selectedFiles.length} Files` : "Files"}
                    </>
                  )}
                </button>
              </div>
            </form>
          </div>
          
          {/* Error Message */}
          {error && (
            <div className="mt-4 flex items-center gap-3 p-4 bg-danger/10 border-l-4 border-danger animate-slide-left">
              <svg className="w-5 h-5 text-danger flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
              <p className="text-sm text-danger font-medium">{error}</p>
              <button 
                onClick={() => setError(null)}
                className="ml-auto text-danger hover:text-text-primary"
              >
                <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </div>
          )}
        </section>

        {/* Files Section */}
        <section className="animate-slide-up delay-200" style={{ opacity: 0, animationFillMode: "forwards" }}>
          <div className="flex items-center justify-between gap-4 mb-4">
            <div className="flex items-center gap-3">
              <div className="w-2 h-8 bg-accent-magenta" />
              <h2 className="text-xl font-black text-text-primary uppercase tracking-tight">
                Your Files
              </h2>
              <span className="text-xs font-bold text-text-muted bg-bg-elevated px-2 py-1">
                {files.length} {files.length === 1 ? "FILE" : "FILES"}
              </span>
            </div>
            <div className="flex items-center gap-2">
              {files.length > 0 && (
                <button
                  className="brutal-btn-danger text-xs px-3 py-2"
                  onClick={() => setShowDeleteAllConfirm(true)}
                  disabled={deletingAll}
                >
                  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                  </svg>
                  Delete All
                </button>
              )}
              <button
                className="brutal-btn-outline text-xs px-3 py-2"
                onClick={loadFiles}
                disabled={loadingList}
                style={{ 
                  borderColor: "var(--accent-magenta)",
                  boxShadow: "3px 3px 0 var(--accent-magenta)"
                }}
              >
                <svg 
                  className={`w-4 h-4 ${loadingList ? "animate-spin" : ""}`} 
                  fill="none" 
                  viewBox="0 0 24 24" 
                  stroke="currentColor"
                >
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                </svg>
                {loadingList ? "Loading..." : "Refresh"}
              </button>
            </div>
          </div>

          <div className="brutal-card overflow-hidden" style={{ boxShadow: "8px 8px 0 var(--accent-magenta)" }}>
            {loadingList ? (
              <div className="p-12 text-center">
                <div className="inline-flex items-center gap-3">
                  <svg className="animate-spin h-6 w-6 text-accent-magenta" viewBox="0 0 24 24">
                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
                  </svg>
                  <span className="text-text-secondary font-medium">Loading your files...</span>
                </div>
              </div>
            ) : files.length === 0 ? (
              <div className="p-12 text-center">
                <div className="w-20 h-20 mx-auto mb-6 bg-bg-elevated flex items-center justify-center">
                  <svg className="w-10 h-10 text-text-muted" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z" />
                  </svg>
                </div>
                <h3 className="text-xl font-black text-text-primary mb-2">No files yet</h3>
                <p className="text-text-muted text-sm max-w-sm mx-auto">
                  Upload your first file or folder using the upload section above.
                </p>
              </div>
            ) : (
              <>
                {/* Desktop Table */}
                <div className="hidden md:block overflow-x-auto">
                  <table className="brutal-table">
                    <thead>
                      <tr>
                        <th className="w-12"></th>
                        <th>Name</th>
                        <th>Path</th>
                        <th>Size</th>
                        <th className="text-right">Actions</th>
                      </tr>
                    </thead>
                    <tbody>
                      {files.map((file, index) => (
                        <tr 
                          key={file.id}
                          className="animate-slide-up"
                          style={{ 
                            opacity: 0, 
                            animationFillMode: "forwards",
                            animationDelay: `${index * 50}ms`
                          }}
                        >
                          <td className="text-text-muted">
                            {getFileIcon(file.contentType)}
                          </td>
                          <td className="font-bold text-text-primary">{file.name}</td>
                          <td className="text-text-muted font-mono text-xs">{file.relativePath}</td>
                          <td className="text-text-secondary">{formatBytes(file.sizeBytes)}</td>
                          <td>
                            <div className="flex items-center justify-end gap-2">
                              <button
                                className="brutal-btn-outline text-xs px-3 py-1.5"
                                onClick={() => handleDownload(file.id)}
                                style={{ boxShadow: "2px 2px 0 var(--accent-lime)" }}
                              >
                                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                                </svg>
                                Download
                              </button>
                              <button
                                className="brutal-btn-danger"
                                onClick={() => handleDelete(file.id)}
                                disabled={deletingFileId === file.id}
                              >
                                {deletingFileId === file.id ? (
                                  <>
                                    <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24">
                                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
                                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
                                    </svg>
                                    Deleting...
                                  </>
                                ) : (
                                  <>
                                    <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                    </svg>
                                    Delete
                                  </>
                                )}
                              </button>
                            </div>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>

                {/* Mobile Cards */}
                <div className="md:hidden divide-y divide-bg-elevated">
                  {files.map((file, index) => (
                    <div 
                      key={file.id}
                      className="p-4 animate-slide-up"
                      style={{ 
                        opacity: 0, 
                        animationFillMode: "forwards",
                        animationDelay: `${index * 50}ms`
                      }}
                    >
                      <div className="flex items-start gap-3">
                        <div className="text-text-muted mt-0.5">
                          {getFileIcon(file.contentType)}
                        </div>
                        <div className="flex-1 min-w-0">
                          <p className="font-bold text-text-primary truncate">{file.name}</p>
                          <p className="text-xs text-text-muted font-mono truncate mt-1">{file.relativePath}</p>
                          <p className="text-xs text-text-secondary mt-1">{formatBytes(file.sizeBytes)}</p>
                        </div>
                      </div>
                      <div className="flex items-center gap-2 mt-4">
                        <button
                          className="flex-1 brutal-btn-outline text-xs py-2"
                          onClick={() => handleDownload(file.id)}
                          style={{ boxShadow: "2px 2px 0 var(--accent-lime)" }}
                        >
                          <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                          </svg>
                          Download
                        </button>
                        <button
                          className="brutal-btn-danger py-2 px-4"
                          onClick={() => handleDelete(file.id)}
                          disabled={deletingFileId === file.id}
                        >
                          {deletingFileId === file.id ? (
                            <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24">
                              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
                              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
                            </svg>
                          ) : (
                            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                            </svg>
                          )}
                        </button>
                      </div>
                    </div>
                  ))}
                </div>
              </>
            )}
          </div>
        </section>
      </main>

      {/* Delete All Confirmation Modal */}
      {showDeleteAllConfirm && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-bg-dark/80 animate-fade-in">
          <div 
            className="brutal-card p-6 max-w-md w-full animate-slide-up"
            style={{ boxShadow: "8px 8px 0 var(--danger)" }}
          >
            <div className="flex items-center gap-3 mb-4">
              <div className="w-12 h-12 bg-danger/20 flex items-center justify-center">
                <svg className="w-6 h-6 text-danger" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                </svg>
              </div>
              <div>
                <h3 className="text-lg font-black text-text-primary">Delete All Files?</h3>
                <p className="text-sm text-text-muted">This action cannot be undone</p>
              </div>
            </div>
            <p className="text-text-secondary mb-6">
              You are about to permanently delete <span className="font-bold text-danger">{files.length} {files.length === 1 ? "file" : "files"}</span> from your storage. This action is irreversible.
            </p>
            <div className="flex items-center gap-3">
              <button
                className="flex-1 brutal-btn-outline text-sm py-2.5"
                onClick={() => setShowDeleteAllConfirm(false)}
                disabled={deletingAll}
              >
                Cancel
              </button>
              <button
                className="flex-1 brutal-btn-danger text-sm py-2.5"
                onClick={handleDeleteAll}
                disabled={deletingAll}
              >
                {deletingAll ? (
                  <>
                    <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24">
                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
                    </svg>
                    Deleting...
                  </>
                ) : (
                  <>
                    <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                    </svg>
                    Delete All
                  </>
                )}
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Footer */}
      <footer className="border-t-2 border-bg-elevated py-4 mt-auto">
        <div className="mx-auto max-w-6xl px-4 sm:px-6">
          <div className="flex flex-col sm:flex-row items-center justify-evenly gap-2 text-xs text-text-muted">
            <p>FTP</p>
            <p>asabizanjo.dev</p>
            <div className="flex items-center gap-2">
              <div className="w-2 h-2 bg-accent-lime" />
              <div className="w-2 h-2 bg-accent-magenta" />
              <div className="w-2 h-2 bg-accent-cyan" />
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
}