'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 { 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';

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 && (
              <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 && (
              <>
                <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>
  );
}