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

'use client';

import dynamic from 'next/dynamic';
import { useState } from 'react';
import { ComparablesTable } from '@/components/valuation/comparables-table';
import { ExportPdfButton } from '@/components/valuation/export-pdf-button';
import { MarketContextCard } from '@/components/valuation/market-context-card';
import { ValuationForm } from '@/components/valuation/valuation-form';
import { ValuationHistory } from '@/components/valuation/valuation-history';
import { ValuationResults } from '@/components/valuation/valuation-results';
import {
  useValuationPredict,
  useValuationHistory,
  useValuationDetail,
} from '@/lib/hooks/use-valuation';
import type { ValuationRequest, ValuationResult } from '@/lib/valuation-api';

// Lazy-load chart component (uses Recharts, no SSR)
const ValuationHistoryChart = dynamic(
  () =>
    import('@/components/valuation/valuation-history-chart').then(
      (m) => m.ValuationHistoryChart,
    ),
  {
    ssr: false,
    loading: () => (
      <div className="flex h-64 items-center justify-center text-muted-foreground">
        Đang tải...
      </div>
    ),
  },
);

export default function ValuationPage() {
  const [historyPage, setHistoryPage] = useState(1);
  const [selectedId, setSelectedId] = useState<string | null>(null);

  const predictMutation = useValuationPredict();
  const { data: historyData, isLoading: historyLoading } =
    useValuationHistory(historyPage);
  const { data: selectedResult } = useValuationDetail(selectedId ?? '');

  const currentResult: ValuationResult | undefined =
    predictMutation.data ?? selectedResult;

  const handleSubmit = (data: ValuationRequest) => {
    setSelectedId(null);
    predictMutation.mutate(data);
  };

  const handleSelectHistory = (id: string) => {
    setSelectedId(id);
  };

  return (
    <div className="space-y-8">
      {/* Page header */}
      <div className="flex items-start justify-between">
        <div>
          <h1 className="text-2xl font-bold sm:text-3xl">Định giá AI</h1>
          <p className="mt-2 text-muted-foreground">
            Sử dụng AI để ước tính giá trị bất động sản dựa trên dữ liệu thị trường
          </p>
        </div>
        {currentResult && (
          <ExportPdfButton
            targetSelector="#valuation-results"
            filename={`dinh-gia-${currentResult.id}`}
          />
        )}
      </div>

      <div className="grid gap-6 lg:grid-cols-3">
        {/* Form + Results (left 2 cols) */}
        <div className="space-y-6 lg:col-span-2">
          <ValuationForm
            onSubmit={handleSubmit}
            isLoading={predictMutation.isPending}
          />

          {predictMutation.isError && (
            <div className="rounded-lg border border-destructive/50 bg-destructive/10 p-4 text-sm text-destructive">
              Không thể định giá. Vui lòng thử lại sau.
            </div>
          )}

          {currentResult && (
            <>
              {/* Main results with confidence badge + driver charts */}
              <ValuationResults result={currentResult} />

              {/* Comparables table (TanStack Table) */}
              {currentResult.comparables.length > 0 && (
                <ComparablesTable comparables={currentResult.comparables} />
              )}

              {/* Market context card */}
              {currentResult.marketContext && (
                <MarketContextCard context={currentResult.marketContext} />
              )}

              {/* Valuation history chart */}
              {currentResult.valuationHistory &&
                currentResult.valuationHistory.length >= 2 && (
                  <ValuationHistoryChart data={currentResult.valuationHistory} />
                )}
            </>
          )}
        </div>

        {/* History sidebar (right col) */}
        <div>
          <ValuationHistory
            items={historyData?.data ?? []}
            total={historyData?.total ?? 0}
            page={historyPage}
            onPageChange={setHistoryPage}
            onSelect={handleSelectHistory}
            isLoading={historyLoading}
          />
        </div>
      </div>
    </div>
  );
}