"use client";

import Link from "next/link";

import { usePrinzipObjects } from "@/lib/analytics-api";

import { ChartShell } from "./ChartShell";

function Sparkline({ data }: { data: number[] }) {
  if (!data || data.length === 0) {
    return <span style={{ color: "#9ca3af", fontSize: 11 }}>нет данных</span>;
  }
  const option = {
    grid: { left: 0, right: 0, top: 4, bottom: 4 },
    xAxis: { type: "category", show: false, data: data.map((_, i) => i) },
    yAxis: { type: "value", show: false, min: 0 },
    series: [
      {
        data,
        type: "line",
        smooth: true,
        symbol: "none",
        lineStyle: { width: 2, color: "#1d4ed8" },
        areaStyle: { color: "rgba(29, 78, 216, 0.15)" },
      },
    ],
    tooltip: {
      trigger: "axis",
      formatter: (params: { value: number; dataIndex: number }[]) =>
        `мес ${params[0].dataIndex + 1}: ${params[0].value} шт`,
    },
  };
  return <ChartShell option={option} height={36} notMerge />;
}

export function PrinzipObjectsTable() {
  const { data, isLoading } = usePrinzipObjects();
  if (isLoading) return <div style={{ color: "#5b6066" }}>Загрузка…</div>;
  const rows = data ?? [];
  return (
    <div style={{ overflowX: "auto" }}>
      <table
        style={{ width: "100%", borderCollapse: "collapse", fontSize: 13 }}
      >
        <thead>
          <tr style={{ background: "#f6f7f9" }}>
            {[
              "#",
              "ЖК",
              "Total",
              "Sold",
              "Sold %",
              "Velocity (12 мес)",
              "Сдача",
              "",
            ].map((h) => (
              <th
                key={h}
                style={{
                  padding: "10px 12px",
                  textAlign: "left",
                  fontWeight: 600,
                  borderBottom: "1px solid #e6e8ec",
                  color: "#374151",
                }}
              >
                {h}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.map((r, i) => (
            <tr
              key={r.obj_id}
              style={{
                borderBottom: "1px solid #eef0f3",
                background: i % 2 ? "#fafbfc" : "#fff",
              }}
            >
              <td style={td}>{i + 1}</td>
              <td style={td}>
                <div style={{ fontWeight: 500 }}>{r.comm_name ?? "—"}</div>
                <div style={{ fontSize: 11, color: "#73767e" }}>
                  {r.addr ?? ""}
                </div>
              </td>
              <td style={td}>{r.total ?? "—"}</td>
              <td style={td}>{r.realised ?? "—"}</td>
              <td
                style={{
                  ...td,
                  fontWeight: 600,
                  color:
                    (r.perc ?? 0) >= 50
                      ? "#0a7a3a"
                      : (r.perc ?? 0) >= 20
                        ? "#9a6700"
                        : "#5b6066",
                }}
              >
                {r.perc != null ? `${r.perc}%` : "—"}
              </td>
              <td style={{ ...td, width: 140 }}>
                <Sparkline data={r.sparkline_realised} />
              </td>
              <td style={{ ...td, fontSize: 12, color: "#5b6066" }}>
                {r.ready_dt?.slice(0, 7) ?? "—"} · {r.site_status ?? ""}
              </td>
              <td style={td}>
                <Link
                  href={`/analytics/objects/${r.obj_id}`}
                  style={{
                    fontSize: 12,
                    color: "#1d4ed8",
                    textDecoration: "none",
                    padding: "4px 8px",
                    border: "1px solid #93c5fd",
                    borderRadius: 4,
                    whiteSpace: "nowrap",
                  }}
                >
                  Drill-in →
                </Link>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

const td = { padding: "10px 12px" };
