"use client";

/**
 * ScanCard — generic dark cockpit card: title (+ optional badge), metric rows,
 * and a "Подробнее" button that opens the card's detail drawer.
 *
 * When `drawerKey` + `onOpen` are provided the button is ENABLED and opens the
 * matching drawer; without them it stays disabled (no drill-down wired). Each
 * row's value flows from a {value, isReal, caption} view-model: placeholder
 * fields are rendered muted with their caption so they never read as live data.
 */

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

interface Props {
  card: PticaScanCard;
  /** When set (with onOpen) the "Подробнее" button opens this drawer. */
  drawerKey?: DrawerKey;
  onOpen?: (key: DrawerKey) => void;
}

export function ScanCard({ card, drawerKey, onOpen }: Props) {
  const { title, badge, rows, emptyState } = card;
  const canOpen = Boolean(drawerKey && onOpen);

  return (
    <div className={`${styles.card} ${styles.scanCard}`}>
      <h3 className={styles.cardTitle}>
        {title}
        {badge && <span className={styles.cardTitleSub}>{badge}</span>}
      </h3>

      {emptyState ? (
        <div className={styles.emptyState}>{emptyState}</div>
      ) : (
        rows.map((row) => {
          // Status-row variant (prototype .status-row): dot + label + state.
          if (row.status) {
            const dotClass =
              row.status === "warn"
                ? styles.dotWarn
                : row.status === "bad"
                  ? styles.dotBad
                  : "";
            const stateClass =
              row.status === "ok" ? styles.stateOk : styles.stateWarn;
            return (
              <div key={row.key} className={styles.statusRow}>
                <span className={`${styles.dot} ${dotClass}`} />
                <span className={styles.label}>{row.key}</span>
                <span
                  className={`${styles.state} ${stateClass}`}
                  title={row.field.caption}
                >
                  {row.field.value}
                </span>
              </div>
            );
          }

          const placeholder = !row.field.isReal;
          return (
            <div
              key={row.key}
              className={`${styles.kvrow} ${
                placeholder ? styles.kvrowPlaceholder : ""
              }`}
            >
              <span className={styles.k}>{row.key}</span>
              <span className={styles.v} title={row.field.caption}>
                {row.field.value}
              </span>
            </div>
          );
        })
      )}

      <button
        type="button"
        className={styles.detailBtn}
        disabled={!canOpen}
        aria-disabled={!canOpen}
        title={
          canOpen ? "Открыть детализацию" : "Детализация — в следующем релизе"
        }
        onClick={
          canOpen && drawerKey && onOpen ? () => onOpen(drawerKey) : undefined
        }
      >
        Подробнее
      </button>
    </div>
  );
}