"use client";

import * as React from "react";
import { KPICards } from "@/components/dashboard/kpis";
import { FileTypesChart } from "@/components/dashboard/charts/file-types-chart";
import { ActivityChart } from "@/components/dashboard/charts/activity-chart";
import { TopTags } from "@/components/dashboard/charts/top-tags";
import { VectorPanel } from "@/components/dashboard/vector-panel";
import { useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";

export default function DashboardPage() {
  const router = useRouter();

  function handleDrillSearch(tag: string) {
    // For now, surface a hint; in a future PR we can wire a tag filter to the search API directly from the dashboard
    // Here we just navigate to the home page; the user can use the global search input
    alert(`Search for tag: ${tag}. Use the global search box on the home page.`);
    router.push("/");
  }

  return (
    <div className="h-screen flex flex-col">
      <header className="border-b p-3 flex items-center gap-3">
        <div className="text-lg font-semibold">Dashboard</div>
        <div className="ml-auto">
          <Button variant="outline" onClick={() => router.push("/")}>Open Explorer</Button>
        </div>
      </header>

      <main className="p-3 flex-1 overflow-auto">
        <div className="space-y-3">
          {/* KPIs */}
          <KPICards />

          {/* Charts row */}
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
            <FileTypesChart />
            <ActivityChart />
          </div>

          {/* Tags + Vector Panel */}
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
            <TopTags onDrillSearch={handleDrillSearch} />
            <VectorPanel />
          </div>
        </div>
      </main>
    </div>
  );
}