export const dynamic = "force-dynamic";

import { redirect } from "next/navigation";
import Link from "next/link";
import { Buildings, UserPlus, GitMerge, Plus } from '@/lib/icons';

import { getActiveContext } from "@/lib/appwrite/active-context";
import { getDashboardStats } from "@/lib/appwrite/dashboard-queries";
import { Button } from "@/components/ui/button";
import { SectionCards } from "./components/section-cards";
import { ChartAreaInteractive } from "./components/chart-area-interactive";
import { RecentActivities } from "./components/recent-activities";
import { RecentProperties } from "./components/recent-properties";
import { FollowUpWidget } from "./components/follow-up-widget";

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

  const stats = await getDashboardStats(ctx.tenantId);

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

  return (
    // overflow-x-hidden: Recharts SVG ve diğer absolute-positioned elementlerin
    // yatay taşmasını keser; tooltip'ler kart içinde render olduğu için etkilenmez.
    <div className="flex-1 space-y-4 px-4 sm:px-6 pt-4 overflow-x-hidden">

      {/* Başlık */}
      <div className="flex items-center justify-between gap-3">
        <div className="min-w-0">
          <p className="text-xs text-muted-foreground truncate">{officeName}</p>
          <h1 className="text-lg font-semibold tracking-tight truncate">
            {firstName ? `Hoş geldiniz, ${firstName}` : "Genel Bakış"}
          </h1>
        </div>
        <div className="flex gap-1.5 shrink-0">
          <Button asChild size="sm" variant="outline" className="px-2 sm:px-3">
            <Link href="/properties">
              <Buildings className="size-3.5" />
              <span className="hidden sm:inline">Yeni İlan</span>
            </Link>
          </Button>
          <Button asChild size="sm" variant="outline" className="px-2 sm:px-3">
            <Link href="/customers">
              <UserPlus className="size-3.5" />
              <span className="hidden sm:inline">Müşteri</span>
            </Link>
          </Button>
          <Button asChild size="sm" variant="outline" className="px-2 sm:px-3">
            <Link href="/presentations">
              <Plus className="size-3.5" />
              <span className="hidden sm:inline">Sunum</span>
            </Link>
          </Button>
          <Button asChild size="sm" variant="outline" className="px-2 sm:px-3">
            <Link href="/customers/matches">
              <GitMerge className="size-3.5" />
              <span className="hidden sm:inline">Eşleşmeler</span>
            </Link>
          </Button>
        </div>
      </div>

      {/* İstatistik şeridi */}
      <div data-tour="dashboard-stats">
        <SectionCards stats={stats} />
      </div>

      {/* Grafik + Son Aktiviteler
          Mobil: tek kolon, alt alta.
          Desktop (lg): 3+2 kolon, eşit yükseklik (items-stretch). */}
      <div className="grid gap-4 lg:grid-cols-5 lg:items-stretch">
        <div className="min-w-0 lg:col-span-3">
          <ChartAreaInteractive
            ilanTrend={stats.aylikTrend}
            musteriTrend={stats.aylikMusteriTrend}
            aktiviteTrend={stats.aylikAktiviteTrend}
            portfoyDagilim={stats.portfoyDagilim}
          />
        </div>
        <div data-tour="dashboard-activity" className="min-w-0 lg:col-span-2">
          <RecentActivities activities={stats.sonAktiviteler} />
        </div>
      </div>

      {/* Son İlanlar + Bugünkü Takipler */}
      <div className="grid gap-4 lg:grid-cols-5 lg:items-stretch">
        <div className="min-w-0 lg:col-span-3">
          <RecentProperties properties={stats.sonIlanlar} />
        </div>
        <div data-tour="dashboard-matches" className="min-w-0 lg:col-span-2">
          <FollowUpWidget customers={stats.takipMusteri} />
        </div>
      </div>

    </div>
  );
}
