import { Tooltip } from 'antd';
import type { ReactNode } from 'react';
import styles from './app-detail-header.module.css';

/** One right-anchored counter. `label` and `value` arrive already translated / already formatted. */
export type DetailHeaderStat = {
  label: string;
  value: ReactNode;
  /** Colour of the VALUE: neutral by default; `ok` green, `warn` amber, `info` azure, `muted` grey. */
  tone?: 'default' | 'ok' | 'warn' | 'info' | 'muted';
  /** Set for long values (a timestamp): prints one step smaller so the line stays balanced. */
  small?: boolean;
};

/** One item on the closing muted line: an identifier, a generated path, a version string. */
export type DetailHeaderMeta = {
  text: ReactNode;
  /** Machine string (a key, a file path, a hash) — printed in the mono face. */
  mono?: boolean;
  /** Hover explanation, e.g. what the placeholders in a generated path mean. */
  tooltip?: string;
};

type AppDetailHeaderProps = {
  /** The resource's name. Reads as the page title. */
  name: ReactNode;
  /** One muted line under the name — a description, never an identifier. */
  description?: ReactNode;
  /** Pill tags under the name: WHAT KIND this is / WHO owns it. See TAG_PILL in src/theme.ts. */
  tags?: ReactNode;
  /** The counters, collapsed onto ONE line on the right. */
  stats?: DetailHeaderStat[];
  /** The closing muted line. */
  meta?: DetailHeaderMeta[];
};

/**
 * The information header of a DETAIL page — one flat block that answers, in this order:
 *   left  — WHAT this is: name, description, tags.
 *   right — the NUMBERS about it, on one line.
 *   below — the machine detail: identifiers, generated paths, versions.
 *
 * Deliberately flat: no box of its own (the page <Card> already frames the screen) and no label column —
 * short values (8 · 0 · —) in a bordered label/value grid read as a spreadsheet of random gaps. Every
 * string arrives pre-translated and pre-formatted, so this component owns layout and typography only and
 * can be dropped into any module without knowing its i18n keys or its domain.
 *
 * Generic on purpose — see the `detail-page-header` skill. A module that always shows the same counters
 * should wrap this once (resource-fe does, in ResourceInfoPanel.tsx) rather than rebuild the `stats`
 * array on every page.
 */
const AppDetailHeader = ({ name, description, tags, stats, meta }: AppDetailHeaderProps) => (
  <section className={styles.header}>
    <div className={styles.top}>
      <div className={styles.titleBlock}>
        <span className={styles.name}>{name}</span>
        {description && <span className={styles.muted}>{description}</span>}
      </div>

      {!!stats?.length && (
        <div className={styles.statLine}>
          {stats.map((s) => (
            // `Label: value` — a grey label, the colon, then the value in body text. The colon is printed
            // here rather than baked into every translation.
            <span key={s.label} className={styles.statInline}>
              <span className={styles.statLabel}>{s.label}:</span>
              <span className={`${styles.statValue} ${s.small ? styles.statValueSmall : ''} ${s.tone && s.tone !== 'default' ? styles[s.tone] : ''}`}>{s.value}</span>
            </span>
          ))}
        </div>
      )}
    </div>

    {tags && <div className={styles.tags}>{tags}</div>}

    {!!meta?.length && (
      <div className={styles.meta}>
        {meta.map((m, i) => {
          // Index in the key: a meta line is a fixed, ordered list per page (path, version…), never a
          // reordered collection, and `text` can be a node rather than a string.
          const content = <span className={m.mono ? styles.mono : styles.muted}>{m.text}</span>;
          return m.tooltip ? (
            <Tooltip key={i} title={m.tooltip}>
              {content}
            </Tooltip>
          ) : (
            <span key={i}>{content}</span>
          );
        })}
      </div>
    )}
  </section>
);

export default AppDetailHeader;