import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { FileText, CheckSquare, Calendar, AlertTriangle, Activity } from "lucide-react";
import { useNavigate } from "react-router-dom";

const stats = [
  { label: "Documents", value: "0", icon: FileText, color: "text-primary", href: "/client/documents" },
  { label: "Open Tasks", value: "0", icon: CheckSquare, color: "text-success", href: "/client/tasks" },
  { label: "Open Violations", value: "0", icon: AlertTriangle, color: "text-destructive", href: "/client/violations" },
  { label: "Pending Requests", value: "0", icon: Calendar, color: "text-warning", href: "/client/homeowner-requests" },
];

export default function ClientHomePage() {
  const navigate = useNavigate();

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold text-foreground">Welcome Back</h1>
        <p className="text-muted-foreground mt-1">Your association management overview.</p>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        {stats.map((stat) => (
          <Card
            key={stat.label}
            className="cursor-pointer hover:shadow-md transition-shadow"
            onClick={() => navigate(stat.href)}
          >
            <CardContent className="flex items-center gap-4">
              <div className={`p-3 rounded-lg bg-muted ${stat.color}`}>
                <stat.icon className="h-6 w-6" />
              </div>
              <div>
                <p className="text-sm text-muted-foreground">{stat.label}</p>
                <p className="text-2xl font-bold text-foreground">{stat.value}</p>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Activity className="h-5 w-5 text-muted-foreground" />
            Recent Activity
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="text-center py-8 text-muted-foreground">
            <p>No recent activity to display.</p>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
