"use client";

import Link from "next/link";
import { ClipboardList, PlusSquare, Send } from "lucide-react";
import { PageHeader, Breadcrumbs } from "@/components/shared/page-header";
import { Button } from "@/components/ui/button";
import { WidgetGrid } from "@/features/dashboard/widget-grid";
import { useCan } from "@/features/auth/use-can";
import { useT } from "@/i18n";

export default function OverviewPage() {
  const t = useT();
  const { can } = useCan();

  const quickActions = [
    can("drivers.review") && {
      href: "/applications",
      label: t("dashboard.reviewApplications"),
      icon: ClipboardList,
    },
    can("orders.assign") && {
      href: "/orders",
      label: t("dashboard.assignOrders"),
      icon: Send,
    },
    can("orders.create") && {
      href: "/orders/new",
      label: t("dashboard.createOrder"),
      icon: PlusSquare,
    },
  ].filter(Boolean) as { href: string; label: string; icon: React.ComponentType<{ className?: string }> }[];

  return (
    <div>
      <PageHeader
        title={t("dashboard.title")}
        subtitle={t("dashboard.subtitle")}
        breadcrumbs={<Breadcrumbs items={[{ label: t("nav.overview") }]} />}
      />

      {quickActions.length > 0 ? (
        <div className="mb-6">
          <h2 className="mb-3 text-sm font-semibold text-foreground">{t("dashboard.quickActions")}</h2>
          <div className="flex flex-wrap gap-2">
            {quickActions.map((action) => {
              const Icon = action.icon;
              return (
                <Link key={action.href} href={action.href}>
                  <Button variant="outline" className="h-10 text-sm">
                    <Icon className="text-primary" aria-hidden />
                    {action.label}
                  </Button>
                </Link>
              );
            })}
          </div>
        </div>
      ) : null}

      <WidgetGrid />
    </div>
  );
}