import { useEffect, useMemo, useState } from 'react'
import type { CSSProperties, ReactNode } from 'react'
import {
  DndContext,
  DragOverlay,
  PointerSensor,
  type DragEndEvent,
  type DragStartEvent,
  useDraggable,
  useSensor,
  useSensors,
} from '@dnd-kit/core'
import {
  SortableContext,
  arrayMove,
  horizontalListSortingStrategy,
  rectSortingStrategy,
  useSortable,
} from '@dnd-kit/sortable'
import { CSS } from '@dnd-kit/utilities'
import {
  ArrowLeft,
  ArrowRight,
  Box,
  Check,
  ChevronDown,
  ChevronRight,
  CircleHelp,
  Columns3,
  Copy,
  Database,
  Eye,
  EyeOff,
  FileClock,
  GripVertical,
  LayoutDashboard,
  Layers3,
  ListFilter,
  LockKeyhole,
  MoreHorizontal,
  PackageCheck,
  Play,
  Plus,
  RotateCcw,
  Save,
  Settings2,
  ShieldCheck,
  Table2,
  X,
} from 'lucide-react'
import './App.css'

type FieldType = 'text' | 'reference' | 'date' | 'select' | 'number'
type Field = {
  id: string
  label: string
  key: string
  type: FieldType
  required?: boolean
  visible: boolean
  helper?: string
  role?: string
}
type Column = { id: string; label: string; key: string; width: number; visible: boolean }
type Toast = { title: string; message: string }

const initialFields: Field[] = [
  { id: 'booking-no', label: '订舱编号', key: 'booking_no', type: 'text', required: true, visible: true, helper: '系统自动生成', role: '系统字段' },
  { id: 'customer', label: '客户', key: 'customer_id', type: 'reference', required: true, visible: true, helper: '选择客户主数据', role: '基础资料' },
  { id: 'carrier', label: '船公司', key: 'carrier_id', type: 'reference', required: true, visible: true, helper: '合作伙伴 / 承运人', role: '基础资料' },
  { id: 'etd', label: '预计开船日', key: 'etd', type: 'date', required: true, visible: true, role: '业务字段' },
  { id: 'pol', label: '起运港', key: 'pol_id', type: 'reference', visible: true, role: '业务字段' },
  { id: 'pod', label: '目的港', key: 'pod_id', type: 'reference', visible: true, role: '业务字段' },
  { id: 'trade-term', label: '贸易条款', key: 'trade_term', type: 'select', visible: true, role: '字典字段' },
  { id: 'notes', label: '操作备注', key: 'notes', type: 'text', visible: true, helper: '内部业务人员可见', role: '扩展字段' },
]

const initialColumns: Column[] = [
  { id: 'container-no', label: '箱号', key: 'container_no', width: 156, visible: true },
  { id: 'container-type', label: '箱型', key: 'container_type', width: 110, visible: true },
  { id: 'weight', label: '毛重 (KG)', key: 'weight', width: 122, visible: true },
  { id: 'packages', label: '件数', key: 'packages', width: 90, visible: true },
  { id: 'seal-no', label: '封条号', key: 'seal_no', width: 140, visible: true },
]

const fieldTypeLabel: Record<FieldType, string> = {
  text: '单行文本',
  reference: '引用选择',
  date: '日期选择',
  select: '固定字典',
  number: '数值',
}

const initialRows = [
  { id: '1', container_no: 'MSCU 482913 6', container_type: '40HQ', weight: '12,480', packages: '32', seal_no: 'SL-902183' },
  { id: '2', container_no: 'MSCU 482917 0', container_type: '40HQ', weight: '10,260', packages: '26', seal_no: 'SL-902184' },
]

function IconButton({ label, children, onClick, active = false }: { label: string; children: ReactNode; onClick?: () => void; active?: boolean }) {
  return <button className={`icon-button ${active ? 'is-active' : ''}`} aria-label={label} title={label} onClick={onClick}>{children}</button>
}

