"use client";

import { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import { 
  Database, 
  Search, 
  BarChart3, 
  Download, 
  Upload, 
  Edit,
  Eye,
  Plus,
  TrendingUp,
  Users,
  Star,
  Tag,
  FolderOpen,
  Calendar,
  Activity
} from 'lucide-react';
import { projectService } from '@/lib/prisma';
import { useToast } from './Toast';

interface Project {
  id: number;
  title: string;
  description: string;
  content: string;
  imageUrl?: string | null;
  github?: string | null;
  liveUrl?: string | null;
  tags: string[];
  category: string;
  difficulty: string;
  featured: boolean;
  published: boolean;
  createdAt: Date;
  updatedAt: Date;
  _count?: {
    pageViews: number;
    userInteractions: number;
  };
}

interface AdminDashboardProps {
  onProjectSelect: (project: Project) => void;
  onNewProject: () => void;
}

export default function AdminDashboard({ onProjectSelect, onNewProject }: AdminDashboardProps) {
  const [projects, setProjects] = useState<Project[]>([]);
  const [loading, setLoading] = useState(true);
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedCategory, setSelectedCategory] = useState<string>('');
  const [sortBy, setSortBy] = useState<'date' | 'title' | 'difficulty' | 'views'>('date');
  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc');
  const [selectedProjects, setSelectedProjects] = useState<Set<number>>(new Set());
  const [showStats, setShowStats] = useState(false);
  const { showImportSuccess, showImportError, showError } = useToast();

  // Load projects from database
  useEffect(() => {
    loadProjects();
  }, []);

  const loadProjects = async () => {
    try {
      setLoading(true);
      const data = await projectService.getAllProjects();
      setProjects(data.projects);
    } catch (error) {
      console.error('Error loading projects:', error);
      // Fallback to localStorage if database fails
      const savedProjects = localStorage.getItem('portfolio-projects');
      if (savedProjects) {
        setProjects(JSON.parse(savedProjects));
      }
    } finally {
      setLoading(false);
    }
  };

  // Filter and sort projects
  const filteredProjects = projects
    .filter(project => {
      const matchesSearch = project.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
                          project.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
                          project.tags.some(tag => tag.toLowerCase().includes(searchQuery.toLowerCase()));
      const matchesCategory = !selectedCategory || project.category === selectedCategory;
      return matchesSearch && matchesCategory;
    })
    .sort((a, b) => {
      let aValue: string | number | Date, bValue: string | number | Date;
      
      switch (sortBy) {
        case 'date':
          aValue = new Date(a.createdAt);
          bValue = new Date(b.createdAt);
          break;
        case 'title':
          aValue = a.title.toLowerCase();
          bValue = b.title.toLowerCase();
          break;
        case 'difficulty':
          const difficultyOrder = { 'Beginner': 1, 'Intermediate': 2, 'Advanced': 3, 'Expert': 4 };
          aValue = difficultyOrder[a.difficulty as keyof typeof difficultyOrder];
          bValue = difficultyOrder[b.difficulty as keyof typeof difficultyOrder];
          break;
        case 'views':
          aValue = a._count?.pageViews || 0;
          bValue = b._count?.pageViews || 0;
          break;
        default:
          aValue = a.createdAt;
          bValue = b.createdAt;
      }
      
      if (sortOrder === 'asc') {
        return aValue > bValue ? 1 : -1;
      } else {
        return aValue < bValue ? 1 : -1;
      }
    });

  // Statistics
  const stats = {
    total: projects.length,
    published: projects.filter(p => p.published).length,
    featured: projects.filter(p => p.featured).length,
    categories: new Set(projects.map(p => p.category)).size,
    totalViews: projects.reduce((sum, p) => sum + (p._count?.pageViews || 0), 0),
    totalLikes: projects.reduce((sum, p) => sum + (p._count?.userInteractions || 0), 0),
    avgLighthouse: 0
  };

  // Bulk operations
  const handleBulkDelete = async () => {
    if (selectedProjects.size === 0) return;
    
    if (confirm(`Are you sure you want to delete ${selectedProjects.size} projects?`)) {
      try {
        for (const id of selectedProjects) {
          await projectService.deleteProject(id);
        }
        setSelectedProjects(new Set());
        await loadProjects();
        showImportSuccess(selectedProjects.size); // Reuse for success message
      } catch (error) {
        console.error('Error deleting projects:', error);
        showError('Fehler beim Löschen', 'Einige Projekte konnten nicht gelöscht werden.');
      }
    }
  };

  const handleBulkPublish = async (published: boolean) => {
    if (selectedProjects.size === 0) return;
    
    try {
      for (const id of selectedProjects) {
        await projectService.updateProject(id, { published });
      }
      setSelectedProjects(new Set());
      await loadProjects();
      showImportSuccess(selectedProjects.size); // Reuse for success message
    } catch (error) {
      console.error('Error updating projects:', error);
      showError('Fehler beim Aktualisieren', 'Einige Projekte konnten nicht aktualisiert werden.');
    }
  };

  // Export/Import
  const exportProjects = () => {
    const dataStr = JSON.stringify(projects, null, 2);
    const dataBlob = new Blob([dataStr], { type: 'application/json' });
    const url = URL.createObjectURL(dataBlob);
    const link = document.createElement('a');
    link.href = url;
    link.download = `portfolio-projects-${new Date().toISOString().split('T')[0]}.json`;
    link.click();
    URL.revokeObjectURL(url);
  };

  const importProjects = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (!file) return;
    
    const reader = new FileReader();
    reader.onload = async (e) => {
      try {
        const importedProjects = JSON.parse(e.target?.result as string);
        // Validate and import projects
        let importedCount = 0;
        for (const project of importedProjects) {
          if (project.id) delete project.id; // Remove ID for new import
          await projectService.createProject(project);
          importedCount++;
        }
        await loadProjects();
        showImportSuccess(importedCount);
      } catch (error) {
        console.error('Error importing projects:', error);
        showImportError('Bitte überprüfe das Dateiformat und versuche es erneut.');
      }
    };
    reader.readAsText(file);
  };

  const categories = Array.from(new Set(projects.map(p => p.category)));

  if (loading) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="animate-spin rounded-full h-32 w-32 border-b-2 border-blue-500"></div>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      {/* Header with Stats */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        className="glass-card p-6 rounded-2xl"
      >
        <div className="flex items-center justify-between mb-6">
          <h2 className="text-2xl font-bold text-white flex items-center">
            <Database className="mr-3 text-blue-400" />
            Project Database
          </h2>
          <div className="flex space-x-3">
            <button
              onClick={() => setShowStats(!showStats)}
              className={`px-4 py-2 rounded-lg transition-colors flex items-center space-x-2 ${
                showStats ? 'bg-blue-600 text-white' : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
              }`}
            >
              <BarChart3 size={20} />
              <span>Stats</span>
            </button>
            <button
              onClick={exportProjects}
              className="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg transition-colors flex items-center space-x-2"
            >
              <Download size={20} />
              <span>Export</span>
            </button>
            <label className="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg transition-colors flex items-center space-x-2 cursor-pointer">
              <Upload size={20} />
              <span>Import</span>
              <input
                type="file"
                accept=".json"
                onChange={importProjects}
                className="hidden"
              />
            </label>
          </div>
        </div>

        {/* Quick Stats */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          <div className="bg-gradient-to-br from-blue-500/20 to-blue-600/20 p-4 rounded-xl border border-blue-500/30">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-blue-300">Total Projects</p>
                <p className="text-2xl font-bold text-white">{stats.total}</p>
              </div>
              <FolderOpen className="text-blue-400" size={24} />
            </div>
          </div>
          
          <div className="bg-gradient-to-br from-green-500/20 to-green-600/20 p-4 rounded-xl border border-green-500/30">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-green-300">Published</p>
                <p className="text-2xl font-bold text-white">{stats.published}</p>
              </div>
              <Eye className="text-green-400" size={24} />
            </div>
          </div>
          
          <div className="bg-gradient-to-br from-yellow-500/20 to-yellow-600/20 p-4 rounded-xl border border-yellow-500/30">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-yellow-300">Featured</p>
                <p className="text-2xl font-bold text-white">{stats.featured}</p>
              </div>
              <Star className="text-yellow-400" size={24} />
            </div>
          </div>
          
          <div className="bg-gradient-to-br from-purple-500/20 to-purple-600/20 p-4 rounded-xl border border-purple-500/30">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-purple-300">Categories</p>
                <p className="text-2xl font-bold text-white">{stats.categories}</p>
              </div>
              <Tag className="text-purple-400" size={24} />
            </div>
          </div>
        </div>

        {/* Extended Stats */}
        {showStats && (
          <motion.div
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: 'auto' }}
            exit={{ opacity: 0, height: 0 }}
            className="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4"
          >
            <div className="bg-gradient-to-br from-indigo-500/20 to-indigo-600/20 p-4 rounded-xl border border-indigo-500/30">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-indigo-300">Total Views</p>
                  <p className="text-xl font-bold text-white">{stats.totalViews.toLocaleString()}</p>
                </div>
                <TrendingUp className="text-indigo-400" size={20} />
              </div>
            </div>
            
            <div className="bg-gradient-to-br from-pink-500/20 to-pink-600/20 p-4 rounded-xl border border-pink-500/30">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-pink-300">Total Likes</p>
                  <p className="text-xl font-bold text-white">{stats.totalLikes.toLocaleString()}</p>
                </div>
                <Users className="text-pink-400" size={20} />
              </div>
            </div>
            
            <div className="bg-gradient-to-br from-orange-500/20 to-orange-600/20 p-4 rounded-xl border border-orange-500/30">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-orange-300">Avg Lighthouse</p>
                  <p className="text-xl font-bold text-white">{stats.avgLighthouse}/100</p>
                </div>
                <Activity className="text-orange-400" size={20} />
              </div>
            </div>
          </motion.div>
        )}
      </motion.div>

      {/* Controls */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.1 }}
        className="glass-card p-6 rounded-2xl"
      >
        <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
          {/* Search */}
          <div className="relative">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
            <input
              type="text"
              placeholder="Search projects..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="w-full pl-10 pr-4 py-2 bg-gray-800/50 border border-gray-700 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
          </div>

          {/* Category Filter */}
          <div>
            <select
              value={selectedCategory}
              onChange={(e) => setSelectedCategory(e.target.value)}
              className="w-full px-4 py-2 bg-gray-800/50 border border-gray-700 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
            >
              <option value="">All Categories</option>
              {categories.map(cat => (
                <option key={cat} value={cat}>{cat}</option>
              ))}
            </select>
          </div>

          {/* Sort By */}
          <div>
            <select
              value={sortBy}
              onChange={(e) => setSortBy(e.target.value as 'date' | 'title' | 'difficulty' | 'views')}
              className="w-full px-4 py-2 bg-gray-800/50 border border-gray-700 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
            >
              <option value="date">Sort by Date</option>
              <option value="title">Sort by Title</option>
              <option value="difficulty">Sort by Difficulty</option>
              <option value="views">Sort by Views</option>
            </select>
          </div>

          {/* Sort Order */}
          <div>
            <select
              value={sortOrder}
              onChange={(e) => setSortOrder(e.target.value as 'asc' | 'desc')}
              className="w-full px-4 py-2 bg-gray-800/50 border border-gray-700 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
            >
              <option value="desc">Descending</option>
              <option value="asc">Ascending</option>
            </select>
          </div>
        </div>

        {/* Bulk Actions */}
        {selectedProjects.size > 0 && (
          <motion.div
            initial={{ opacity: 0, y: -10 }}
            animate={{ opacity: 1, y: 0 }}
            className="flex items-center space-x-4 p-4 bg-blue-500/10 border border-blue-500/30 rounded-lg"
          >
            <span className="text-blue-300 font-medium">
              {selectedProjects.size} project(s) selected
            </span>
            <button
              onClick={() => handleBulkPublish(true)}
              className="px-3 py-1 bg-green-600 hover:bg-green-700 text-white rounded text-sm transition-colors"
            >
              Publish All
            </button>
            <button
              onClick={() => handleBulkPublish(false)}
              className="px-3 py-1 bg-yellow-600 hover:bg-yellow-700 text-white rounded text-sm transition-colors"
            >
              Unpublish All
            </button>
            <button
              onClick={handleBulkDelete}
              className="px-3 py-1 bg-red-600 hover:bg-red-700 text-white rounded text-sm transition-colors"
            >
              Delete All
            </button>
            <button
              onClick={() => setSelectedProjects(new Set())}
              className="px-3 py-1 bg-gray-600 hover:bg-gray-700 text-white rounded text-sm transition-colors"
            >
              Clear Selection
            </button>
          </motion.div>
        )}
      </motion.div>

      {/* Projects List */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.2 }}
        className="glass-card p-6 rounded-2xl"
      >
        <div className="flex items-center justify-between mb-6">
          <h3 className="text-xl font-bold text-white">
            Projects ({filteredProjects.length})
          </h3>
          <button
            onClick={onNewProject}
            className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors flex items-center space-x-2"
          >
            <Plus size={20} />
            <span>New Project</span>
          </button>
        </div>

        <div className="space-y-3">
          {filteredProjects.map((project) => (
            <motion.div
              key={project.id}
              layout
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              exit={{ opacity: 0, x: 20 }}
              className={`p-4 rounded-lg cursor-pointer transition-all border ${
                selectedProjects.has(project.id)
                  ? 'bg-blue-600/20 border-blue-500/50'
                  : 'bg-gray-800/30 hover:bg-gray-700/30 border-gray-700/50'
              }`}
            >
              <div className="flex items-center justify-between">
                <div className="flex items-center space-x-4 flex-1">
                  <input
                    type="checkbox"
                    checked={selectedProjects.has(project.id)}
                    onChange={(e) => {
                      const newSelected = new Set(selectedProjects);
                      if (e.target.checked) {
                        newSelected.add(project.id);
                      } else {
                        newSelected.delete(project.id);
                      }
                      setSelectedProjects(newSelected);
                    }}
                    className="w-4 h-4 text-blue-600 bg-gray-800 border-gray-700 rounded focus:ring-blue-500 focus:ring-2"
                  />
                  
                  <div className="flex-1">
                    <div className="flex items-center space-x-3 mb-2">
                      <h4 className="font-medium text-white">{project.title}</h4>
                      <span className={`px-2 py-1 rounded text-xs font-medium ${
                        project.difficulty === 'Beginner' ? 'bg-green-500/20 text-green-400' :
                        project.difficulty === 'Intermediate' ? 'bg-yellow-500/20 text-yellow-400' :
                        project.difficulty === 'Advanced' ? 'bg-orange-500/20 text-orange-400' :
                        'bg-red-500/20 text-red-400'
                      }`}>
                        {project.difficulty}
                      </span>
                      {project.featured && (
                        <span className="px-2 py-1 bg-yellow-500/20 text-yellow-400 rounded text-xs font-medium">
                          Featured
                        </span>
                      )}
                      {project.published ? (
                        <span className="px-2 py-1 bg-green-500/20 text-green-400 rounded text-xs font-medium">
                          Published
                        </span>
                      ) : (
                        <span className="px-2 py-1 bg-gray-500/20 text-gray-400 rounded text-xs font-medium">
                          Draft
                        </span>
                      )}
                    </div>
                    
                    <p className="text-sm text-gray-400 mb-2">{project.description}</p>
                    
                    <div className="flex items-center space-x-4 text-xs text-gray-500">
                      <span className="flex items-center">
                        <Tag className="mr-1" size={14} />
                        {project.category}
                      </span>
                      <span className="flex items-center">
                        <Calendar className="mr-1" size={14} />
                        {new Date(project.createdAt).toLocaleDateString()}
                      </span>
                      <span className="flex items-center">
                        <Eye className="mr-1" size={14} />
                        {project._count?.pageViews || 0} views
                      </span>
                      <span className="flex items-center">
                        <Activity className="mr-1" size={14} />
                        N/A
                      </span>
                    </div>
                  </div>
                </div>
                
                <div className="flex items-center space-x-2">
                  <button
                    onClick={() => onProjectSelect(project)}
                    className="p-2 text-gray-400 hover:text-blue-400 transition-colors"
                    title="Edit Project"
                  >
                    <Edit size={16} />
                  </button>
                  <button
                    onClick={() => window.open(`/projects/${project.id}`, '_blank')}
                    className="p-2 text-gray-400 hover:text-green-400 transition-colors"
                    title="View Project"
                  >
                    <Eye size={16} />
                  </button>
                </div>
              </div>
            </motion.div>
          ))}
        </div>

        {filteredProjects.length === 0 && (
          <div className="text-center py-12 text-gray-500">
            <FolderOpen className="mx-auto mb-4" size={48} />
            <p className="text-lg font-medium">No projects found</p>
            <p className="text-sm">Try adjusting your search or filters</p>
          </div>
        )}
      </motion.div>
    </div>
  );
}