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

'use client';

import dynamic from 'next/dynamic';
import { useState } from 'react';
import { Badge } from '@/components/ui/badge';
import { ComparablesMap } from '@/components/valuation/comparables-map';
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 { ValueDriversChart } from '@/components/valuation/value-drivers-chart';
import { ApiError } from '@/lib/api-client';
import { useAvmV2Flag } from '@/lib/hooks/use-avm-v2-flag';
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.',
  };
}

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>
    ),
  },
);

type ViewMode = 'single' | 'compare';

export default function ValuationPage() {
  const avmV2 = useAvmV2Flag();
  const [historyPage, setHistoryPage] = useState(1);
  const [selectedId, setSelectedId] = useState<string | null>(null);
  const [viewMode, setViewMode] = useState<ViewMode>('single');

  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">
      <div className="flex items-start justify-between">
        <div>
          <div className="flex items-center gap-2">
            <h1 className="text-2xl font-bold sm:text-3xl">Định giá AI</h1>
            {avmV2 && (
              <Badge variant="success" className="text-xs" data-testid="avm-v2-badge">
                AVM v2
              </Badge>
            )}
          </div>
          <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 && viewMode === 'single' && (
          <ExportPdfButton
            targetSelector="#valuation-results"
            filename={`dinh-gia-${currentResult.id}`}
          />
        )}
      </div>

      {avmV2 && (
        <div
          className="inline-flex rounded-lg border bg-muted/40 p-1"
          role="tablist"
          aria-label="Chế độ định giá"
        >
          <button
            type="button"
            role="tab"
            aria-selected={viewMode === 'single'}
            data-testid="avm-v2-tab-single"
            className={`rounded-md px-4 py-1.5 text-sm font-medium transition ${
              viewMode === 'single'
                ? 'bg-background shadow-sm'
                : 'text-muted-foreground hover:text-foreground'
            }`}
            onClick={() => setViewMode('single')}
          >
            Định giá đơn
          </button>
          <button
            type="button"
            role="tab"
            aria-selected={viewMode === 'compare'}
            data-testid="avm-v2-tab-compare"
            className={`rounded-md px-4 py-1.5 text-sm font-medium transition ${
              viewMode === 'compare'
                ? 'bg-background shadow-sm'
                : 'text-muted-foreground hover:text-foreground'
            }`}
            onClick={() => setViewMode('compare')}
          >
            So sánh nhiều BĐS
          </button>
        </div>
      )}

      {viewMode === 'compare' && avmV2 ? (
        <ValuationCompare />
      ) : (
        <div className="grid gap-6 lg:grid-cols-3">
          <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 && (
              <>
                <ValuationResults result={currentResult} />

                {avmV2 && currentResult.priceDrivers.length > 0 && (
                  <ValueDriversChart drivers={currentResult.priceDrivers} />
                )}

                {currentResult.comparables.length > 0 && (
                  <ComparablesTable comparables={currentResult.comparables} />
                )}

                {avmV2 && currentResult.comparables.length > 0 && (
                  <ComparablesMap
                    comparables={currentResult.comparables}
                  />
                )}

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

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

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