"use client";

/**
 * InvestScoreBlock — hero score panel (col 3): big /10 invest-score number + a
 * buy-signal badge. In INCREMENT 1 the invest-score and buy-signal are
 * PLACEHOLDERS (surfaced after the §22 forecast / Scenarios), so the big number
 * renders muted "—" with a caption instead of a fabricated value.
 */

import styles from "@/app/site-finder/analysis/[cad]/ptica/ptica.module.css";
import type { ParcelAnalysis } from "@/types/site-finder";
import type { ForecastReport } from "@/types/forecast";
import { adaptInvestScore } from "@/components/site-finder/ptica/ptica-adapt";
import type { PticaValueTone } from "@/components/site-finder/ptica/ptica-adapt";
import type { DrawerKey } from "@/components/site-finder/ptica/drawers/drawer-keys";

/** Decorative hero sparkline shape (prototype data-spark="4,5,6,5,7,6,8,7,9,8"). */
const SPARK = [4, 5, 6, 5, 7, 6, 8, 7, 9, 8];
const SPARK_MAX = Math.max(...SPARK);

function toneClass(tone: PticaValueTone): string {
  if (tone === "good") return styles.vGood;
  if (tone === "warn") return styles.vWarn;
  return "";
}

interface Props {
  analysis: ParcelAnalysis;
  /** §22 forecast report — when ready, surfaces the REAL invest-score / buy-signal. */
  forecastReport?: ForecastReport;
  onOpenDrawer: (key: DrawerKey) => void;
}

export function InvestScoreBlock({
  analysis,
  forecastReport,
  onOpenDrawer,
}: Props) {
  const inv = adaptInvestScore(analysis, forecastReport);

  return (
    <div className={styles.scoreStack}>
      <div>
        <div className={styles.statLine}>
          <span className={styles.k}>Инвест-скор</span>
        </div>
        <div className={styles.investScore}>
          {inv.score.isReal ? (
            <>
              <span className={styles.investBig}>{inv.score.value}</span>
              <span className={styles.investSmall}>/ 10</span>
            </>
          ) : (
            <span className={`${styles.investBig} ${styles.investPlaceholder}`}>
              —
            </span>
          )}
        </div>
        {inv.score.caption && (
          <span className={styles.fieldCaption}>{inv.score.caption}</span>
        )}
        <div className={styles.sparkline} aria-hidden="true">
          {SPARK.map((v, i) => (
            <span
              key={i}
              style={{ height: `${Math.round((v / SPARK_MAX) * 100)}%` }}
            />
          ))}
        </div>
      </div>

      <div className={styles.statLine}>
        <span className={styles.k}>Потенциал</span>
        <span
          className={`${styles.v} ${toneClass(inv.potentialTone)}`}
          title={inv.potential.caption}
        >
          {inv.potential.value}
        </span>
      </div>
      <div className={styles.statLine}>
        <span className={styles.k}>Риск</span>
        <span
          className={`${styles.v} ${toneClass(inv.riskTone)}`}
          title={inv.risk.caption}
        >
          {inv.risk.value}
        </span>
      </div>

      <div className={styles.statLine}>
        <span className={styles.k}>Buy Signal</span>
        <span className={styles.badge} title={inv.buySignal.caption}>
          {inv.buySignal.isReal ? inv.buySignal.value : "после прогноза"}
        </span>
      </div>

      <button
        type="button"
        className={`${styles.detailBtn} ${styles.detailBtnScan}`}
        onClick={() => onOpenDrawer("potential")}
        title="Открыть расчёт ёмкости"
      >
        Подробнее
      </button>
    </div>
  );
}
