'use client';

import { useState, useEffect } from 'react';
import { fileApi } from '@/lib/api';
import { FileItem } from '@/types';
import { formatBytes, formatDate, getFileIcon } from '@/lib/utils';
import { motion } from 'framer-motion';
import { Upload, Search, FolderPlus, Grid, List, Download, Trash2, Star, X } from 'lucide-react';
import { useDropzone } from 'react-dropzone';
import toast from 'react-hot-toast';

export default function FilesPage() {
  const [files, setFiles] = useState<FileItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [view, setView] = useState<'grid' | 'list'>('grid');
  const [search, setSearch] = useState('');
  const [category, setCategory] = useState('all');
  const [showUpload, setShowUpload] = useState(false);
  const [uploadProgress, setUploadProgress] = useState(0);
  const [showCreateFolder, setShowCreateFolder] = useState(false);
  const [folderName, setFolderName] = useState('');

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

  const loadFiles = async () => {
    try {
      const { data } = await fileApi.getAll();
      setFiles(data);
    } catch {} finally {
      setLoading(false);
    }
  };

  const onDrop = async (acceptedFiles: File[]) => {
    const formData = new FormData();
    acceptedFiles.forEach(f => formData.append('files', f));
    try {
      setShowUpload(true);
      await fileApi.uploadMultiple(formData);
      toast.success(`${acceptedFiles.length} file(s) uploaded`);
      loadFiles();
    } catch {
      toast.error('Upload failed');
    } finally {
      setShowUpload(false);
    }
  };

  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });

  const createFolder = async () => {
    if (!folderName.trim()) return;
    try {
      await fileApi.createFolder({ name: folderName });
      setFolderName('');
      setShowCreateFolder(false);
      toast.success('Folder created');
    } catch {}
  };

  const deleteFile = async (id: string) => {
    if (!confirm('Delete this file?')) return;
    try {
      await fileApi.delete(id);
      setFiles(prev => prev.filter(f => f.id !== id));
      toast.success('File deleted');
    } catch {}
  };

  const toggleFav = async (id: string) => {
    try {
      const { data } = await fileApi.toggleFavorite(id);
      setFiles(prev => prev.map(f => f.id === id ? { ...f, isFavorited: data.isFavorited } : f));
    } catch {}
  };

  const filtered = files.filter(f =>
    (category === 'all' || f.category === category) &&
    f.originalName.toLowerCase().includes(search.toLowerCase())
  );

  const categories = ['all', 'image', 'video', 'audio', 'document', 'archive', 'other'];

  if (loading) {
    return (
      <div className="h-full flex items-center justify-center">
        <div className="flex items-center gap-3">
          <div className="w-6 h-6 border-2 border-primary-500 border-t-transparent rounded-full animate-spin" />
          <p className="text-sm text-vault-muted">Loading files...</p>
        </div>
      </div>
    );
  }

  return (
    <div className="h-full flex flex-col p-6" {...getRootProps()}>
      <input {...getInputProps()} />

      {/* Drop overlay */}
      {isDragActive && (
        <div className="absolute inset-0 bg-primary-500/10 backdrop-blur-sm z-50 flex items-center justify-center rounded-2xl border-2 border-dashed border-primary-500/50">
          <div className="text-center">
            <Upload className="w-12 h-12 text-primary-500 mx-auto mb-3" />
            <p className="text-lg font-medium text-primary-400">Drop files to upload</p>
          </div>
        </div>
      )}

      {/* Header */}
      <div className="flex items-center justify-between mb-6">
        <div>
          <h1 className="text-2xl font-bold">Files</h1>
          <p className="text-sm text-vault-muted">Manage and organize your files</p>
        </div>
        <div className="flex items-center gap-2">
          <button
            onClick={() => setView('grid')}
            className={`p-2 rounded-lg transition-colors ${view === 'grid' ? 'bg-primary-500/20 text-primary-400' : 'text-vault-muted hover:text-vault-text'}`}
          >
            <Grid className="w-4 h-4" />
          </button>
          <button
            onClick={() => setView('list')}
            className={`p-2 rounded-lg transition-colors ${view === 'list' ? 'bg-primary-500/20 text-primary-400' : 'text-vault-muted hover:text-vault-text'}`}
          >
            <List className="w-4 h-4" />
          </button>
          <button
            onClick={() => setShowCreateFolder(true)}
            className="btn-secondary text-xs flex items-center gap-1.5"
          >
            <FolderPlus className="w-3.5 h-3.5" /> Folder
          </button>
        </div>
      </div>

      {/* Search & Filter */}
      <div className="flex items-center gap-3 mb-6">
        <div className="flex-1 flex items-center gap-2 glass rounded-lg px-3 py-2 max-w-md">
          <Search className="w-4 h-4 text-vault-muted" />
          <input
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            placeholder="Search files..."
            className="flex-1 bg-transparent text-sm text-vault-text placeholder-vault-muted/50 focus:outline-none"
          />
          {search && <X className="w-4 h-4 text-vault-muted cursor-pointer" onClick={() => setSearch('')} />}
        </div>
        <div className="flex gap-1">
          {categories.map(c => (
            <button
              key={c}
              onClick={() => setCategory(c)}
              className={`px-3 py-1.5 rounded-lg text-xs font-medium capitalize transition-colors ${
                category === c ? 'bg-primary-500/20 text-primary-400' : 'text-vault-muted hover:text-vault-text'
              }`}
            >
              {c}
            </button>
          ))}
        </div>
      </div>

      {/* Create folder input */}
      {showCreateFolder && (
        <motion.div
          initial={{ opacity: 0, y: -10 }}
          animate={{ opacity: 1, y: 0 }}
          className="flex gap-2 mb-4"
        >
          <input
            value={folderName}
            onChange={(e) => setFolderName(e.target.value)}
            placeholder="Folder name"
            className="input-field max-w-xs text-sm"
            onKeyDown={(e) => e.key === 'Enter' && createFolder()}
            autoFocus
          />
          <button onClick={createFolder} className="btn-primary text-sm">Create</button>
          <button onClick={() => setShowCreateFolder(false)} className="btn-secondary text-sm">Cancel</button>
        </motion.div>
      )}

      {/* Files */}
      {view === 'grid' ? (
        <div className="flex-1 overflow-y-auto scrollbar-thin">
          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
            {filtered.map((file) => (
              <motion.div
                key={file.id}
                initial={{ opacity: 0, scale: 0.95 }}
                animate={{ opacity: 1, scale: 1 }}
                className="glass-card p-4 group cursor-pointer hover:border-primary-500/20 transition-all"
              >
                <div className="aspect-square rounded-lg bg-vault-surface flex items-center justify-center text-4xl mb-3 overflow-hidden">
                  {file.category === 'image' ? (
                    <img src={`http://localhost:5000/${file.path}`} alt={file.originalName} className="w-full h-full object-cover" />
                  ) : (
                    <span>{getFileIcon(file.category)}</span>
                  )}
                </div>
                <p className="text-xs font-medium truncate">{file.originalName}</p>
                <div className="flex items-center justify-between mt-1">
                  <span className="text-[10px] text-vault-muted">{formatBytes(file.fileSize)}</span>
                  <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
                    <button onClick={() => toggleFav(file.id)} className={`p-1 rounded ${file.isFavorited ? 'text-yellow-500' : 'text-vault-muted hover:text-yellow-500'}`}>
                      <Star className="w-3 h-3" />
                    </button>
                    <button onClick={() => deleteFile(file.id)} className="p-1 rounded text-vault-muted hover:text-red-400">
                      <Trash2 className="w-3 h-3" />
                    </button>
                  </div>
                </div>
              </motion.div>
            ))}
          </div>
          {filtered.length === 0 && (
            <div className="text-center py-20">
              <Upload className="w-12 h-12 text-vault-muted mx-auto mb-3" />
              <p className="text-vault-muted">Drop files here or click to upload</p>
            </div>
          )}
        </div>
      ) : (
        <div className="flex-1 overflow-y-auto scrollbar-thin">
          <div className="space-y-1">
            {filtered.map((file) => (
              <div key={file.id} className="flex items-center gap-4 px-4 py-3 glass-card hover:border-primary-500/20 transition-all group">
                <span className="text-xl">{getFileIcon(file.category)}</span>
                <div className="flex-1 min-w-0">
                  <p className="text-sm font-medium truncate">{file.originalName}</p>
                  <p className="text-[10px] text-vault-muted">{formatBytes(file.fileSize)} • {formatDate(file.createdAt)}</p>
                </div>
                <span className="text-xs text-vault-muted capitalize">{file.category}</span>
                <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
                  <button onClick={() => toggleFav(file.id)} className={`p-1.5 rounded ${file.isFavorited ? 'text-yellow-500' : 'text-vault-muted hover:text-yellow-500'}`}>
                    <Star className="w-3.5 h-3.5" />
                  </button>
                  <button onClick={() => deleteFile(file.id)} className="p-1.5 rounded text-vault-muted hover:text-red-400">
                    <Trash2 className="w-3.5 h-3.5" />
                  </button>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Upload progress */}
      {showUpload && (
        <div className="absolute bottom-6 right-6 glass-darker p-4 rounded-xl border border-vault-border/50">
          <div className="flex items-center gap-3">
            <div className="w-5 h-5 border-2 border-primary-500 border-t-transparent rounded-full animate-spin" />
            <span className="text-sm">Uploading files...</span>
          </div>
        </div>
      )}
    </div>
  );
}