function SortableField({ field, selected, onSelect }: { field: Field; selected: boolean; onSelect: () => void }) {
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: `field:${field.id}`, data: { kind: 'field', id: field.id } })
  const style: CSSProperties = { transform: CSS.Transform.toString(transform), transition }
  return (
    <div ref={setNodeRef} style={style} className={`field-card ${selected ? 'is-selected' : ''} ${isDragging ? 'is-dragging' : ''}`} onClick={onSelect}>
      <button className="drag-handle" {...attributes} {...listeners} aria-label={`拖动${field.label}`}><GripVertical size={15} /></button>
      <div className="field-card-main">
        <div className="field-card-title"><span>{field.label}</span>{field.required && <span className="required-mark">必填</span>}</div>
        <div className="field-card-meta"><code>{field.key}</code><span>{fieldTypeLabel[field.type]}</span></div>
      </div>
      <span className={`visibility-dot ${field.visible ? 'on' : 'off'}`} title={field.visible ? '可见' : '已隐藏'}>{field.visible ? <Eye size={14} /> : <EyeOff size={14} />}</span>
    </div>
  )
}

function SortableColumn({ column, selected, onSelect }: { column: Column; selected: boolean; onSelect: () => void }) {
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: `column:${column.id}`, data: { kind: 'column', id: column.id } })
  const style: CSSProperties = { transform: CSS.Transform.toString(transform), transition, width: column.width }
  return (
    <div ref={setNodeRef} style={style} className={`column-chip ${selected ? 'is-selected' : ''} ${isDragging ? 'is-dragging' : ''}`} onClick={onSelect}>
      <button className="column-grip" {...attributes} {...listeners} aria-label={`拖动${column.label}`}><GripVertical size={14} /></button>
      <span>{column.label}</span>
      <small>{column.width}</small>
    </div>
  )
}

function PaletteField({ field, onAdd }: { field: Field; onAdd: () => void }) {
  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({ id: `palette:${field.id}`, data: { kind: 'palette', field } })
  const onClick = (event: React.MouseEvent) => { event.stopPropagation(); onAdd() }
  return (
    <button ref={setNodeRef} className={`palette-item ${isDragging ? 'is-dragging' : ''}`} {...attributes} {...listeners} onClick={onClick}>
      <span className="palette-icon"><Plus size={14} /></span><span>{field.label}</span><small>{fieldTypeLabel[field.type]}</small>
    </button>
  )
}

