import { redirect } from "next/navigation";

import { getActiveContext } from "@/lib/appwrite/active-context";
import { getDashboardData } from "@/lib/appwrite/dashboard-queries";

import { CustomerGrowth } from "./components/customer-growth";
import { IncomeChart } from "./components/income-chart";
import { Metrics } from "./components/metrics";
import { QuickActions } from "./components/quick-actions";
import { RecentTransactions } from "./components/recent-transactions";
import { TopCustomers } from "./components/top-customers";

export default async function DashboardPage() {
  const ctx = await getActiveContext();
  if (!ctx) redirect("/onboarding");

  const data = await getDashboardData(ctx.tenantId, ctx.user.id);

  const firstName = ctx.user.name?.split(" ")[0] ?? "";
  const companyName = ctx.settings?.companyName ?? "Çalışma alanı";

  return (
    <div className="flex-1 space-y-6 px-6 pt-0">
      <div className="flex flex-col justify-between gap-4 md:flex-row md:items-center md:gap-6">
        <div className="flex flex-col gap-1">
          <p className="text-muted-foreground text-sm">{companyName}</p>
          <h1 className="text-2xl font-bold tracking-tight">
            {firstName ? `Hoş geldiniz, ${firstName}` : "Genel bakış"}
          </h1>
          <p className="text-muted-foreground text-sm">
            İşletmenizin temel metriklerini ve son hareketleri buradan takip edin.
          </p>
        </div>
        <QuickActions />
      </div>

      <div className="@container/main space-y-6">
        <Metrics data={data.metrics} />

        <div className="grid grid-cols-1 gap-6 @5xl:grid-cols-2">
          <IncomeChart data={data.monthlyIncome} />
          <TopCustomers data={data.topCustomers} />
        </div>

        <div className="grid grid-cols-1 gap-6 @5xl:grid-cols-2">
          <RecentTransactions data={data.recentTransactions} />
          <CustomerGrowth data={data.newCustomersMonthly} />
        </div>
      </div>
    </div>
  );
}