// CodeWindow — chrome'd code preview for the landing hero / feature
// callouts. Looks like a terminal/editor surface without claiming a
// specific platform (no fake macOS dots).
//
// Two states:
//   - Pass `code` (string) + `lang` for a plain (no-syntax) preview
//   - Pass `html` for pre-highlighted (e.g. Shiki) output
//
// A subtle blinking caret is appended at the end of the last line
// when `caret` is true — adds the "live, just typed" feel without
// real animation cost.

import type { ReactNode } from 'react'
import { cn } from '../cn'
import { HighlightedCode, type ShikiLang } from './highlightedCode'

interface CodeWindowProps {
  /** Title shown in the chrome — usually a filename. */
  readonly title?: string
  /** Tag in the corner — language label, e.g. "TypeScript". */
  readonly tag?: string
  /** Plain code text. When `lang` is also provided, the component
   *  runs Shiki syntax highlighting automatically. */
  readonly code?: string
  /** Shiki language. Triggers syntax highlighting on `code`. */
  readonly lang?: ShikiLang
  /** Pre-highlighted HTML (skips Shiki). */
  readonly html?: string
  /** Show a blinking caret after the code. Default false. Only
   *  applies to plain (non-highlighted) rendering. */
  readonly caret?: boolean
  /** Outer wrapper class — useful for sizing. */
  readonly className?: string
}

export const CodeWindow = ({
  title, tag, code, lang, html, caret = false, className,
}: CodeWindowProps): ReactNode => (
  <div
    className={cn(
      'relative overflow-hidden rounded-xl border border-border bg-card/60 backdrop-blur-sm shadow-2xl',
      // Hairline highlight along the top — sells the "lit from above" feel
      'before:absolute before:inset-x-0 before:top-0 before:h-px before:bg-gradient-to-r before:from-transparent before:via-primary/60 before:to-transparent',
      className,
    )}
  >
    {(title || tag) ? (
      <div className="flex items-center justify-between px-4 py-2 border-b border-border/60 bg-background/40">
        <div className="flex items-center gap-2 text-xs text-muted-foreground font-mono">
          {/* Three soft indicator dots — not platform-specific colours */}
          <span className="inline-flex gap-1.5" aria-hidden="true">
            <span className="w-2.5 h-2.5 rounded-full bg-muted-foreground/30" />
            <span className="w-2.5 h-2.5 rounded-full bg-muted-foreground/30" />
            <span className="w-2.5 h-2.5 rounded-full bg-muted-foreground/30" />
          </span>
          {title ? <span className="ml-2">{title}</span> : null}
        </div>
        {tag ? (
          <span className="text-[0.65rem] uppercase tracking-[0.08em] text-muted-foreground/80 font-semibold">
            {tag}
          </span>
        ) : null}
      </div>
    ) : null}
    <div className="relative">
      {html ? (
        <div
          className="text-sm leading-relaxed [&_pre]:!m-0 [&_pre]:!bg-transparent [&_pre]:p-5 overflow-x-auto"
          dangerouslySetInnerHTML={{ __html: html }}
        />
      ) : code && lang ? (
        // `code + lang` → run Shiki transparently.
        <HighlightedCode code={code} lang={lang} />
      ) : (
        <pre className="p-5 text-sm leading-relaxed overflow-x-auto font-mono">
          <code>{code}</code>
          {caret ? (
            <span className="ml-0.5 inline-block w-[7px] h-[1.1em] -mb-[3px] align-text-bottom bg-primary motion-safe:animate-caret-blink" />
          ) : null}
        </pre>
      )}
    </div>
  </div>
)