import Link from 'next/link';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@the-order/ui';

export default function Home(): JSX.Element {
  return (
    <div className="min-h-screen bg-gray-50">
      <div className="container mx-auto px-4 py-16">
        <div className="mb-8">
          <h1 className="text-4xl font-bold text-gray-900 mb-2">Admin Dashboard</h1>
          <p className="text-gray-600">Internal operations and management portal for The Order</p>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          <Card>
            <CardHeader>
              <CardTitle>Application Review</CardTitle>
              <CardDescription>Review and adjudicate eResidency applications</CardDescription>
            </CardHeader>
            <CardContent>
              <Link href="/review" className="text-primary hover:underline font-medium">
                Review Applications →
              </Link>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>Credential Management</CardTitle>
              <CardDescription>Manage verifiable credentials and issuance</CardDescription>
            </CardHeader>
            <CardContent>
              <Link href="/credentials" className="text-primary hover:underline font-medium">
                Manage Credentials →
              </Link>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>Metrics & Analytics</CardTitle>
              <CardDescription>View metrics and analytics dashboard</CardDescription>
            </CardHeader>
            <CardContent>
              <Link href="/metrics" className="text-primary hover:underline font-medium">
                View Metrics →
              </Link>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>Audit Logs</CardTitle>
              <CardDescription>View and search audit logs</CardDescription>
            </CardHeader>
            <CardContent>
              <Link href="/audit" className="text-primary hover:underline font-medium">
                View Logs →
              </Link>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>User Management</CardTitle>
              <CardDescription>Manage users and permissions</CardDescription>
            </CardHeader>
            <CardContent>
              <Link href="/users" className="text-primary hover:underline font-medium">
                Manage Users →
              </Link>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>System Settings</CardTitle>
              <CardDescription>Configure system settings and preferences</CardDescription>
            </CardHeader>
            <CardContent>
              <Link href="/settings" className="text-primary hover:underline font-medium">
                Settings →
              </Link>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  );
}
