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

function fmtPrice(v: number | null): string {
  if (v === null) return "—";
  return (
    (v / 1_000_000).toLocaleString("ru-RU", {
      minimumFractionDigits: 1,
      maximumFractionDigits: 1,
    }) + " млн"
  );
}

function fmtArea(v: number | null): string {
  if (v === null) return "—";
  return v.toLocaleString("ru-RU", { maximumFractionDigits: 1 }) + " м²";
}

export function ObjectQuartirographyTable({
  rows,
}: {
  rows: ObjectQuartirographyRow[];
}) {
  if (rows.length === 0) {
    return (
      <p style={{ color: "#9ca3af", fontSize: 13 }}>
        Данные квартирографии отсутствуют.
      </p>
    );
  }

  const headers = ["Тип", "Всего", "В продаже", "Площадь", "Цена (от–до)"];

  return (
    <div style={{ overflowX: "auto" }}>
      <table
        style={{
          width: "100%",
          borderCollapse: "collapse",
          fontSize: 13,
        }}
      >
        <thead>
          <tr style={{ background: "#f9fafb" }}>
            {headers.map((h) => (
              <th
                key={h}
                style={{
                  padding: "8px 10px",
                  textAlign: "left",
                  fontWeight: 600,
                  borderBottom: "1px solid #e6e8ec",
                  whiteSpace: "nowrap",
                }}
              >
                {h}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.map((r) => (
            <tr key={r.room_label} style={{ borderTop: "1px solid #f3f4f6" }}>
              <td style={{ padding: "8px 10px", fontWeight: 500 }}>
                {r.room_label}
              </td>
              <td
                style={{
                  padding: "8px 10px",
                  fontVariantNumeric: "tabular-nums",
                }}
              >
                {r.total_count.toLocaleString("ru-RU")}
              </td>
              <td
                style={{
                  padding: "8px 10px",
                  fontVariantNumeric: "tabular-nums",
                }}
              >
                {r.free_count > 0 ? (
                  <span style={{ color: "#0a7a3a", fontWeight: 500 }}>
                    {r.free_count.toLocaleString("ru-RU")}
                  </span>
                ) : (
                  <span style={{ color: "#9ca3af" }}>0</span>
                )}
              </td>
              <td
                style={{
                  padding: "8px 10px",
                  color: "#5b6066",
                  fontVariantNumeric: "tabular-nums",
                }}
              >
                {r.area_min !== null || r.area_max !== null
                  ? `${fmtArea(r.area_min)} – ${fmtArea(r.area_max)}`
                  : "—"}
              </td>
              <td
                style={{
                  padding: "8px 10px",
                  fontVariantNumeric: "tabular-nums",
                }}
              >
                {r.price_min !== null || r.price_max !== null
                  ? `${fmtPrice(r.price_min)} – ${fmtPrice(r.price_max)}`
                  : "—"}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}