import { Link } from "react-router-dom";
import { Card, CardContent, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { useAuth } from "@/context/AuthContext";

const AdminDashboard = () => {
  const { isAuthenticated, username, isAdmin, logout } = useAuth();

  const defaultImage = "/images/tgl-ball.png";

  return (
    <div className="max-w-6xl mx-auto py-12 px-4">
      <div className="flex justify-between items-center mb-8">
        <h1 className="text-3xl font-bold text-frog-600">Willkommen, {username}!</h1>
        <Button
          onClick={logout}
          className="bg-frog-500 hover:bg-frog-600 text-white"
        >
          Logout
        </Button>
      </div>

      <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
        <Link to="/admin/news">
          <Card className="hover:shadow-lg transition-shadow cursor-pointer">
            <CardContent className="p-6 text-center">
              <CardTitle className="text-frog-600">News verwalten</CardTitle>
              <p className="text-gray-600 mt-2 text-sm">News erstellen, bearbeiten und löschen</p>
            </CardContent>
          </Card>
        </Link>

        {isAdmin && (
          <Link to="/admin/users">
            <Card className="hover:shadow-lg transition-shadow cursor-pointer">
              <CardContent className="p-6 text-center">
                <CardTitle className="text-frog-600">Benutzer verwalten</CardTitle>
                <p className="text-gray-600 mt-2 text-sm">Admins und Benutzer verwalten</p>
              </CardContent>
            </Card>
          </Link>
        )}

        <Link to="/admin/teams">
          <Card className="hover:shadow-lg transition-shadow cursor-pointer">
            <CardContent className="p-6 text-center">
              <CardTitle className="text-frog-600">Teams verwalten</CardTitle>
              <p className="text-gray-600 mt-2 text-sm">Teams und Spieler pflegen</p>
            </CardContent>
          </Card>
        </Link>

        <Link to="/admin/players">
          <Card className="hover:shadow-lg transition-shadow cursor-pointer">
            <CardContent className="p-6 text-center">
              <CardTitle className="text-frog-600">Spieler verwalten</CardTitle>
              <p className="text-gray-600 mt-2 text-sm">Alle Spieler sehen und bearbeiten</p>
            </CardContent>
          </Card>
        </Link>

        <Link to="/admin/events">
          <Card className="hover:shadow-lg transition-shadow cursor-pointer">
            <CardContent className="p-6 text-center">
              <CardTitle className="text-frog-600">Events verwalten</CardTitle>
              <p className="text-gray-600 mt-2 text-sm">Alle Events sehen und bearbeiten</p>
            </CardContent>
          </Card>
        </Link>

        <Link to="/admin/gallery">
          <Card className="hover:shadow-lg transition-shadow cursor-pointer">
            <CardContent className="p-6 text-center">
              <CardTitle className="text-frog-600">Galerie verwalten</CardTitle>
              <p className="text-gray-600 mt-2 text-sm">Bilder hochladen & löschen</p>
            </CardContent>
          </Card>
        </Link>
      </div>
    </div>
  );
};

export default AdminDashboard;
