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 { ValuationCompare } from '@/components/valuation/valuation-compare';
import { ValuationForm } from '@/components/valuation/valuation-form';
import { ValuationHistory } from '@/components/valuation/valuation-history';
import { ValuationResults } from '@/components/valuation/valuation-results';
import { ApiError } from '@/lib/api-client';
import {
  useValuationPredict,
  useValuationHistory,
  useValuationDetail,
} from '@/lib/hooks/use-valuation';
import type { ValuationRequest, ValuationResult } from '@/lib/valuation-api';

function getValuationErrorMessage(error: unknown): { title: string; detail: string } {
  if (error instanceof ApiError) {
    if (error.status === 429) {
      return {
        title: 'Quá nhiều yêu cầu',
        detail: 'Bạn đã gửi quá nhiều yêu cầu định giá. Vui lòng đợi một lát rồi thử lại.',
      };
    }
    if (error.status === 402 || /quota|subscription/i.test(error.message)) {
      return {
        title: 'Đã hết hạn mức',
        detail:
          'Gói đăng ký hiện tại đã hết lượt định giá AI. Hãy nâng cấp hoặc thử lại vào chu kỳ sau.',
      };
    }
    if (error.status === 503 || /model|unavailable/i.test(error.message)) {
      return {
        title: 'Dịch vụ AI tạm thời không khả dụng',
        detail: 'Mô hình định giá đang bận hoặc bảo trì. Vui lòng thử lại sau vài phút.',
      };
    }
    return {
      title: 'Không thể định giá',
      detail: error.message || 'Đã xảy ra lỗi không xác định. Vui lòng thử lại sau.',
    };
  }
  return {
    title: 'Không thể định giá',
    detail: 'Vui lòng kiểm tra kết nối mạng và thử lại.',
  };
}

// Lazy-load chart components (uses Recharts, no SSR)
const chartLoading = () => (
  <div className="flex h-64 items-center justify-center text-muted-foreground">
    Đang tải...
  </div>
);

const ValuationHistoryChart = dynamic(
  () =>
    import('@/components/valuation/valuation-history-chart').then(
      (m) => m.ValuationHistoryChart,
    ),
  { ssr: false, loading: chartLoading },
);

const ValueDriversChart = dynamic(
  () =>
    import('@/components/valuation/value-drivers-chart').then(
      (m) => m.ValueDriversChart,
    ),
  { ssr: false, loading: chartLoading },
);

type TabKey = 'single' | 'compare';

export default function ValuationPage() {
  const [activeTab, setActiveTab] = useState<TabKey>('single');
  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) => {
    setActiveTab('single');
    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>
        {activeTab === 'single' && currentResult && (
          <ExportPdfButton
            targetSelector="#valuation-results"
            filename={`dinh-gia-${currentResult.id}`}
          />
        )}
      </div>

      {/* Tab switcher */}
      <div className="flex gap-1 rounded-lg border bg-muted p-1">
        <button
          type="button"
          className={`flex-1 rounded-md px-4 py-2 text-sm font-medium transition-colors ${
            activeTab === 'single'
              ? 'bg-background text-foreground shadow-sm'
              : 'text-muted-foreground hover:text-foreground'
          }`}
          onClick={() => setActiveTab('single')}
        >
          Định giá đơn
        </button>
        <button
          type="button"
          className={`flex-1 rounded-md px-4 py-2 text-sm font-medium transition-colors ${
            activeTab === 'compare'
              ? 'bg-background text-foreground shadow-sm'
              : 'text-muted-foreground hover:text-foreground'
          }`}
          onClick={() => setActiveTab('compare')}
        >
          So sánh (2-5 BĐS)
        </button>
      </div>

      {activeTab === 'single' ? (
        <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 && (() => {
              const { title, detail } = getValuationErrorMessage(predictMutation.error);
              return (
                <div
                  role="alert"
                  data-testid="valuation-error"
                  className="rounded-lg border border-destructive/50 bg-destructive/10 p-4 text-sm text-destructive"
                >
                  <p className="font-semibold">{title}</p>
                  <p className="mt-1 text-destructive/90">{detail}</p>
                </div>
              );
            })()}

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

                {/* Value drivers waterfall chart */}
                {currentResult.priceDrivers.length > 0 && (
                  <ValueDriversChart drivers={currentResult.priceDrivers} />
                )}

                {/* 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>
      ) : (
        <ValuationCompare />
      )}
    </div>
  );
}