'use client';

import { useTranslations } from 'next-intl';
import { motion } from 'framer-motion';
import { Users, Building2, Shield, Activity, TrendingUp, TrendingDown } from 'lucide-react';

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';

interface StatCardProps {
  title: string;
  value: string | number;
  description?: string;
  icon: React.ComponentType<{ className?: string }>;
  trend?: 'up' | 'down' | 'neutral';
  delay?: number;
}

function StatCard({ title, value, description, icon: Icon, trend, delay = 0 }: StatCardProps) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.3, delay }}
    >
      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">{title}</CardTitle>
          <Icon className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">{value}</div>
          {description && (
            <p className="text-xs text-muted-foreground flex items-center gap-1">
              {trend === 'up' && <TrendingUp className="h-3 w-3 text-green-500" />}
              {trend === 'down' && <TrendingDown className="h-3 w-3 text-red-500" />}
              {description}
            </p>
          )}
        </CardContent>
      </Card>
    </motion.div>
  );
}

/**
 * Admin Dashboard Content - System overview and statistics
 */
export function AdminDashboardContent() {
  const t = useTranslations('admin');

  // Mock data - would come from API
  const stats = [
    {
      title: 'Benutzer gesamt',
      value: '127',
      description: '+5 in den letzten 30 Tagen',
      icon: Users,
      trend: 'up' as const,
    },
    {
      title: 'Aktive Benutzer',
      value: '98',
      description: '77% aller Benutzer',
      icon: Activity,
      trend: 'neutral' as const,
    },
    {
      title: 'Abteilungen',
      value: '12',
      description: 'In 3 Standorten',
      icon: Building2,
      trend: 'neutral' as const,
    },
    {
      title: 'Administratoren',
      value: '4',
      description: 'Vollzugriff auf das System',
      icon: Shield,
      trend: 'neutral' as const,
    },
  ];

  return (
    <div className="space-y-6">
      {/* Stats Grid */}
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        {stats.map((stat, index) => (
          <StatCard key={stat.title} {...stat} delay={index * 0.1} />
        ))}
      </div>

      {/* Quick Actions and Recent Activity */}
      <div className="grid gap-6 md:grid-cols-2">
        {/* Quick Actions */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.3, delay: 0.4 }}
        >
          <Card>
            <CardHeader>
              <CardTitle>Schnellaktionen</CardTitle>
              <CardDescription>Haeufig verwendete Administrationsaufgaben</CardDescription>
            </CardHeader>
            <CardContent className="space-y-2">
              <QuickActionItem
                icon={Users}
                title="Neuen Benutzer anlegen"
                description="Benutzer aus Keycloak synchronisieren"
              />
              <QuickActionItem
                icon={Building2}
                title="Abteilung erstellen"
                description="Neue Organisationseinheit hinzufuegen"
              />
              <QuickActionItem
                icon={Shield}
                title="Rollen verwalten"
                description="Berechtigungen konfigurieren"
              />
            </CardContent>
          </Card>
        </motion.div>

        {/* Recent Activity */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.3, delay: 0.5 }}
        >
          <Card>
            <CardHeader>
              <CardTitle>Letzte Aktivitaeten</CardTitle>
              <CardDescription>Aktuelle Aenderungen im System</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <ActivityItem
                action="Benutzer erstellt"
                target="max.mustermann@example.com"
                time="vor 2 Stunden"
                actor="admin@example.com"
              />
              <ActivityItem
                action="Rolle zugewiesen"
                target="anna.schmidt@example.com"
                time="vor 5 Stunden"
                actor="admin@example.com"
              />
              <ActivityItem
                action="Abteilung geaendert"
                target="IT-Entwicklung"
                time="Gestern"
                actor="admin@example.com"
              />
              <ActivityItem
                action="Benutzer deaktiviert"
                target="old.user@example.com"
                time="vor 3 Tagen"
                actor="admin@example.com"
              />
            </CardContent>
          </Card>
        </motion.div>
      </div>

      {/* System Status */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.3, delay: 0.6 }}
      >
        <Card>
          <CardHeader>
            <CardTitle>Systemstatus</CardTitle>
            <CardDescription>Uebersicht ueber verbundene Dienste</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="grid gap-4 md:grid-cols-3">
              <SystemStatusItem name="Keycloak" status="online" latency="45ms" />
              <SystemStatusItem name="Datenbank" status="online" latency="12ms" />
              <SystemStatusItem name="API Server" status="online" latency="8ms" />
            </div>
          </CardContent>
        </Card>
      </motion.div>
    </div>
  );
}

function QuickActionItem({
  icon: Icon,
  title,
  description,
}: {
  icon: React.ComponentType<{ className?: string }>;
  title: string;
  description: string;
}) {
  return (
    <button className="flex w-full items-center gap-3 rounded-lg border p-3 text-left transition-colors hover:bg-accent">
      <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
        <Icon className="h-5 w-5 text-primary" />
      </div>
      <div>
        <p className="text-sm font-medium">{title}</p>
        <p className="text-xs text-muted-foreground">{description}</p>
      </div>
    </button>
  );
}

function ActivityItem({
  action,
  target,
  time,
  actor,
}: {
  action: string;
  target: string;
  time: string;
  actor: string;
}) {
  return (
    <div className="flex items-start gap-3">
      <div className="mt-1 h-2 w-2 rounded-full bg-primary" />
      <div className="flex-1 space-y-1">
        <p className="text-sm">
          <span className="font-medium">{action}:</span> {target}
        </p>
        <p className="text-xs text-muted-foreground">
          {time} von {actor}
        </p>
      </div>
    </div>
  );
}

function SystemStatusItem({
  name,
  status,
  latency,
}: {
  name: string;
  status: 'online' | 'offline' | 'degraded';
  latency: string;
}) {
  const statusColors = {
    online: 'bg-green-500',
    offline: 'bg-red-500',
    degraded: 'bg-yellow-500',
  };

  const statusLabels = {
    online: 'Online',
    offline: 'Offline',
    degraded: 'Eingeschraenkt',
  };

  return (
    <div className="flex items-center justify-between rounded-lg border p-3">
      <div className="flex items-center gap-3">
        <div className={`h-2 w-2 rounded-full ${statusColors[status]}`} />
        <span className="font-medium">{name}</span>
      </div>
      <div className="text-right">
        <p className="text-sm">{statusLabels[status]}</p>
        <p className="text-xs text-muted-foreground">{latency}</p>
      </div>
    </div>
  );
}
