"use client";

import type { ParcelAnalysis } from "@/types/site-finder";
import { SectionLabel } from "@/components/ui/SectionLabel";
import { EmptyState } from "@/components/ui/EmptyState";
import { MarketTrendBlock } from "./MarketTrendBlock";
import { BestLayoutsBlock } from "./BestLayoutsBlock";
import { CompetitorTable } from "./CompetitorTable";
import { Pipeline24moBlock } from "./Pipeline24moBlock";
import { SuccessRecommendationBlock } from "./SuccessRecommendationBlock";
import { VelocityBlock } from "./VelocityBlock";

interface Props {
  data: ParcelAnalysis;
}

export function MarketTab({ data }: Props) {
  const hasTrend = "market_trend" in data;
  const hasRecommendation = "success_recommendation" in data;
  const hasPipeline = data.pipeline_24mo !== undefined;
  const hasVelocity = "velocity" in data;
  const hasAny =
    hasTrend ||
    hasRecommendation ||
    hasPipeline ||
    hasVelocity ||
    data.competitors.length > 0;

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
      {/* Competitors */}
      {data.competitors.length > 0 && (
        <div>
          <SectionLabel style={{ marginBottom: 12 }}>Конкуренты</SectionLabel>
          <CompetitorTable
            competitors={data.competitors}
            districtName={data.district?.district_name}
          />
        </div>
      )}

      {/* Issue #113 — data-driven ТЗ на проектирование */}
      <BestLayoutsBlock cadNum={data.cad_num} />

      {/* D2 (#34) — Velocity-score */}
      {hasVelocity && (
        <div
          style={{
            border: "1px solid #e5e7eb",
            borderRadius: 10,
            padding: "14px 18px",
            background: "#fff",
          }}
        >
          <VelocityBlock velocity={data.velocity} />
        </div>
      )}

      {/* Market trend */}
      {hasTrend && (
        <div
          style={{
            border: "1px solid #e5e7eb",
            borderRadius: 10,
            padding: "14px 18px",
            background: "#fff",
          }}
        >
          <MarketTrendBlock trend={data.market_trend} />
        </div>
      )}

      {/* D4 (#36) — Pipeline 24mo */}
      {data.pipeline_24mo && <Pipeline24moBlock data={data.pipeline_24mo} />}

      {/* Success recommendation */}
      {hasRecommendation && (
        <div>
          <SectionLabel style={{ marginBottom: 12 }}>
            Что хорошо продаётся
          </SectionLabel>
          <SuccessRecommendationBlock
            recommendation={data.success_recommendation}
          />
        </div>
      )}

      {!hasAny && <EmptyState message="Рыночные данные недоступны" />}
    </div>
  );
}