goodgo-platform/apps/web/app/[locale]/(public)/page.tsx

'use client';

import { BarChart3, Building2, Layers, TrendingUp } from 'lucide-react';
import * as React from 'react';

import { DistrictHeatmap } from '@/components/charts/district-heatmap';
import { PriceAreaChart } from '@/components/charts/price-area-chart';
import { DataTable } from '@/components/design-system/data-table';
import type { DataTableColumn } from '@/components/design-system/data-table';
import { MarketIndex } from '@/components/design-system/market-index';
import { PriceDelta } from '@/components/design-system/price-delta';
import { StatCard } from '@/components/design-system/stat-card';
import { useDistrictStats, useHeatmap } from '@/lib/hooks/use-analytics';
import { listingsApi } from '@/lib/listings-api';

/* ------------------------------------------------------------------ */
/*  Helpers                                                           */
/* ------------------------------------------------------------------ */

function formatTr(value: number): string {
  if (value >= 1_000_000) return `${(value / 1_000_000).toFixed(1)}`;
  return `${Math.round(value / 1000)}k`;
}

/** Generate current period key (YYYY-MM). */
function currentPeriod(): string {
  const now = new Date();
  return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`;
}

/* ------------------------------------------------------------------ */
/*  Types for the district table                                      */
/* ------------------------------------------------------------------ */

interface DistrictRow {
  district: string;
  avgPriceM2: number;
  yoyChange: number | null;
  totalListings: number;
  daysOnMarket: number;
}

/* ------------------------------------------------------------------ */
/*  Page                                                              */
/* ------------------------------------------------------------------ */

export default function MarketDashboardPage() {
  const city = 'Ho Chi Minh';
  const period = currentPeriod();

  /* --- Data hooks --- */
  const { data: districtData, isLoading: districtLoading } = useDistrictStats(city, period);
  const { data: heatmapData, isLoading: heatmapLoading } = useHeatmap(city, period);

  /* --- Listings count (lightweight) --- */
  const [totalListings, setTotalListings] = React.useState<number | null>(null);
  React.useEffect(() => {
    listingsApi
      .search({ limit: 1, status: 'ACTIVE' })
      .then((res) => setTotalListings(res.total ?? res.data.length))
      .catch(() => {});
  }, []);

  /* --- Derived stats --- */
  const districts: DistrictRow[] = React.useMemo(() => {
    if (!districtData?.districts) return [];
    return districtData.districts.map((d) => ({
      district: d.district,
      avgPriceM2: d.avgPriceM2,
      yoyChange: d.yoyChange,
      totalListings: d.totalListings,
      daysOnMarket: d.daysOnMarket,
    }));
  }, [districtData]);

  const avgPriceM2 = React.useMemo(() => {
    if (districts.length === 0) return 0;
    return districts.reduce((s, d) => s + d.avgPriceM2, 0) / districts.length;
  }, [districts]);

  const avgChange7d = React.useMemo(() => {
    const withChange = districts.filter((d) => d.yoyChange != null);
    if (withChange.length === 0) return 0;
    return withChange.reduce((s, d) => s + (d.yoyChange ?? 0), 0) / withChange.length;
  }, [districts]);

  const totalTransactions = React.useMemo(
    () => districts.reduce((s, d) => s + d.totalListings, 0),
    [districts],
  );

  /* --- Synthetic 30d price chart data --- */
  const priceChartData = React.useMemo(() => {
    if (districts.length === 0) return [];
    const base = avgPriceM2;
    return Array.from({ length: 30 }, (_, i) => ({
      period: `D${i + 1}`,
      avgPriceM2: base * (0.97 + Math.random() * 0.06),
    }));
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [districts.length, avgPriceM2]);

  /* --- News feed mock --- */
  const newsFeed = [
    { id: '1', title: 'Quận 7 dẫn đầu tăng trưởng giá tuần qua', time: '2 giờ trước' },
    { id: '2', title: 'Nguồn cung căn hộ HCM tăng 12% so tháng trước', time: '5 giờ trước' },
    { id: '3', title: 'Thủ Đức: Hạ tầng Metro đẩy giá đất lên 8%', time: '1 ngày trước' },
    { id: '4', title: 'Lãi suất cho vay mua nhà giảm còn 7.5%/năm', time: '2 ngày trước' },
  ];

  /* --- Table columns --- */
  const tableColumns: DataTableColumn<DistrictRow>[] = React.useMemo(
    () => [
      {
        id: 'district',
        header: 'Quận',
        cell: (r) => <span className="font-medium text-foreground">{r.district}</span>,
        sortable: true,
        sortValue: (r) => r.district,
      },
      {
        id: 'price',
        header: 'Giá TB/m²',
        cell: (r) => `${formatTr(r.avgPriceM2)} tr`,
        align: 'right' as const,
        numeric: true,
        sortable: true,
        sortValue: (r) => r.avgPriceM2,
      },
      {
        id: 'change',
        header: 'Δ7d',
        cell: (r) =>
          r.yoyChange != null ? (
            <PriceDelta value={r.yoyChange} size="sm" />
          ) : (
            <span className="text-foreground-dim">—</span>
          ),
        align: 'right' as const,
        numeric: true,
        sortable: true,
        sortValue: (r) => r.yoyChange ?? 0,
      },
      {
        id: 'volume',
        header: 'Vol',
        cell: (r) => r.totalListings,
        align: 'right' as const,
        numeric: true,
        sortable: true,
        sortValue: (r) => r.totalListings,
      },
      {
        id: 'dom',
        header: 'DT',
        cell: (r) => `${r.daysOnMarket}d`,
        align: 'right' as const,
        numeric: true,
        sortable: true,
        sortValue: (r) => r.daysOnMarket,
      },
    ],
    [],
  );

  /* --- GGX Market Index --- */
  const ggxValue = avgPriceM2 > 0 ? formatTr(avgPriceM2) : '—';

  return (
    <div className="mx-auto max-w-7xl px-4 py-6 md:py-8">
      {/* 1. Hero: Market Index */}
      <section className="mb-6">
        <MarketIndex
          name="GGX Market"
          value={ggxValue}
          changePercent={avgChange7d}
          window="7d"
          className="mb-1"
        />
        <p className="text-xs text-foreground-dim">
          Chỉ số thị trường BĐS TP. Hồ Chí Minh — cập nhật theo thời gian thực
        </p>
      </section>

      {/* 2. Stat cards strip */}
      <section className="mb-6 grid grid-cols-2 gap-3 md:grid-cols-4">
        <StatCard
          label="Tổng tin"
          value={totalListings ?? '—'}
          icon={<Layers className="h-3.5 w-3.5" />}
          sublabel="đang hoạt động"
        />
        <StatCard
          label="Giao dịch"
          value={totalTransactions || '—'}
          icon={<BarChart3 className="h-3.5 w-3.5" />}
          sublabel="trong kỳ"
        />
        <StatCard
          label="Giá TB"
          value={avgPriceM2 > 0 ? formatTr(avgPriceM2) : '—'}
          unit="tr/m²"
          icon={<Building2 className="h-3.5 w-3.5" />}
          sublabel="toàn thành"
        />
        <StatCard
          label="Biến động"
          value={avgChange7d !== 0 ? `${avgChange7d > 0 ? '+' : ''}${avgChange7d.toFixed(2)}%` : '—'}
          delta={avgChange7d || undefined}
          icon={<TrendingUp className="h-3.5 w-3.5" />}
          sublabel="7 ngày"
        />
      </section>

      {/* 3. Two-column grid: Table + Chart */}
      <section className="mb-6 grid gap-4 lg:grid-cols-2">
        {/* Left: District table */}
        <div>
          <h2 className="mb-2 text-sm font-semibold uppercase tracking-wide text-foreground-muted">
            Top khu vực
          </h2>
          <DataTable
            columns={tableColumns}
            data={districts}
            loading={districtLoading}
            defaultSortId="price"
            defaultSortDir="desc"
            getRowId={(r) => r.district}
            emptyText="Chưa có dữ liệu khu vực"
          />
        </div>

        {/* Right: 30d price area chart */}
        <div>
          <h2 className="mb-2 text-sm font-semibold uppercase tracking-wide text-foreground-muted">
            Biểu đồ giá 30 ngày
          </h2>
          <div className="rounded-md border border-border bg-background-elevated p-3 shadow-elevation-1">
            {priceChartData.length > 0 ? (
              <PriceAreaChart data={priceChartData} height={320} />
            ) : (
              <div className="flex h-[320px] items-center justify-center text-sm text-foreground-muted">
                {districtLoading ? 'Đang tải...' : 'Chưa có dữ liệu'}
              </div>
            )}
          </div>
        </div>
      </section>

      {/* 4. Bottom grid: Heatmap + News feed */}
      <section className="grid gap-4 lg:grid-cols-3">
        {/* Heatmap — takes 2 cols */}
        <div className="lg:col-span-2">
          <h2 className="mb-2 text-sm font-semibold uppercase tracking-wide text-foreground-muted">
            Bản đồ nhiệt giá
          </h2>
          {heatmapLoading ? (
            <div className="flex h-[400px] items-center justify-center rounded-md border border-border bg-background-elevated text-sm text-foreground-muted">
              Đang tải bản đồ...
            </div>
          ) : (
            <DistrictHeatmap
              data={heatmapData?.dataPoints ?? []}
              city={city}
              className="h-[400px]"
            />
          )}
        </div>

        {/* News feed compact */}
        <div>
          <h2 className="mb-2 text-sm font-semibold uppercase tracking-wide text-foreground-muted">
            Tin tức thị trường
          </h2>
          <div className="rounded-md border border-border bg-background-elevated shadow-elevation-1">
            <ul className="divide-y divide-border/60">
              {newsFeed.map((item) => (
                <li key={item.id} className="px-4 py-3">
                  <p className="text-sm font-medium leading-snug text-foreground">
                    {item.title}
                  </p>
                  <p className="mt-1 text-[11px] text-foreground-dim">{item.time}</p>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </section>
    </div>
  );
}