import { Button, Icon, StatusBadge } from "@nodedc/ui-react";

import type { BackendStatus, RuntimePhase } from "../core/runtime/contracts";
import type { RootDefinition } from "../productModel";
import { backendLabel, backendTone, phaseLabel, phaseTone } from "../presentation";

export interface LandingStageProps {
  root: RootDefinition | null;
  backendStatus: BackendStatus;
  phase?: RuntimePhase | null;
  message?: string | null;
  onOpenObservation: () => void;
  onOpenDevice: () => void;
}

export function LandingStage({
  root,
  backendStatus,
  phase,
  message,
  onOpenObservation,
  onOpenDevice,
}: LandingStageProps) {
  return (
    <section className="landing-stage" data-root={root?.id ?? "home"}>
      <div className="landing-stage__copy">
        <span className="section-eyebrow">{root?.eyebrow ?? "NODEDC / MISSION CORE"}</span>
        <h1>{root?.title ?? "Mission Core"}</h1>
        <p>
          {root?.statement ??
            "Наблюдение, планирование и корректировка миссий в одной модульной рабочей области."}
        </p>
        <div className="landing-stage__actions">
          <Button variant="primary" icon={<Icon name="globe" />} onClick={onOpenObservation}>
            Пространственная сцена
          </Button>
          <Button variant="secondary" icon={<Icon name="network" />} onClick={onOpenDevice}>
            Локальное устройство
          </Button>
        </div>
      </div>

      <div className="landing-stage__status">
        <div>
          <span className="section-eyebrow">ЛОКАЛЬНЫЙ КОНТУР</span>
          <StatusBadge tone={backendTone(backendStatus)}>{backendLabel(backendStatus)}</StatusBadge>
        </div>
        <div>
          <span className="section-eyebrow">ИСТОЧНИК</span>
          <StatusBadge tone={phaseTone(phase)}>{phaseLabel(phase)}</StatusBadge>
        </div>
        <p>{message || "Выберите архитектурный блок в верхней навигации."}</p>
      </div>

      <footer className="landing-stage__footer">
        <span>{root?.accent ?? "НАБЛЮДЕНИЕ · МИССИИ · ДАННЫЕ"}</span>
        <span>01 / ЛОКАЛЬНЫЙ СТЕНД</span>
      </footer>
    </section>
  );
}
