"use client";

/**
 * PticaHero — top of the cockpit: map + passport KV-grid + Buildability gauge +
 * invest-score block, in the prototype's hero grid.
 *
 * The passport card, the Buildability gauge and the invest/potential block each
 * open their detail drawer via the `onOpenDrawer` callback threaded down from
 * PticaPageContent (passport / buildability / potential keys).
 */

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 { PticaMap } from "@/components/site-finder/ptica/PticaMap";
import { ParcelPassportCard } from "@/components/site-finder/ptica/ParcelPassportCard";
import { BuildabilityGauge } from "@/components/site-finder/ptica/BuildabilityGauge";
import { InvestScoreBlock } from "@/components/site-finder/ptica/InvestScoreBlock";
import { adaptBuildabilityGauge } from "@/components/site-finder/ptica/ptica-adapt";
import type { DrawerKey } from "@/components/site-finder/ptica/drawers/drawer-keys";

interface Props {
  analysis: ParcelAnalysis;
  /** §22 forecast report — threaded into the invest-score block once ready. */
  forecastReport?: ForecastReport;
  onOpenDrawer: (key: DrawerKey) => void;
}

export function PticaHero({ analysis, forecastReport, onOpenDrawer }: Props) {
  const buildGauge = adaptBuildabilityGauge(analysis);

  return (
    <section id="ptica-hero" className={styles.hero}>
      <PticaMap analysis={analysis} onOpenDrawer={onOpenDrawer} />

      <ParcelPassportCard analysis={analysis} onOpenDrawer={onOpenDrawer} />

      <div className={`${styles.panel} ${styles.scorePanel}`}>
        <button
          type="button"
          className={styles.gaugeButton}
          onClick={() => onOpenDrawer("buildability")}
          aria-label="Открыть детализацию Buildability Index"
        >
          <BuildabilityGauge gauge={buildGauge} title="Buildability Index" />
        </button>
        <InvestScoreBlock
          analysis={analysis}
          forecastReport={forecastReport}
          onOpenDrawer={onOpenDrawer}
        />
      </div>
    </section>
  );
}
