import React, { useState, useEffect } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Users, Calendar, FileText } from 'lucide-react';
import { getAnalytics, AnalyticsData } from '@/services/analyticsService';

export default function DashboardPage() {
  const [analytics, setAnalytics] = useState<AnalyticsData | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchAnalytics = async () => {
      try {
        const data = await getAnalytics();
        setAnalytics(data);
      } catch (err) {
        setError('Nepodařilo se načíst analytická data');
        console.error('Error fetching analytics:', err);
      } finally {
        setLoading(false);
      }
    };

    fetchAnalytics();
  }, []);

  if (loading) return <div>Načítám data...</div>;
  if (error) return <div className="text-red-500">{error}</div>;

  return (
    <div className="container mx-auto px-4 py-8">
      {/* Header removed; Admin layout already provides the main title */}
      
      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3 mb-8">
        <StatsCard 
          title="Uživatelé" 
          value={analytics?.users.total || 0} 
          description={`+${analytics?.users.new_this_week || 0} tento týden`}
          icon={Users}
          color="text-blue-500"
          bgColor="bg-blue-50"
        />
        
        <StatsCard 
          title="Události" 
          value={analytics?.events.total || 0} 
          description={`${analytics?.events.upcoming || 0} nadcházejících`}
          icon={Calendar}
          color="text-green-500"
          bgColor="bg-green-50"
        />
        
        <StatsCard 
          title="Články" 
          value={analytics?.articles.total || 0} 
          description={`${analytics?.articles.published || 0} publikováno`}
          icon={FileText}
          color="text-purple-500"
          bgColor="bg-purple-50"
        />
        
      </div>
      
      {/* Add more dashboard sections here */}
    </div>
  );
}

interface StatsCardProps {
  title: string;
  value: string | number;
  description: string;
  icon: React.ComponentType<{ className?: string }>;
  color: string;
  bgColor: string;
}

function StatsCard({ title, value, description, icon: Icon, color, bgColor }: StatsCardProps) {
  return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between pb-2">
        <CardTitle className="text-sm font-medium text-muted-foreground">
          {title}
        </CardTitle>
        <div className={`p-2 rounded-lg ${bgColor}`}>
          <Icon className={`h-4 w-4 ${color}`} />
        </div>
      </CardHeader>
      <CardContent>
        <div className="text-2xl font-bold">{value}</div>
        <p className="text-xs text-muted-foreground">{description}</p>
      </CardContent>
    </Card>
  );
}
