'use client'

import type { ReactNode } from 'react'
import { X } from 'lucide-react'

/**
 * Design-system inline split-pane pattern: a list that shrinks while a
 * fixed-width editor/detail pane slides in beside it (Script Tags 420px,
 * Entries 400px, Forms 390px, SEO Content 380px in the handoff).
 *
 * Compose as:
 *
 *   <SplitPaneLayout>
 *     <SplitPaneList>…table…</SplitPaneList>
 *     <InspectorPane open={!!selected} width={420} aria-label="Edit script">
 *       <InspectorPaneHeader onClose={close}>…</InspectorPaneHeader>
 *       <InspectorPaneBody>…sections…</InspectorPaneBody>
 *       <InspectorPaneFooter>…save…</InspectorPaneFooter>
 *     </InspectorPane>
 *   </SplitPaneLayout>
 */
export function SplitPaneLayout({
  children,
  className,
}: {
  children: ReactNode
  className?: string
}) {
  return <div className={`flex min-h-0 flex-1 overflow-hidden ${className ?? ''}`}>{children}</div>
}

export function SplitPaneList({
  children,
  className,
}: {
  children: ReactNode
  className?: string
}) {
  return <div className={`min-w-0 flex-1 overflow-y-auto ${className ?? ''}`}>{children}</div>
}

export interface InspectorPaneProps {
  open: boolean
  /** Outer shell width in px when open (inner card fills it minus 12px gutters). */
  width: number
  children: ReactNode
  'aria-label': string
}

export function InspectorPane({
  open,
  width,
  children,
  'aria-label': ariaLabel,
}: InspectorPaneProps) {
  // Cap at the split row's width (100% of the flex container) so the pane
  // never overflows phones/tablets. Below the cap the pane fills the row
  // master–detail style: the list yields, and the close button returns to
  // it. On desktop the min() resolves to the design's fixed px width, so
  // nothing changes there.
  return (
    <div
      className="shrink-0 overflow-hidden bg-[var(--bg)] motion-safe:transition-[width] motion-safe:duration-200"
      style={{ width: open ? `min(${width}px, 100%)` : 0 }}
      aria-hidden={!open}
    >
      <div
        role="region"
        aria-label={ariaLabel}
        className="my-3 mr-3 ml-4 flex h-[calc(100%-24px)] flex-col overflow-hidden rounded-[var(--r)] border border-[var(--bdr)] bg-[var(--sb)] shadow-[var(--shd2)]"
        style={{ width: `min(${width - 28}px, calc(100% - 28px))` }}
      >
        {open ? children : null}
      </div>
    </div>
  )
}

export function InspectorPaneHeader({
  children,
  onClose,
  closeLabel = 'Close panel',
}: {
  children: ReactNode
  onClose: () => void
  closeLabel?: string
}) {
  return (
    <div className="flex items-start gap-2 border-b border-[var(--bdr)] px-5 py-4">
      <div className="min-w-0 flex-1">{children}</div>
      <button
        type="button"
        onClick={onClose}
        aria-label={closeLabel}
        className="flex h-7 w-7 shrink-0 items-center justify-center rounded-[6px] text-[var(--muted)] transition-colors duration-[var(--motion-fast)] hover:bg-[var(--bg)] hover:text-[var(--txt)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none"
      >
        <X size={16} />
      </button>
    </div>
  )
}

export function InspectorPaneBody({ children }: { children: ReactNode }) {
  return <div className="min-h-0 flex-1 overflow-y-auto">{children}</div>
}

/** Bordered section with the design's uppercase 10.5px section title. */
export function InspectorPaneSection({
  title,
  subtitle,
  children,
}: {
  title?: string
  subtitle?: string
  children: ReactNode
}) {
  return (
    <div className="border-b border-[var(--bdr)] px-5 py-4 last:border-b-0">
      {title && (
        <div className="mb-2.5 flex items-baseline gap-2">
          <span className="text-[10.5px] font-semibold tracking-[0.6px] text-[var(--muted)] uppercase">
            {title}
          </span>
          {subtitle && <span className="text-[11px] text-[var(--muted)]">{subtitle}</span>}
        </div>
      )}
      {children}
    </div>
  )
}

export function InspectorPaneFooter({ children }: { children: ReactNode }) {
  return <div className="border-t border-[var(--bdr)] px-5 py-4">{children}</div>
}
