// Общий JSX карточки Obsidian Wrapped для next/og ImageResponse (1080×1920, ДС-2).
// Flexbox + inline-стили (Satori не поддерживает grid/внешний CSS). Без emoji
// (Satori их не рендерит без эмодзи-шрифта). Используется серверным OG-роутом.

import type { Archetype, Period } from "@/app/(student)/wrapped/_client/types";

export interface CardData {
  noteCount: number;
  linkCount: number;
  tagCount: number;
  topTag: string | null;
  archetype: Archetype | null;
  score: number;
  period: Period;
}

const ARCHETYPE_RU: Record<string, string> = {
  architect: "Архитектор",
  gardener: "Садовник",
  librarian: "Библиотекарь",
  pragmatist: "Прагматик",
};
const PERIOD_RU: Record<string, string> = { year: "год", quarter: "квартал", all: "всё время" };

const BG = "#F5F5F0";
const FG = "#323232";
const ACCENT = "#E8F0D8";
const BORDER = "#AAAAAA";
const MUTED = "#666666";

function Metric({ n, l }: { n: number; l: string }) {
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        padding: "30px 18px",
        background: "#FFFFFF",
        border: `3px solid ${FG}`,
        boxShadow: `8px 8px 0 0 ${BORDER}`,
        width: 285,
      }}
    >
      <span style={{ fontSize: 70, fontWeight: 700, color: FG }}>{n}</span>
      <span style={{ fontSize: 24, color: MUTED, textTransform: "uppercase", letterSpacing: 2 }}>{l}</span>
    </div>
  );
}

export function wrappedCard(d: CardData) {
  return (
    <div
      style={{
        width: 1080,
        height: 1920,
        display: "flex",
        flexDirection: "column",
        justifyContent: "space-between",
        background: BG,
        color: FG,
        padding: "90px 70px",
        fontFamily: "Fira Mono",
      }}
    >
      <div style={{ display: "flex", flexDirection: "column" }}>
        <span style={{ fontSize: 34, fontWeight: 700, textTransform: "uppercase", letterSpacing: 6, color: MUTED }}>
          Obsidian Wrapped · 2026
        </span>
        <span style={{ fontSize: 96, fontWeight: 700, marginTop: 36 }}>
          {d.archetype ? ARCHETYPE_RU[d.archetype] : "Твой год"}
        </span>
        <span style={{ fontSize: 42, color: MUTED, marginTop: 14, textTransform: "uppercase", letterSpacing: 3 }}>
          зрелость {d.score}/100 · {PERIOD_RU[d.period] ?? "год"}
        </span>
      </div>

      <div style={{ display: "flex", justifyContent: "space-between" }}>
        <Metric n={d.noteCount} l="заметок" />
        <Metric n={d.linkCount} l="связей" />
        <Metric n={d.tagCount} l="тегов" />
      </div>

      {d.topTag ? (
        <div style={{ display: "flex", padding: "30px 36px", background: ACCENT, border: `3px solid ${FG}` }}>
          <span style={{ fontSize: 46 }}>Топ-тег: #{d.topTag}</span>
        </div>
      ) : (
        <div style={{ display: "flex" }} />
      )}

      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end" }}>
        <span style={{ fontSize: 34, fontWeight: 700, color: FG }}>second-brain.ru</span>
        <span style={{ fontSize: 28, color: MUTED }}>сделай свою на /wrapped</span>
      </div>
    </div>
  );
}