"use client";

import Link from "next/link";

import type { RecommendComparable } from "@/types/analytics";

export function RecommendComparables({
  items,
}: {
  items: RecommendComparable[];
}) {
  if (items.length === 0) {
    return (
      <p style={{ color: "#9ca3af", fontSize: 13 }}>
        Нет comparable ЖК с такими фильтрами.
      </p>
    );
  }
  return (
    <div
      style={{
        display: "grid",
        gridTemplateColumns: "repeat(auto-fill, minmax(260px, 1fr))",
        gap: 12,
      }}
    >
      {items.map((c) => {
        const sold = c.sold_perc;
        const soldColor =
          sold == null
            ? "#9ca3af"
            : sold >= 50
              ? "#0a7a3a"
              : sold >= 30
                ? "#9a6700"
                : "#b3261e";

        const hasCadQuarter = c.cad_quarter != null;
        const hasBuildings = c.buildings_n != null && c.buildings_n > 0;
        const showMeta = hasCadQuarter || hasBuildings;

        const metaParts: string[] = [];
        if (hasCadQuarter) metaParts.push(`кв. ${c.cad_quarter}`);
        if (hasBuildings) metaParts.push(`${c.buildings_n} корп.`);

        const hasMapLink = c.lat != null && c.lon != null;
        const mapUrl = hasMapLink
          ? `https://yandex.ru/maps/?ll=${c.lon}%2C${c.lat}&z=16&pt=${c.lon}%2C${c.lat}`
          : null;

        return (
          <Link
            key={c.obj_id}
            href={`/analytics/objects/${c.obj_id}`}
            style={{
              border: "1px solid #e6e8ec",
              borderRadius: 8,
              padding: 14,
              background: "#fff",
              textDecoration: "none",
              color: "inherit",
              display: "block",
              transition: "border-color 120ms",
            }}
          >
            <div
              style={{
                fontSize: 14,
                fontWeight: 600,
                marginBottom: 4,
                lineHeight: 1.2,
              }}
            >
              {c.comm_name ?? `ЖК #${c.obj_id}`}
            </div>
            <div style={{ fontSize: 12, color: "#5b6066", marginBottom: 4 }}>
              {c.dev_name ?? "—"}
              {c.obj_class ? ` · ${c.obj_class}` : ""}
            </div>
            {showMeta ? (
              <div
                style={{
                  fontSize: 12,
                  color: "#5b6066",
                  marginBottom: 8,
                  display: "flex",
                  alignItems: "center",
                  gap: 6,
                }}
              >
                <span>{metaParts.join(" · ")}</span>
                {mapUrl ? (
                  <a
                    href={mapUrl}
                    target="_blank"
                    rel="noopener noreferrer"
                    onClick={(e) => e.stopPropagation()}
                    style={{
                      textDecoration: "none",
                      lineHeight: 1,
                      fontSize: 13,
                    }}
                    title="Открыть на карте"
                  >
                    📍
                  </a>
                ) : null}
              </div>
            ) : (
              <div style={{ marginBottom: 8 }} />
            )}
            <div
              style={{
                display: "flex",
                gap: 12,
                alignItems: "center",
                fontSize: 13,
              }}
            >
              <span>
                Квартир: <strong>{c.flat_count ?? "—"}</strong>
              </span>
              <span style={{ color: soldColor, fontWeight: 600 }}>
                Sold: {sold == null ? "—" : `${sold.toFixed(0)}%`}
              </span>
            </div>
          </Link>
        );
      })}
    </div>
  );
}