"use client";

/**
 * DevelopmentPotentialCard — lower-grid «Development Potential» card. Renders the
 * REAL ёмкость-метрики (площадь · КСИТ · плотность · высота · пятно · продаваемая)
 * from `adaptPotentialCard` (geometry + НСПД-регламент, post-#1847) as the
 * prototype's `.potential-grid` tiles, honest «—» where an input is absent.
 * "Подробнее" opens the potential drawer.
 */

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

interface Props {
  analysis: ParcelAnalysis;
  onOpenDrawer: (key: DrawerKey) => void;
}

export function DevelopmentPotentialCard({ analysis, onOpenDrawer }: Props) {
  const { metrics } = adaptPotentialCard(analysis);

  return (
    <div className={styles.card}>
      <div className={styles.cardHead}>
        <h3 className={styles.cardTitle}>Development Potential</h3>
      </div>

      <div className={styles.potentialGrid}>
        {metrics.map((m) => (
          <div key={m.label} className={styles.metric}>
            <div className={styles.metricLabel}>{m.label}</div>
            <div
              className={`${styles.metricValue} ${m.lead ? styles.metricValueLg : ""} ${
                m.isReal ? "" : styles.metricValuePlaceholder
              }`}
              title={m.caption}
            >
              {m.value}
              {m.unit && <span className={styles.metricUnit}>{m.unit}</span>}
            </div>
          </div>
        ))}
      </div>

      <button
        type="button"
        className={styles.detailBtn}
        onClick={() => onOpenDrawer("potential")}
        title="Открыть детализацию потенциала"
      >
        Подробнее
      </button>
    </div>
  );
}