/**
 * DocBadges — repo / branch / plan-diff / demo / archive / linked-doc badge cluster.
 *
 * Extracted from Viewer.tsx so the same markup can render in two places:
 *   - layout="column": original location at the top-left of the plan card (absolute)
 *   - layout="row":   compact context inside the legacy sticky header lane
 *   - layout="header": complete context inside Viewer's in-flow shared header
 *
 * In row layout, the demo badge and linked-doc breadcrumb are dropped —
 * everything else is decorative top-of-doc context except the plan-diff
 * badge, which is NOT suppressed by linkedDocInfo: `planDiffStats`/
 * `hasPreviousVersion` already arrive pre-scoped to whichever document is
 * currently active (root, or a folder/linked doc with its own diff
 * baseline), so it renders in linked-doc mode exactly when that document
 * actually has a previous version to diff against.
 */

import React from 'react';
import { PlanDiffBadge } from './plan-diff/PlanDiffBadge';
import type { PlanDiffStats } from '../utils/planDiffEngine';
import { hostnameOrFallback } from '@plannotator/core/project';
import { OpenInAppButton } from './OpenInAppButton';

export interface LinkedDocBadgeInfo {
  filepath: string;
  /** Leave the document. Optional for `folder-file`: absent shows no Close
   *  (a file of a review of several files, which the switcher moves between). */
  onBack?: () => void;
  label?: string;
  backLabel?: string;
  variant?: 'breadcrumb' | 'folder-file';
}

export interface DocBadgesProps {
  layout: 'column' | 'row' | 'header';
  repoInfo?: { display: string; branch?: string } | null;
  planDiffStats?: PlanDiffStats | null;
  isPlanDiffActive?: boolean;
  hasPreviousVersion?: boolean;
  onPlanDiffToggle?: () => void;
  /** Baseline suffix + tooltip for the plan-diff badge — annotate/folder
   *  sessions pass "since last review" so the badge's numbers read against
   *  the right baseline. See PlanDiffBadge. Plan review passes nothing. */
  planDiffBaselineLabel?: string;
  planDiffBaselineTooltip?: string;
  showDemoBadge?: boolean;
  archiveInfo?: { status: 'approved' | 'denied' | 'unknown'; timestamp: string; title: string } | null;
  linkedDocInfo?: LinkedDocBadgeInfo | null;
  /** Source attribution for HTML/URL annotations (e.g. "https://..." or "index.html") */
  sourceInfo?: string;
  /**
   * Absolute on-disk path of the annotated source file, used by the
   * Open-in-app control. Omitted (or an https:// URL) -> no control rendered.
   */
  openInAppPath?: string | null;
}

