import { AppShell, Button, Card } from "@kodeme-io/next-core-ui";
import { Home, Truck, Package, MapPin, Settings } from "lucide-react";

export default function Page() {
  return (
    <AppShell
      navigation={[
        { href: "/", label: "Dashboard", icon: <Home className="h-4 w-4" /> },
        {
          href: "/deliveries",
          label: "Deliveries",
          icon: <Package className="h-4 w-4" />,
        },
        {
          href: "/fleet",
          label: "Fleet",
          icon: <Truck className="h-4 w-4" />,
        },
        {
          href: "/tracking",
          label: "Tracking",
          icon: <MapPin 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">
            Logistics & Fleet Management - Track deliveries, vehicles, and routes
          </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">
                  Active Deliveries
                </h3>
                <Package className="h-4 w-4 text-muted-foreground" />
              </div>
              <div className="mt-2">
                <div className="text-2xl font-bold">156</div>
                <p className="text-xs text-muted-foreground">
                  +8% from yesterday
                </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">
                  Fleet On Route
                </h3>
                <Truck className="h-4 w-4 text-muted-foreground" />
              </div>
              <div className="mt-2">
                <div className="text-2xl font-bold">42</div>
                <p className="text-xs text-muted-foreground">
                  38 active, 4 returning
                </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">
                  Completed Today
                </h3>
                <Package className="h-4 w-4 text-muted-foreground" />
              </div>
              <div className="mt-2">
                <div className="text-2xl font-bold">284</div>
                <p className="text-xs text-muted-foreground">
                  95% on-time delivery
                </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">
                  Total Distance
                </h3>
                <MapPin className="h-4 w-4 text-muted-foreground" />
              </div>
              <div className="mt-2">
                <div className="text-2xl font-bold">2,845 km</div>
                <p className="text-xs text-muted-foreground">
                  Today's total
                </p>
              </div>
            </div>
          </Card>
        </div>
      </div>
    </AppShell>
  );
}