"use client";

import type { ParcelAnalysis } from "@/types/site-finder";
import { MarketTrendBlock } from "./MarketTrendBlock";
import { CompetitorTable } from "./CompetitorTable";
import { Pipeline24moBlock } from "./Pipeline24moBlock";
import { SuccessRecommendationBlock } from "./SuccessRecommendationBlock";

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 hasAny =
    hasTrend || hasRecommendation || hasPipeline || data.competitors.length > 0;

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
      {/* D4 (#36) — Pipeline 24mo */}
      {data.pipeline_24mo && <Pipeline24moBlock data={data.pipeline_24mo} />}

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

      {/* Competitors */}
      {data.competitors.length > 0 && (
        <div>
          <div
            style={{
              fontSize: 12,
              fontWeight: 600,
              color: "#6b7280",
              textTransform: "uppercase",
              letterSpacing: "0.05em",
              marginBottom: 12,
            }}
          >
            Конкуренты
          </div>
          <CompetitorTable
            competitors={data.competitors}
            districtName={data.district?.district_name}
          />
        </div>
      )}

      {/* Success recommendation */}
      {hasRecommendation && (
        <div>
          <div
            style={{
              fontSize: 12,
              fontWeight: 600,
              color: "#6b7280",
              textTransform: "uppercase",
              letterSpacing: "0.05em",
              marginBottom: 12,
            }}
          >
            Что хорошо продаётся
          </div>
          <SuccessRecommendationBlock
            recommendation={data.success_recommendation}
          />
        </div>
      )}

      {!hasAny && (
        <div
          style={{
            fontSize: 13,
            color: "#9ca3af",
            padding: "24px 0",
            textAlign: "center",
          }}
        >
          Рыночные данные недоступны
        </div>
      )}
    </div>
  );
}