'use client';

import { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import { 
  BarChart3, 
  TrendingUp, 
  Eye, 
  Heart, 
  Zap, 
  Users, 
  Clock,
  Globe,
  Activity,
  Target,
  Award
} from 'lucide-react';

interface AnalyticsData {
  overview: {
    totalProjects: number;
    publishedProjects: number;
    featuredProjects: number;
    totalViews: number;
    totalLikes: number;
    totalShares: number;
    avgLighthouse: number;
  };
  projects: Array<{
    id: number;
    title: string;
    category: string;
    difficulty: string;
    views: number;
    likes: number;
    shares: number;
    lighthouse: number;
    published: boolean;
    featured: boolean;
    createdAt: string;
    updatedAt: string;
  }>;
  categories: Record<string, number>;
  difficulties: Record<string, number>;
  performance: {
    avgLighthouse: number;
    totalViews: number;
    totalLikes: number;
    totalShares: number;
  };
}

interface PerformanceData {
  pageViews: {
    total: number;
    last24h: number;
    last7d: number;
    last30d: number;
  };
  interactions: {
    total: number;
    last24h: number;
    last7d: number;
    last30d: number;
  };
  topPages: Record<string, number>;
  topInteractions: Record<string, number>;
}

export function AnalyticsDashboard() {
  const [analyticsData, setAnalyticsData] = useState<AnalyticsData | null>(null);
  const [performanceData, setPerformanceData] = useState<PerformanceData | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

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

  const fetchAnalyticsData = async () => {
    try {
      setLoading(true);
      
      // Get basic auth from environment or use default
      const auth = btoa('admin:change_this_password_123');
      
      const [analyticsRes, performanceRes] = await Promise.all([
        fetch('/api/analytics/dashboard', {
          headers: { 'Authorization': `Basic ${auth}` }
        }),
        fetch('/api/analytics/performance', {
          headers: { 'Authorization': `Basic ${auth}` }
        })
      ]);

      if (!analyticsRes.ok || !performanceRes.ok) {
        throw new Error('Failed to fetch analytics data');
      }

      const [analytics, performance] = await Promise.all([
        analyticsRes.json(),
        performanceRes.json()
      ]);

      setAnalyticsData(analytics);
      setPerformanceData(performance);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Unknown error');
    } finally {
      setLoading(false);
    }
  };

  if (loading) {
    return (
      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
        <div className="animate-pulse">
          <div className="h-6 bg-gray-300 dark:bg-gray-700 rounded w-1/4 mb-4"></div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            {[...Array(4)].map((_, i) => (
              <div key={i} className="h-24 bg-gray-300 dark:bg-gray-700 rounded"></div>
            ))}
          </div>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
        <div className="text-center text-red-500">
          <p>Error loading analytics: {error}</p>
          <button 
            onClick={fetchAnalyticsData}
            className="mt-2 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
          >
            Retry
          </button>
        </div>
      </div>
    );
  }

  if (!analyticsData || !performanceData) return null;

  const StatCard = ({ title, value, icon: Icon, color, trend }: {
    title: string;
    value: number | string;
    icon: React.ComponentType<{ className?: string }>;
    color: string;
    trend?: string;
  }) => (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      className="bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-700 dark:to-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-600"
    >
      <div className="flex items-center justify-between">
        <div>
          <p className="text-sm font-medium text-gray-600 dark:text-gray-400">{title}</p>
          <p className="text-2xl font-bold text-gray-900 dark:text-white">{value}</p>
          {trend && (
            <p className="text-xs text-green-600 dark:text-green-400 flex items-center mt-1">
              <TrendingUp className="w-3 h-3 mr-1" />
              {trend}
            </p>
          )}
        </div>
        <div className={`p-3 rounded-lg ${color}`}>
          <Icon className="w-6 h-6 text-white" />
        </div>
      </div>
    </motion.div>
  );

  const getDifficultyColor = (difficulty: string) => {
    switch (difficulty) {
      case 'Beginner': return 'bg-green-500';
      case 'Intermediate': return 'bg-yellow-500';
      case 'Advanced': return 'bg-orange-500';
      case 'Expert': return 'bg-red-500';
      default: return 'bg-gray-500';
    }
  };

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
        <div className="flex items-center justify-between">
          <div>
            <h2 className="text-2xl font-bold text-gray-900 dark:text-white flex items-center">
              <BarChart3 className="w-6 h-6 mr-2 text-blue-600" />
              Analytics Dashboard
            </h2>
            <p className="text-gray-600 dark:text-gray-400 mt-1">
              Übersicht über deine Portfolio-Performance
            </p>
          </div>
          <button
            onClick={fetchAnalyticsData}
            className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
          >
            Refresh
          </button>
        </div>
      </div>

      {/* Overview Stats */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <StatCard
          title="Total Projects"
          value={analyticsData.overview.totalProjects}
          icon={Target}
          color="bg-blue-500"
        />
        <StatCard
          title="Total Views"
          value={analyticsData.overview.totalViews.toLocaleString()}
          icon={Eye}
          color="bg-green-500"
        />
        <StatCard
          title="Total Likes"
          value={analyticsData.overview.totalLikes.toLocaleString()}
          icon={Heart}
          color="bg-red-500"
        />
        <StatCard
          title="Avg Lighthouse"
          value={analyticsData.overview.avgLighthouse}
          icon={Zap}
          color="bg-yellow-500"
        />
      </div>

      {/* Performance Stats */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <StatCard
          title="Views (24h)"
          value={performanceData.pageViews.last24h}
          icon={Activity}
          color="bg-purple-500"
        />
        <StatCard
          title="Views (7d)"
          value={performanceData.pageViews.last7d}
          icon={Clock}
          color="bg-indigo-500"
        />
        <StatCard
          title="Interactions (24h)"
          value={performanceData.interactions.last24h}
          icon={Users}
          color="bg-pink-500"
        />
        <StatCard
          title="Interactions (7d)"
          value={performanceData.interactions.last7d}
          icon={Globe}
          color="bg-teal-500"
        />
      </div>

      {/* Projects Performance */}
      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
        <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
          <Award className="w-5 h-5 mr-2 text-yellow-500" />
          Top Performing Projects
        </h3>
        <div className="space-y-4">
          {analyticsData.projects
            .sort((a, b) => b.views - a.views)
            .slice(0, 5)
            .map((project, index) => (
              <motion.div
                key={project.id}
                initial={{ opacity: 0, x: -20 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ delay: index * 0.1 }}
                className="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700 rounded-lg"
              >
                <div className="flex items-center space-x-4">
                  <div className="w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold">
                    {index + 1}
                  </div>
                  <div>
                    <h4 className="font-medium text-gray-900 dark:text-white">{project.title}</h4>
                    <div className="flex items-center space-x-2 text-sm text-gray-600 dark:text-gray-400">
                      <span className={`px-2 py-1 rounded text-xs text-white ${getDifficultyColor(project.difficulty)}`}>
                        {project.difficulty}
                      </span>
                      <span>{project.category}</span>
                    </div>
                  </div>
                </div>
                <div className="flex items-center space-x-6 text-sm">
                  <div className="text-center">
                    <p className="font-medium text-gray-900 dark:text-white">{project.views}</p>
                    <p className="text-gray-600 dark:text-gray-400">Views</p>
                  </div>
                  <div className="text-center">
                    <p className="font-medium text-gray-900 dark:text-white">{project.likes}</p>
                    <p className="text-gray-600 dark:text-gray-400">Likes</p>
                  </div>
                  <div className="text-center">
                    <p className="font-medium text-gray-900 dark:text-white">{project.lighthouse}</p>
                    <p className="text-gray-600 dark:text-gray-400">Lighthouse</p>
                  </div>
                </div>
              </motion.div>
            ))}
        </div>
      </div>

      {/* Categories & Difficulties */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
          <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
            Projects by Category
          </h3>
          <div className="space-y-3">
            {Object.entries(analyticsData.categories)
              .sort(([,a], [,b]) => b - a)
              .map(([category, count]) => (
                <div key={category} className="flex items-center justify-between">
                  <span className="text-gray-700 dark:text-gray-300">{category}</span>
                  <div className="flex items-center space-x-2">
                    <div className="w-20 bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                      <div 
                        className="bg-blue-600 h-2 rounded-full" 
                        style={{ width: `${(count / analyticsData.overview.totalProjects) * 100}%` }}
                      ></div>
                    </div>
                    <span className="text-sm font-medium text-gray-900 dark:text-white w-8 text-right">
                      {count}
                    </span>
                  </div>
                </div>
              ))}
          </div>
        </div>

        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
          <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
            Projects by Difficulty
          </h3>
          <div className="space-y-3">
            {Object.entries(analyticsData.difficulties)
              .sort(([,a], [,b]) => b - a)
              .map(([difficulty, count]) => (
                <div key={difficulty} className="flex items-center justify-between">
                  <span className="text-gray-700 dark:text-gray-300">{difficulty}</span>
                  <div className="flex items-center space-x-2">
                    <div className="w-20 bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                      <div 
                        className={`h-2 rounded-full ${getDifficultyColor(difficulty)}`}
                        style={{ width: `${(count / analyticsData.overview.totalProjects) * 100}%` }}
                      ></div>
                    </div>
                    <span className="text-sm font-medium text-gray-900 dark:text-white w-8 text-right">
                      {count}
                    </span>
                  </div>
                </div>
              ))}
          </div>
        </div>
      </div>
    </div>
  );
}

export default AnalyticsDashboard;