"use client";

/**
 * OksCard — lower-grid «Объекты кап. строительства · ОКС» card. The backend does
 * not surface ОКС on the parcel, so the card shows the prototype's isometric
 * building visual + an honest empty-state «Нет данных» (no fabricated counts).
 * The "Подробнее" button opens the oks drawer.
 */

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

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

export function OksCard({ onOpenDrawer }: Props) {
  const card = adaptOksLowerCard();

  return (
    <div className={styles.card}>
      <div className={styles.cardHead}>
        <h3 className={styles.cardTitle}>
          Объекты кап. строительства
          <span className={styles.cardTitleSub}>ОКС</span>
        </h3>
      </div>

      <div className={styles.isoBox}>
        <svg viewBox="0 0 200 84" fill="none" aria-hidden="true">
          <g opacity="0.9">
            <path
              d="M40 56 L70 42 L70 22 L40 36 Z"
              className={styles.isoFaceLeft}
            />
            <path
              d="M70 42 L92 52 L92 32 L70 22 Z"
              className={styles.isoFaceTop}
            />
            <path
              d="M40 56 L62 66 L92 52 L70 42 Z"
              className={styles.isoFaceRight}
            />
            <path
              d="M100 50 L120 40 L120 26 L100 36 Z"
              className={styles.isoFaceLeft}
            />
            <path
              d="M120 40 L138 48 L138 34 L120 26 Z"
              className={styles.isoFaceTop}
            />
            <path
              d="M100 50 L118 58 L138 48 L120 40 Z"
              className={styles.isoFaceRight}
            />
            <path
              d="M146 56 L162 47 L162 36 L146 45 Z"
              className={styles.isoFaceLeft}
            />
            <path
              d="M146 56 L160 63 L176 54 L162 47 Z"
              className={styles.isoFaceRight}
            />
          </g>
        </svg>
      </div>

      <div className={styles.emptyState}>{card.emptyState}</div>

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