"use client";
import type { RecentSoldEntry } from "@/types/trade-in";

type Props = { items: RecentSoldEntry[] };

const fmtPrice = (n: number | null): string =>
  n == null ? "—" : `${(n / 1_000_000).toFixed(2)} М`;

const fmtDate = (d: string | null): string => {
  if (!d) return "—";
  try {
    return new Date(d).toLocaleDateString("ru-RU");
  } catch {
    return d;
  }
};

export function RecentSoldList({ items }: Props) {
  const suffix = items.length === 1 ? "" : "ов";

  return (
    <article className="card" style={{ marginTop: 12 }}>
      <header className="card-head">
        <h4 style={{ margin: 0, fontSize: 14, fontWeight: 600 }}>
          Недавно снятые (12 мес)
        </h4>
        <small style={{ color: "var(--muted, #6b7280)" }}>
          {items.length} лот{suffix}
        </small>
      </header>
      <div style={{ padding: "8px 16px 16px" }}>
        <table
          style={{ width: "100%", fontSize: 13, borderCollapse: "collapse" }}
        >
          <thead>
            <tr
              style={{
                borderBottom: "1px solid var(--border, #e5e7eb)",
                textAlign: "left",
              }}
            >
              <th style={{ padding: "6px 8px" }}>Лот</th>
              <th style={{ padding: "6px 8px" }}>Цена</th>
              <th style={{ padding: "6px 8px" }}>Торг</th>
              <th style={{ padding: "6px 8px" }}>Снято</th>
              <th style={{ padding: "6px 8px" }}>Экспозиция</th>
            </tr>
          </thead>
          <tbody>
            {items.map((it) => {
              const hasDiscount =
                it.discount_pct != null && it.discount_pct !== 0;
              const discountColor =
                it.discount_pct != null && it.discount_pct > 0
                  ? "#16a34a"
                  : "var(--muted, #6b7280)";

              return (
                <tr
                  key={it.id}
                  style={{
                    borderBottom: "1px solid var(--border-soft, #f3f4f6)",
                  }}
                >
                  <td style={{ padding: "6px 8px" }}>
                    {it.rooms ?? "?"}к, {it.area_m2 ?? "?"} м²
                    {it.floor != null ? `, эт. ${it.floor}` : ""}
                  </td>
                  <td style={{ padding: "6px 8px", whiteSpace: "nowrap" }}>
                    {fmtPrice(it.last_price)} ₽
                  </td>
                  <td style={{ padding: "6px 8px", color: discountColor }}>
                    {hasDiscount
                      ? `${it.discount_pct! > 0 ? "−" : "+"}${Math.abs(it.discount_pct!).toFixed(1)}%`
                      : "—"}
                  </td>
                  <td style={{ padding: "6px 8px", whiteSpace: "nowrap" }}>
                    {fmtDate(it.removed_date)}
                  </td>
                  <td style={{ padding: "6px 8px" }}>
                    {it.exposure_days ?? "—"} дн.
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </article>
  );
}