// CodeCompare — side-by-side "before / after" code panels. Common
// landing-page pattern for dev tooling: left = the messy world,
// right = your product's clean replacement. The dividing label sits
// in the centre on desktop, between the two panels on mobile.
//
// The two corner tags are `eyebrow`, and they are a PROP with an English
// default rather than a hardcoded string: this kit renders a bilingual site, and
// a component that prints "Before" over German copy is the same defect as a
// hardcoded label anywhere else. The default keeps every existing call working.

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

interface CodeComparePanelProps {
  readonly label: ReactNode
  /** Pre-highlighted HTML (Shiki) — skips internal highlighting. */
  readonly html?: string
  /** Plain code text. When `lang` is also provided, the panel
   *  runs Shiki syntax highlighting automatically. */
  readonly code?: string
  /** Shiki language. Triggers syntax highlighting on `code`. */
  readonly lang?: ShikiLang
  /** Visual treatment — `'muted'` is dimmed (the "before"),
   *  `'highlight'` keeps the full styling + adds a primary border. */
  readonly tone?: 'muted' | 'highlight'
  /** The corner tag. Pass a translated string on a localised page. */
  readonly eyebrow?: string
}

interface CodeCompareProps {
  readonly before: CodeComparePanelProps
  readonly after: CodeComparePanelProps
  readonly className?: string
}

const Panel = ({ label, html, code, lang, tone = 'muted', eyebrow }: CodeComparePanelProps): ReactNode => (
  <div
    className={cn(
      'relative rounded-xl border overflow-hidden bg-card/40 backdrop-blur-sm',
      tone === 'highlight'
        ? 'border-primary/40 shadow-[0_0_0_1px_oklch(0.55_0.25_290_/_0.15),0_12px_40px_-12px_oklch(0.55_0.25_290_/_0.35)]'
        : 'border-border',
    )}
  >
    <div className="flex items-center justify-between px-4 py-2 border-b border-border/60 bg-background/40">
      <div className="text-xs font-mono text-muted-foreground">{label}</div>
      <span
        className={cn(
          'text-[0.65rem] uppercase tracking-[0.08em] font-semibold',
          tone === 'highlight' ? 'text-primary' : 'text-muted-foreground/70',
        )}
      >
        {eyebrow ?? (tone === 'highlight' ? 'With Voltro' : 'Before')}
      </span>
    </div>
    <div
      className={cn(
        'text-sm leading-relaxed [&_pre]:!m-0 [&_pre]:!bg-transparent [&_pre]:p-5 overflow-x-auto',
        tone === 'muted' && 'opacity-60',
      )}
    >
      {html ? (
        <div dangerouslySetInnerHTML={{ __html: html }} />
      ) : code && lang ? (
        <HighlightedCode code={code} lang={lang} />
      ) : (
        <pre className="p-5 font-mono"><code>{code}</code></pre>
      )}
    </div>
  </div>
)

export const CodeCompare = ({
  before, after, className,
}: CodeCompareProps): ReactNode => (
  <div className={cn('relative grid grid-cols-1 lg:grid-cols-[1fr_auto_1fr] gap-4 lg:gap-6 items-stretch', className)}>
    <Panel {...before} tone="muted" />
    {/* Arrow / divider — sits between the two panels */}
    <div
      className="flex lg:flex-col items-center justify-center gap-2 text-muted-foreground"
      aria-hidden="true"
    >
      <div className="hidden lg:block w-px h-12 bg-gradient-to-b from-transparent via-primary/60 to-transparent" />
      <svg
        width="20" height="20" viewBox="0 0 20 20" fill="none"
        className="rotate-90 lg:rotate-0 text-primary"
      >
        <path d="M4 10 H16 M11 5 L16 10 L11 15" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
      <div className="hidden lg:block w-px h-12 bg-gradient-to-b from-primary/60 via-transparent to-transparent" />
    </div>
    <Panel {...after} tone="highlight" />
  </div>
)