export const DocBadges: React.FC<DocBadgesProps> = ({
  layout,
  repoInfo,
  planDiffStats,
  isPlanDiffActive,
  hasPreviousVersion,
  onPlanDiffToggle,
  planDiffBaselineLabel,
  planDiffBaselineTooltip,
  showDemoBadge,
  archiveInfo,
  linkedDocInfo,
  sourceInfo,
  openInAppPath,
}) => {
  const isRow = layout === 'row';
  const isHorizontal = layout !== 'column';
  const canOpenInApp =
    !!openInAppPath && !/^https?:\/\//i.test(openInAppPath);
  const openInButton = canOpenInApp ? (
    <OpenInAppButton filePath={openInAppPath} base={null} />
  ) : null;

  // In row layout, only PlanDiffBadge (when it has stats to show) and
  // archiveInfo (outside linked-doc mode) actually render — everything else
  // is hidden. Check what will truly produce visible output to avoid an
  // empty wrapper div. PlanDiffBadge is not linkedDocInfo-gated — see the
  // header comment.
  const anything = isRow
    ? (hasPreviousVersion && planDiffStats) || (archiveInfo && !linkedDocInfo)
    : repoInfo || hasPreviousVersion || showDemoBadge || linkedDocInfo || archiveInfo || sourceInfo || canOpenInApp;
  if (!anything) return null;

  // Row layout: single horizontal line. Column layout: stacked rows.
  const outerClass = isHorizontal
    ? `flex flex-row items-center gap-1.5 text-[9px] text-muted-foreground/70 font-mono ${layout === 'header' ? 'flex-wrap' : ''}`
    : 'flex flex-col items-start gap-1 text-[9px] text-muted-foreground/50 font-mono';

  return (
    <div className={outerClass}>
      {/* Legacy row layout omits repo/branch to keep the ghost bar compact —
          they'd otherwise push the container wide enough to visually extend
          under the action buttons. The Viewer-owned header measures and wraps
          the complete badge set, so its `header` layout keeps this context. */}
      {repoInfo && !linkedDocInfo && !isRow && (
        <div className="flex items-center gap-1.5">
          <span
            className="px-1.5 py-0.5 bg-muted/50 rounded truncate max-w-[140px]"
            title={repoInfo.display}
          >
            {repoInfo.display}
          </span>
          {repoInfo.branch && (
            <span
              className="px-1.5 py-0.5 bg-muted/30 rounded max-w-[120px] flex items-center gap-1 overflow-hidden"
              title={repoInfo.branch}
            >
              <svg className="w-2.5 h-2.5 flex-shrink-0" viewBox="0 0 16 16" fill="currentColor">
                <path d="M9.5 3.25a2.25 2.25 0 1 1 3 2.122V6A2.5 2.5 0 0 1 10 8.5H6a1 1 0 0 0-1 1v1.128a2.251 2.251 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.5 0v1.836A2.493 2.493 0 0 1 6 7h4a1 1 0 0 0 1-1v-.628A2.25 2.25 0 0 1 9.5 3.25Zm-6 0a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Zm8.25-.75a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z" />
              </svg>
              <span className="truncate">{repoInfo.branch}</span>
            </span>
          )}
          {/* Markdown/text annotate sessions have no separate source badge, so
              keep the open-in control attached to the repository context. */}
          {canOpenInApp && !sourceInfo && openInButton}
        </div>
      )}

      {/* Non-repository files still need an open-in entry when there is no
          source or linked-document row to attach it to. */}
      {!isRow && canOpenInApp && !repoInfo && !sourceInfo && !linkedDocInfo && openInButton}

      {sourceInfo && !linkedDocInfo && !isRow && (
        <div className="flex items-center gap-1">
          <span
            className="px-1.5 py-0.5 bg-muted/30 rounded truncate max-w-[200px]"
            title={sourceInfo}
          >
            {/^https?:\/\//i.test(sourceInfo)
              ? hostnameOrFallback(sourceInfo)
              : sourceInfo}
          </span>
          {openInButton}
        </div>
      )}

      {onPlanDiffToggle && (
        <PlanDiffBadge
          stats={planDiffStats ?? null}
          isActive={isPlanDiffActive ?? false}
          onToggle={onPlanDiffToggle}
          hasPreviousVersion={hasPreviousVersion ?? false}
          baselineLabel={planDiffBaselineLabel}
          baselineTooltip={planDiffBaselineTooltip}
        />
      )}

      {/* Demo badge: only in column (top-of-doc) layout */}
      {!isRow && showDemoBadge && !linkedDocInfo && (
        <span className="px-1.5 py-0.5 rounded text-[9px] font-mono bg-amber-500/15 text-amber-600 dark:text-amber-400">
          Demo
        </span>
      )}

      {archiveInfo && !linkedDocInfo && (
        <div className="flex items-center gap-1.5">
          <span
            className={`px-1.5 py-0.5 rounded ${
              archiveInfo.status === 'approved'
                ? 'bg-green-500/15 text-green-600 dark:text-green-400'
                : archiveInfo.status === 'denied'
                  ? 'bg-red-500/15 text-red-600 dark:text-red-400'
                  : 'bg-muted/50 text-muted-foreground'
            }`}
          >
            {archiveInfo.status === 'approved'
              ? 'Approved'
              : archiveInfo.status === 'denied'
                ? 'Denied'
                : 'Unknown'}
          </span>
          {archiveInfo.timestamp && (
            <span
              className="px-1.5 py-0.5 bg-muted/50 rounded"
              title={archiveInfo.timestamp}
            >
              {new Date(archiveInfo.timestamp).toLocaleDateString(undefined, {
                month: 'short',
                day: 'numeric',
                year: 'numeric',
              })}{' '}
              {new Date(archiveInfo.timestamp).toLocaleTimeString(undefined, {
                hour: 'numeric',
                minute: '2-digit',
              })}
            </span>
          )}
        </div>
      )}

      {/* Linked-doc breadcrumb: only in column layout (sticky lane is hidden in linked-doc mode) */}
      {!isRow && linkedDocInfo && (
        linkedDocInfo.variant === 'folder-file' ? (
          <div className="flex items-center gap-2">
            {linkedDocInfo.onBack && (
              <button
                type="button"
                onClick={linkedDocInfo.onBack}
                className="rounded-sm text-[9px] font-medium text-primary transition-colors hover:text-primary/80 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
              >
                Close
              </button>
            )}
            <span
              className="truncate rounded bg-muted/50 px-1.5 py-0.5 text-[9px] text-muted-foreground max-w-[220px]"
              title={linkedDocInfo.filepath}
            >
              {linkedDocInfo.filepath.split('/').pop()}
            </span>
            {openInButton}
          </div>
        ) : (
          <div className="flex items-center gap-1.5">
            <button
              onClick={linkedDocInfo.onBack}
              className="px-1.5 py-0.5 bg-primary/10 text-primary rounded hover:bg-primary/20 transition-colors flex items-center gap-1"
            >
              <svg
                className="w-2.5 h-2.5"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                strokeWidth={2.5}
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"
                />
              </svg>
              {linkedDocInfo.backLabel || 'plan'}
            </button>
            <span className="px-1.5 py-0.5 bg-primary/10 text-primary/80 rounded">
              {linkedDocInfo.label || 'Linked File'}
            </span>
            <span
              className="px-1.5 py-0.5 bg-muted/50 text-muted-foreground rounded truncate max-w-[200px]"
              title={linkedDocInfo.filepath}
            >
              {linkedDocInfo.filepath.split('/').pop()}
            </span>
            {openInButton}
          </div>
        )
      )}
    </div>
  );
};