"use client";

/**
 * V2Passport — «Паспорт участка» card (prototype `.passport`). Renders REAL ЕГРН
 * fields via adaptPassport; absent fields show the honest «—» placeholder. The
 * "ПОДРОБНЕЕ →" link opens the passport drawer.
 */

import styles from "@/app/site-finder/analysis/[cad]/v2/v2.module.css";
import type { ParcelAnalysis } from "@/types/site-finder";
import { adaptPassport } from "@/components/site-finder/ptica/ptica-adapt";
import type { PticaField } from "@/components/site-finder/ptica/ptica-adapt";
import { V2CopyIcon } from "@/components/site-finder/ptica-v2/V2Icons";
import type { V2DrawerKey } from "@/components/site-finder/ptica-v2/v2-drawer-registry";

function Cell({
  label,
  field,
  wide,
  big,
}: {
  label: string;
  field: PticaField;
  wide?: boolean;
  big?: boolean;
}) {
  return (
    <div className={`${styles.ppCell} ${wide ? styles.ppCellWide : ""}`}>
      <div className={styles.k}>{label}</div>
      <div
        className={`${styles.vv} ${big ? styles.big : ""}`}
        title={field.isReal ? undefined : field.caption}
      >
        {field.value}
      </div>
    </div>
  );
}

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

export function V2Passport({ analysis, onOpenDrawer }: Props) {
  const p = adaptPassport(analysis);

  return (
    <div className={`${styles.card} ${styles.passport}`}>
      <div className={styles.cardH}>
        <div className={styles.ttl}>
          <span className={styles.sectionTitle}>Паспорт участка</span>
        </div>
        <button
          type="button"
          className={styles.more}
          onClick={() => onOpenDrawer("parcel")}
        >
          ПОДРОБНЕЕ →
        </button>
      </div>
      <div className={styles.cardB}>
        <div className={styles.ppId}>
          <span className={styles.lbl}>ID</span>
          <span className={`${styles.v} ${styles.mono}`}>{p.cadNum}</span>
          <span className={styles.cp} aria-hidden="true">
            <V2CopyIcon />
          </span>
        </div>
        <div className={styles.ppGrid}>
          <Cell label="Район" field={p.district} />
          <Cell label="Площадь" field={p.area} big />
          <Cell label="Адрес" field={p.address} />
          <Cell label="ВРИ" field={p.vri} />
          <Cell label="Категория земель" field={p.landCategory} />
          <div className={styles.ppCell}>
            <div className={styles.k}>Статус</div>
            <div
              className={p.status.isReal ? styles.statusOn : styles.vv}
              title={p.status.isReal ? undefined : p.status.caption}
            >
              {p.status.value}
            </div>
          </div>
          <Cell label="Обременения" field={p.encumbrances} wide />
        </div>
      </div>
    </div>
  );
}