function App() {
  const [mode, setMode] = useState<'builder' | 'preview'>('builder')
  const [activeNav, setActiveNav] = useState<'builder' | 'runtime' | 'releases'>('builder')
  const [fields, setFields] = useState(initialFields)
  const [columns, setColumns] = useState(initialColumns)
  const [selected, setSelected] = useState<{ kind: 'field' | 'column'; id: string }>({ kind: 'field', id: 'carrier' })
  const [toast, setToast] = useState<Toast | null>(null)
  const [showHelp, setShowHelp] = useState(false)
  const [showReleases, setShowReleases] = useState(false)
  const [release, setRelease] = useState(42)
  const [candidate, setCandidate] = useState(false)
  const [rows, setRows] = useState(initialRows)
  const [activeId, setActiveId] = useState<string | null>(null)
  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } }))

  useEffect(() => {
    const saved = window.localStorage.getItem('fms-mvp-layout')
    if (saved) {
      try {
        const data = JSON.parse(saved) as { fields?: Field[]; columns?: Column[]; release?: number }
        if (data.fields) setFields(data.fields)
        if (data.columns) setColumns(data.columns)
        if (data.release) setRelease(data.release)
      } catch { /* Use the stable fixture when local data is incomplete. */ }
    }
  }, [])

  const visibleFields = useMemo(() => fields.filter((field) => field.visible), [fields])
  const activeItem = selected.kind === 'field' ? fields.find((field) => field.id === selected.id) : columns.find((column) => column.id === selected.id)

  function notify(title: string, message: string) {
    setToast({ title, message })
    window.setTimeout(() => setToast(null), 3200)
  }

  function saveCandidate() {
    window.localStorage.setItem('fms-mvp-layout', JSON.stringify({ fields, columns, release }))
    setCandidate(true)
    notify('候选版本已保存', '变更已保存到 Release 42 · 候选版本，可进入预览验证。')
  }

  function publish() {
    const next = release + 1
    window.localStorage.setItem('fms-mvp-layout', JSON.stringify({ fields, columns, release: next }))
    setRelease(next)
    setCandidate(false)
    notify('配置已发布', `Release ${next} 已激活，当前租户运行时已刷新。`)
  }

  function rollback() {
    setFields(initialFields)
    setColumns(initialColumns)
    setCandidate(false)
    window.localStorage.setItem('fms-mvp-layout', JSON.stringify({ fields: initialFields, columns: initialColumns, release: 41 }))
    setRelease(41)
    notify('已回滚配置', '当前运行时已切换回 Release 41。')
  }

  function addField(field: Field) {
    if (fields.some((item) => item.id === field.id)) {
      setSelected({ kind: 'field', id: field.id })
      return
    }
    setFields((current) => [...current, { ...field, visible: true }])
    setSelected({ kind: 'field', id: field.id })
    notify('字段已加入表单', `${field.label} 已添加到主表表单。`)
  }

  function handleDragStart(event: DragStartEvent) { setActiveId(String(event.active.id)) }
  function handleDragCancel() { setActiveId(null) }
  function handleDragEnd(event: DragEndEvent) {
    setActiveId(null)
    const { active, over } = event
    if (!over || active.id === over.id) return
    const activeData = active.data.current
    if (activeData?.kind === 'palette') {
      addField(activeData.field as Field)
      return
    }
    const activeKind = String(active.id).split(':')[0]
    const overKind = String(over.id).split(':')[0]
    if (activeKind !== overKind) return
    if (activeKind === 'field') {
      const oldIndex = fields.findIndex((item) => `field:${item.id}` === active.id)
      const newIndex = fields.findIndex((item) => `field:${item.id}` === over.id)
      if (oldIndex !== -1 && newIndex !== -1) setFields((current) => arrayMove(current, oldIndex, newIndex))
    }
    if (activeKind === 'column') {
      const oldIndex = columns.findIndex((item) => `column:${item.id}` === active.id)
      const newIndex = columns.findIndex((item) => `column:${item.id}` === over.id)
      if (oldIndex !== -1 && newIndex !== -1) setColumns((current) => arrayMove(current, oldIndex, newIndex))
    }
  }

  function updateField(patch: Partial<Field>) {
    if (selected.kind !== 'field') return
    setFields((current) => current.map((field) => field.id === selected.id ? { ...field, ...patch } : field))
  }

  function updateColumn(patch: Partial<Column>) {
    if (selected.kind !== 'column') return
    setColumns((current) => current.map((column) => column.id === selected.id ? { ...column, ...patch } : column))
  }

  function selectNav(nav: typeof activeNav) {
    setActiveNav(nav)
    if (nav === 'builder') { setMode('builder'); return }
    if (nav === 'runtime') { setMode('preview'); return }
    setShowReleases(true)
  }

  return (
    <div className="app-shell">
      <header className="topbar">
        <div className="brand-block"><div className="brand-mark">F</div><div><div className="brand-name">FMS <span>/</span> 工作台</div><div className="brand-subtitle">元数据工作台</div></div></div>
        <div className="breadcrumb"><span>海运</span><ChevronRight size={14} /><strong>订舱</strong><span className="slash">/</span><span className="muted">默认编辑表单</span></div>
        <div className="topbar-actions"><span className="local-badge"><span className="status-pulse" /> 本地演示</span><IconButton label="帮助" onClick={() => setShowHelp(true)}><CircleHelp size={17} /></IconButton><div className="avatar">YL</div></div>
      </header>

      <div className="workspace">
        <aside className="sidebar">
          <div className="sidebar-section-label">工作区</div>
          <button className={`nav-item ${activeNav === 'builder' ? 'active' : ''}`} onClick={() => selectNav('builder')}><LayoutDashboard size={17} /><span>表单设计器</span><span className="nav-count">01</span></button>
          <button className={`nav-item ${activeNav === 'runtime' ? 'active' : ''}`} onClick={() => selectNav('runtime')}><Play size={17} /><span>运行时预览</span></button>
          <button className={`nav-item ${activeNav === 'releases' ? 'active' : ''}`} onClick={() => selectNav('releases')}><FileClock size={17} /><span>版本历史</span><span className="nav-dot" /></button>
          <div className="sidebar-divider" />
          <div className="sidebar-section-label with-action"><span>模块</span><IconButton label="添加模块"><Plus size={14} /></IconButton></div>
          <div className="module-tree"><button className="tree-item open"><ChevronDown size={14} /><Box size={16} className="tree-icon ocean" /><span>海运</span></button><button className="tree-item child selected"><Table2 size={15} /><span>订舱</span><span className="tree-state">已发布</span></button><button className="tree-item child"><PackageCheck size={15} /><span>海运单</span></button><button className="tree-item child"><Columns3 size={15} /><span>集装箱</span></button><button className="tree-item"><ChevronRight size={14} /><Box size={16} className="tree-icon finance" /><span>财务</span></button><button className="tree-item"><ChevronRight size={14} /><Box size={16} className="tree-icon master" /><span>基础资料</span></button></div>
          <div className="sidebar-footer"><div className="tenant-row"><div className="tenant-icon"><Database size={16} /></div><div><span className="tenant-label">当前租户</span><strong>北极星物流</strong></div><ChevronDown size={15} /></div><div className="sidebar-footer-links"><span><ShieldCheck size={13} /> 独立业务数据库</span><span>org_northstar</span></div></div>
        </aside>

        <main className="main-content">
          <div className="page-head"><div><div className="eyebrow"><span className="eyebrow-line" /> 配置 / 实体</div><h1>订舱工作台</h1><p>配置订舱表单和集装箱子表，无需编写代码。</p></div><div className="head-actions"><button className="button subtle" onClick={() => setMode(mode === 'builder' ? 'preview' : 'builder')}><Play size={15} /> {mode === 'builder' ? '预览运行时' : '返回设计器'}</button><button className="button outline" onClick={saveCandidate}><Save size={15} /> 保存候选版本</button><button className="button primary" onClick={publish}><PackageCheck size={15} /> 发布 <ChevronDown size={14} /></button></div></div>
          <div className="mode-strip"><div className="mode-tabs"><button className={mode === 'builder' ? 'active' : ''} onClick={() => setMode('builder')}><Settings2 size={15} /> 设计器</button><button className={mode === 'preview' ? 'active' : ''} onClick={() => setMode('preview')}><Play size={15} /> 运行时预览</button></div><div className="release-summary"><span className="release-label"><span className="release-dot" /> 当前版本</span><strong>Release {release}</strong><span className="release-divider" /><span>{candidate ? '候选版本已保存' : '所有变更已发布'}</span></div></div>

          {mode === 'builder' ? <DndContext sensors={sensors} onDragStart={handleDragStart} onDragCancel={handleDragCancel} onDragEnd={handleDragEnd}>
            <div className="builder-grid">
              <section className="builder-panel palette-panel"><div className="panel-heading"><div><span className="panel-kicker">组件</span><h2>字段面板</h2></div><span className="count-chip">{fields.length} 个字段</span></div><p className="panel-intro">将字段拖入画布，或点击字段将其加入表单。</p><div className="palette-search"><ListFilter size={15} /><input placeholder="搜索字段" /></div><div className="palette-group"><div className="palette-group-title">订舱字段 <span>8</span></div>{fields.map((field) => <PaletteField key={field.id} field={field} onAdd={() => addField(field)} />)}</div><div className="palette-divider" /><div className="palette-group"><div className="palette-group-title">关系 <span>01</span></div><button className="relation-palette"><span className="relation-icon"><Table2 size={15} /></span><span><strong>集装箱</strong><small>一对多 · 可编辑表格</small></span><Plus size={15} /></button></div><button className="new-field-button" onClick={() => notify('字段设计器', 'MVP 中可从字段面板添加标准字段类型。')}><Plus size={16} /> 新建字段</button></section>

              <section className="builder-panel canvas-panel"><div className="panel-heading canvas-heading"><div><span className="panel-kicker">表单 / OCEAN.BOOKING</span><h2>默认编辑表单</h2></div><div className="canvas-tools"><span className="saved-indicator"><span className="saved-check"><Check size={12} /></span> 刚刚保存</span><IconButton label="复制表单"><Copy size={16} /></IconButton><IconButton label="更多操作"><MoreHorizontal size={18} /></IconButton></div></div><div className="canvas-meta"><span><Layers3 size={14} /> 2 个分组</span><span><Columns3 size={14} /> 每行 2 个字段</span><span><Table2 size={14} /> 1 个关系表</span><span><LockKeyhole size={14} /> 已接入权限</span></div><div className="form-canvas"><div className="canvas-section"><div className="section-heading"><div><span className="section-number">01</span><div><strong>订舱信息</strong><small>拖拽字段调整行和列</small></div></div><div className="section-heading-actions"><span className="layout-chip"><Columns3 size={13} /> 2 列布局</span><button className="section-menu"><MoreHorizontal size={17} /></button></div></div><div className="drop-zone"><SortableContext items={fields.map((field) => `field:${field.id}`)} strategy={rectSortingStrategy}>{fields.map((field) => <SortableField key={field.id} field={field} selected={selected.kind === 'field' && selected.id === field.id} onSelect={() => setSelected({ kind: 'field', id: field.id })} />)}</SortableContext><div className="drop-hint"><Plus size={15} /><span>将字段拖到这里，自动放入当前行</span></div></div></div><div className="canvas-section relation-section"><div className="section-heading"><div><span className="section-number warm">02</span><div><strong>集装箱</strong><small>一对多关系 · 可编辑表格</small></div></div><div className="relation-actions"><span className="relation-status"><span className="green-dot" /> 可编辑</span><button className="section-menu"><MoreHorizontal size={17} /></button></div></div><div className="relation-config-line"><span><Database size={14} /> ocean.container</span><span><Columns3 size={14} /> {columns.filter((column) => column.visible).length} 个可见列</span><button onClick={() => notify('子表设置', '子表配置已绑定到 ocean.booking.containers。')}>配置关系 <ArrowRight size={14} /></button></div><div className="columns-drop-zone"><SortableContext items={columns.map((column) => `column:${column.id}`)} strategy={horizontalListSortingStrategy}>{columns.filter((column) => column.visible).map((column) => <SortableColumn key={column.id} column={column} selected={selected.kind === 'column' && selected.id === column.id} onSelect={() => setSelected({ kind: 'column', id: column.id })} />)}</SortableContext><div className="column-add"><Plus size={15} /></div></div><div className="relation-preview-table"><div className="preview-row preview-header">{columns.filter((column) => column.visible).map((column) => <span key={column.id} style={{ width: column.width }}>{column.label}</span>)}<span className="row-actions-head" /></div>{initialRows.slice(0, 2).map((row) => <div className="preview-row" key={row.id}>{columns.filter((column) => column.visible).map((column) => <span key={column.id} style={{ width: column.width }}>{row[column.key as keyof typeof row]}</span>)}<span className="row-actions"><MoreHorizontal size={15} /></span></div>)}</div><button className="add-row-button" onClick={() => notify('子表配置', '运行时可以在此关系区域新增集装箱。')}><Plus size={15} /> 新增集装箱行</button></div></div></section>

              <aside className="builder-panel inspector-panel"><div className="panel-heading"><div><span className="panel-kicker">属性面板</span><h2>配置属性</h2></div><IconButton label="关闭属性"><X size={17} /></IconButton></div>{activeItem ? <>{selected.kind === 'field' ? <><div className="selected-object"><div className="object-icon field-object"><Settings2 size={17} /></div><div><strong>{(activeItem as Field).label}</strong><code>{(activeItem as Field).key}</code></div><span className="object-type">字段</span></div><div className="inspector-form"><label>显示名称<input value={(activeItem as Field).label} onChange={(event) => updateField({ label: event.target.value })} /></label><label>字段类型<div className="select-like"><span>{fieldTypeLabel[(activeItem as Field).type]}</span><ChevronDown size={15} /></div></label><label className="switch-row"><span><strong>在表单中显示</strong><small>仅控制默认布局</small></span><button className={`switch ${((activeItem as Field).visible) ? 'on' : ''}`} onClick={() => updateField({ visible: !(activeItem as Field).visible })}><span /></button></label><label className="switch-row"><span><strong>必填字段</strong><small>保存前校验</small></span><button className={`switch ${((activeItem as Field).required) ? 'on' : ''}`} onClick={() => updateField({ required: !(activeItem as Field).required })}><span /></button></label></div><div className="inspector-divider" /><div className="permission-callout"><div className="callout-icon"><ShieldCheck size={16} /></div><div><strong>已接入权限</strong><p>运行时会按角色检查字段权限。当前字段对<b>操作团队</b>可见。</p><button onClick={() => notify('字段权限', '已打开 auth_field_policy 配置。')}>编辑字段权限 <ArrowRight size={13} /></button></div></div><div className="inspector-note"><LockKeyhole size={14} /><span>后端写入模式：<b>{(activeItem as Field).id === 'booking-no' ? 'system' : 'direct'}</b></span></div></> : <><div className="selected-object"><div className="object-icon table-object"><Table2 size={17} /></div><div><strong>{(activeItem as Column).label}</strong><code>{(activeItem as Column).key}</code></div><span className="object-type">列</span></div><div className="inspector-form"><label>列名称<input value={(activeItem as Column).label} onChange={(event) => updateColumn({ label: event.target.value })} /></label><label>列宽 <div className="number-input"><input type="number" value={(activeItem as Column).width} onChange={(event) => updateColumn({ width: Number(event.target.value) })} /><span>px</span></div></label><label className="switch-row"><span><strong>在表格中显示</strong><small>布局之后仍会检查角色权限</small></span><button className={`switch ${((activeItem as Column).visible) ? 'on' : ''}`} onClick={() => updateColumn({ visible: !(activeItem as Column).visible })}><span /></button></label></div><div className="inspector-divider" /><div className="permission-callout amber"><div className="callout-icon"><Eye size={16} /></div><div><strong>导出权限</strong><p>列可以在表格中显示，同时限制导出权限。</p><button onClick={() => notify('列权限', '导出权限配置入口已准备。')}>配置权限 <ArrowRight size={13} /></button></div></div></>}</> : <div className="empty-inspector"><Settings2 size={22} /><p>选择字段或列查看配置。</p></div>}</aside>
            </div><DragOverlay>{activeId ? <div className="drag-overlay"><GripVertical size={15} /> {activeId.split(':')[1]}</div> : null}</DragOverlay>
          </DndContext> : <RuntimePreview fields={visibleFields} columns={columns.filter((column) => column.visible)} rows={rows} setRows={setRows} onBack={() => setMode('builder')} onNotify={notify} />}
        </main>
      </div>
      {showHelp && <div className="modal-backdrop" onClick={() => setShowHelp(false)}><div className="help-modal" onClick={(event) => event.stopPropagation()}><div className="modal-title"><div><span className="panel-kicker">关于本演示</span><h2>元数据驱动的配置流程</h2></div><IconButton label="关闭" onClick={() => setShowHelp(false)}><X size={17} /></IconButton></div><p>这是一个不接后端的 FMS 配置运行时演示。左侧字段可以拖入表单，中间区域支持排序，主子表列和运行时预览共用同一份本地元数据。</p><div className="help-points"><span><Check size={14} /> 候选版本</span><span><Check size={14} /> 主子表单</span><span><Check size={14} /> 字段权限</span></div><button className="button primary full" onClick={() => setShowHelp(false)}>知道了</button></div></div>}
      {showReleases && <div className="modal-backdrop" onClick={() => setShowReleases(false)}><div className="release-modal" onClick={(event) => event.stopPropagation()}><div className="modal-title"><div><span className="panel-kicker">配置历史</span><h2>版本历史</h2></div><IconButton label="关闭" onClick={() => setShowReleases(false)}><X size={17} /></IconButton></div><div className="release-list"><div className="release-item current"><div className="release-icon"><Check size={15} /></div><div><strong>Release {release}</strong><span>当前版本 · 刚刚激活</span></div><span className="release-pill">当前</span></div><div className="release-item"><div className="release-icon old"><FileClock size={15} /></div><div><strong>Release 41</strong><span>上一版本 · 2 小时前</span></div><button className="text-button" onClick={rollback}><RotateCcw size={13} /> 回滚</button></div></div><p className="release-note">回滚会将本地演示切换到上一份元数据快照，不会影响生产数据。</p></div></div>}
      {toast && <div className="toast"><div className="toast-icon"><Check size={15} /></div><div><strong>{toast.title}</strong><span>{toast.message}</span></div></div>}
    </div>
  )
}

