"use client";

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

export function InsightCards() {
  const { data } = usePrinzipInsights();

  if (!data)
    return <div style={{ color: "#5b6066" }}>Загрузка рекомендаций…</div>;

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
      <p
        style={{ margin: 0, fontSize: 15, lineHeight: 1.55, color: "#1f2937" }}
      >
        {data.headline}
      </p>

      <div>
        <h3 style={h3}>Приоритеты</h3>
        <div style={grid}>
          {data.priorities.map((p) => (
            <div key={p.rank} style={card}>
              <div style={badge}>#{p.rank}</div>
              <div style={{ fontWeight: 600, marginTop: 6 }}>{p.title}</div>
              <p style={pStyle}>{p.why}</p>
            </div>
          ))}
        </div>
      </div>

      <div>
        <h3 style={h3}>Где строить новое</h3>
        <div style={grid}>
          {data.where_to_build.map((w) => (
            <div key={w.district} style={card}>
              <div style={{ fontWeight: 600 }}>{w.district}</div>
              <p style={pStyle}>{w.why}</p>
            </div>
          ))}
        </div>
      </div>

      <div>
        <h3 style={h3}>Чего избегать</h3>
        <ul
          style={{
            margin: 0,
            paddingLeft: 20,
            lineHeight: 1.55,
            color: "#374151",
          }}
        >
          {data.what_to_avoid.map((s, i) => (
            <li key={i}>{s}</li>
          ))}
        </ul>
      </div>

      <div>
        <h3 style={h3}>Benchmark-модели</h3>
        <div style={grid}>
          {data.benchmarks.map((b) => (
            <div key={b.name} style={card}>
              <div style={{ fontWeight: 600 }}>{b.name}</div>
              <p style={pStyle}>{b.model}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

const h3 = {
  fontSize: 14,
  fontWeight: 600,
  color: "#374151",
  margin: "0 0 8px",
};
const grid = {
  display: "grid",
  gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
  gap: 12,
};
const card = {
  background: "#f9fafb",
  border: "1px solid #e6e8ec",
  borderRadius: 8,
  padding: "12px 14px",
};
const badge = {
  display: "inline-block",
  background: "#1d4ed8",
  color: "#fff",
  fontSize: 12,
  fontWeight: 600,
  borderRadius: 4,
  padding: "2px 8px",
};
const pStyle = {
  margin: "6px 0 0",
  fontSize: 13,
  color: "#4b5563",
  lineHeight: 1.5,
};