import { AppShell, Button, Card } from "@kodeme-io/next-core-ui";
import { Home, Users, Calendar, BarChart3, Settings } from "lucide-react";

export default function Page() {
  return (
    <AppShell
      navigation={[
        { href: "/", label: "Dashboard", icon: <Home className="h-4 w-4" /> },
        {
          href: "/customers",
          label: "Customers",
          icon: <Users className="h-4 w-4" />,
        },
        {
          href: "/visits",
          label: "Visits",
          icon: <Calendar className="h-4 w-4" />,
        },
        {
          href: "/reports",
          label: "Reports",
          icon: <BarChart3 className="h-4 w-4" />,
        },
        {
          href: "/settings",
          label: "Settings",
          icon: <Settings className="h-4 w-4" />,
        },
      ]}
    >
      <div className="space-y-6">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Dashboard</h1>
          <p className="text-muted-foreground">
            Sales Force Automation - Track customers, visits, and sales
          </p>
        </div>

        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
          <Card>
            <div className="p-6">
              <div className="flex items-center justify-between">
                <h3 className="text-sm font-medium text-muted-foreground">
                  Total Customers
                </h3>
                <Users className="h-4 w-4 text-muted-foreground" />
              </div>
              <div className="mt-2">
                <div className="text-2xl font-bold">1,234</div>
                <p className="text-xs text-muted-foreground">
                  +12% from last month
                </p>
              </div>
            </div>
          </Card>

          <Card>
            <div className="p-6">
              <div className="flex items-center justify-between">
                <h3 className="text-sm font-medium text-muted-foreground">
                  Visits Today
                </h3>
                <Calendar className="h-4 w-4 text-muted-foreground" />
              </div>
              <div className="mt-2">
                <div className="text-2xl font-bold">45</div>
                <p className="text-xs text-muted-foreground">
                  8 completed, 37 pending
                </p>
              </div>
            </div>
          </Card>

          <Card>
            <div className="p-6">
              <div className="flex items-center justify-between">
                <h3 className="text-sm font-medium text-muted-foreground">
                  Sales This Month
                </h3>
                <BarChart3 className="h-4 w-4 text-muted-foreground" />
              </div>
              <div className="mt-2">
                <div className="text-2xl font-bold">$42.5K</div>
                <p className="text-xs text-muted-foreground">
                  +18% from last month
                </p>
              </div>
            </div>
          </Card>

          <Card>
            <div className="p-6">
              <div className="flex items-center justify-between">
                <h3 className="text-sm font-medium text-muted-foreground">
                  Active Salespersons
                </h3>
                <Users className="h-4 w-4 text-muted-foreground" />
              </div>
              <div className="mt-2">
                <div className="text-2xl font-bold">24</div>
                <p className="text-xs text-muted-foreground">
                  22 online, 2 offline
                </p>
              </div>
            </div>
          </Card>
        </div>
      </div>
    </AppShell>
  );
}