function RuntimePreview({ fields, columns, rows, setRows, onBack, onNotify }: { fields: Field[]; columns: Column[]; rows: typeof initialRows; setRows: React.Dispatch<React.SetStateAction<typeof initialRows>>; onBack: () => void; onNotify: (title: string, message: string) => void }) {
  const addRow = () => { setRows((current) => [...current, { id: String(current.length + 1), container_no: `MSCU 48292${current.length}`, container_type: '40HQ', weight: '—', packages: '—', seal_no: '—' }]); onNotify('子表行已新增', '新的集装箱行已加入当前草稿。') }
  return <section className="runtime-shell"><div className="runtime-topline"><div><span className="eyebrow"><span className="eyebrow-line" /> 运行时预览 / 候选版本</span><h2>新建订舱</h2><p>当前以<b>操作团队</b>身份预览 Release 42 · 候选版本。</p></div><div className="runtime-actions"><button className="button subtle" onClick={onBack}><ArrowLeft size={15} /> 返回设计器</button><button className="button outline" onClick={() => onNotify('草稿已保存', '模拟保存成功，尚未触发业务动作。')}><Save size={15} /> 保存草稿</button><button className="button primary" onClick={() => onNotify('动作已执行', '确认订舱需要满足 status = draft。')}><Check size={15} /> 确认订舱</button></div></div><div className="runtime-card"><div className="runtime-card-head"><div><span className="panel-kicker">OCEAN.BOOKING</span><h3>订舱信息</h3></div><span className="draft-chip">草稿</span></div><div className="runtime-form-grid">{fields.slice(0, 6).map((field) => <label className="runtime-field" key={field.id}><span>{field.label}{field.required && <b>*</b>}</span>{renderRuntimeInput(field)}</label>)}</div><div className="runtime-divider" /><div className="runtime-card-head compact-head"><div><span className="panel-kicker">关系 / OCEAN.CONTAINER</span><h3>集装箱 <small>{rows.length} 行</small></h3></div><button className="button small outline" onClick={addRow}><Plus size={14} /> 新增集装箱</button></div><div className="runtime-table-wrap"><table className="runtime-table"><thead><tr>{columns.map((column) => <th key={column.id} style={{ width: column.width }}>{column.label}</th>)}<th aria-label="操作" /></tr></thead><tbody>{rows.map((row) => <tr key={row.id}>{columns.map((column) => <td key={column.id}><input value={row[column.key as keyof typeof row]} onChange={(event) => setRows((current) => current.map((item) => item.id === row.id ? { ...item, [column.key]: event.target.value } : item))} /></td>)}<td><IconButton label="更多行操作"><MoreHorizontal size={16} /></IconButton></td></tr>)}</tbody></table></div></div><div className="runtime-footnote"><ShieldCheck size={15} /><span>字段可见性和导出权限由当前用户的权限快照统一决定。</span><button onClick={() => onNotify('权限解释', '操作团队可以查看所有订舱字段，导出权限单独控制。')}>解释权限 <ArrowRight size={13} /></button></div></section>
}

function renderRuntimeInput(field: Field) {
  if (field.type === 'reference') return <div className="input-wrap"><input className="runtime-input" value={field.id === 'carrier' ? '长荣海运' : field.id === 'customer' ? '北极星贸易' : '请选择'} readOnly /><ChevronDown size={15} /></div>
  if (field.type === 'date') return <input className="runtime-input" value="2026-09-18" readOnly />
  if (field.type === 'select') return <div className="input-wrap"><input className="runtime-input" value="FOB" readOnly /><ChevronDown size={15} /></div>
  return <input className="runtime-input" value={field.id === 'booking-no' ? 'BK-2026-0918-0084' : ''} placeholder={field.label} readOnly={field.id === 'booking-no'} />
}

export default App