import { useEffect, useMemo, useRef, useState } from 'react'
import { get, set } from 'idb-keyval'
import { api, apiBlob, apiZip } from './api'
import type {
  ApiKeySummary,
  Block,
  BlockType,
  TemplateDocument,
  TemplateRecord,
  TemplateSummary,
  TemplateType
} from './types'

type Screen = 'templates' | 'editor' | 'preview' | 'data' | 'use'
type SaveState = 'saved' | 'saving' | 'offline'
type Filter = 'all' | TemplateType

type Props = {
  user: {
    name?: string
    preferred_username?: string
    email?: string
  }
}

type CreatedApiKey = ApiKeySummary & {
  api_key: string
}

const defaults: Record<BlockType, Record<string, unknown>> = {
  heading: { text: 'New heading' },
  text: { text: 'Write something useful.' },
  kpi: { label: 'Metric', value: '{{summary.total}}' },
  button: { text: 'Open link', url: 'https://example.com' },
  image: { url: 'https://placehold.co/800x360', alt: 'Image' },
  divider: {},
  table: {
    rowsPath: 'items',
    columns: [
      { label: 'Name', key: 'name' },
      { label: 'Value', key: 'value' }
    ]
  }
}

const blockLabels: Record<BlockType, string> = {
  heading: 'Heading',
  text: 'Text',
  kpi: 'KPI',
  button: 'Button',
  image: 'Image',
  divider: 'Divider',
  table: 'Table'
}

function flatten(value: unknown, prefix = ''): string[] {
  if (!value || typeof value !== 'object' || Array.isArray(value)) return prefix ? [prefix] : []
  const out: string[] = []
  for (const [key, child] of Object.entries(value as Record<string, unknown>)) {
    const path = prefix ? `${prefix}.${key}` : key
    if (child && typeof child === 'object' && !Array.isArray(child)) out.push(...flatten(child, path))
    else out.push(path)
  }
  return out
}

function blockSummary(block: Block) {
  if (block.type === 'divider') return 'Divider'
  if (block.type === 'table') return `Rows: ${String(block.props.rowsPath || 'items')}`
  if (block.type === 'kpi') return `${String(block.props.label || 'Metric')} · ${String(block.props.value || '')}`
  return String(block.props.text || block.props.alt || blockLabels[block.type])
}

function formatDate(value?: string | null) {
  if (!value) return 'Never'
  return new Date(value).toLocaleString([], { dateStyle: 'medium', timeStyle: 'short' })
}

export function App({ user }: Props) {
  const [screen, setScreen] = useState<Screen>('templates')
  const [templates, setTemplates] = useState<TemplateSummary[]>([])
  const [active, setActive] = useState<TemplateRecord | null>(null)
  const [templateDoc, setTemplateDoc] = useState<TemplateDocument>({ blocks: [] })
  const [sampleData, setSampleData] = useState<Record<string, unknown>>({})
  const [selectedId, setSelectedId] = useState<string | null>(null)
  const [addOpen, setAddOpen] = useState(false)
  const [createOpen, setCreateOpen] = useState(false)
  const [createName, setCreateName] = useState('')
  const [createType, setCreateType] = useState<TemplateType>('report')
  const [saveState, setSaveState] = useState<SaveState>('saved')
  const [previewHtml, setPreviewHtml] = useState('')
  const [previewDevice, setPreviewDevice] = useState<'mobile' | 'desktop'>('mobile')
  const [dataText, setDataText] = useState('{}')
  const [error, setError] = useState('')
  const [filter, setFilter] = useState<Filter>('all')
  const [search, setSearch] = useState('')
  const [apiKeys, setApiKeys] = useState<ApiKeySummary[]>([])
  const [newKeyName, setNewKeyName] = useState('')
  const [createdKey, setCreatedKey] = useState<CreatedApiKey | null>(null)
  const [copied, setCopied] = useState('')
  const [packImporting, setPackImporting] = useState(false)
  const packFileInput = useRef<HTMLInputElement | null>(null)

  const loadedId = useRef<string | null>(null)
  const timer = useRef<number | undefined>(undefined)

  const selected = templateDoc.blocks.find(block => block.id === selectedId) || null
  const paths = useMemo(() => flatten(sampleData), [sampleData])
  const visibleTemplates = useMemo(() => {
    const needle = search.trim().toLowerCase()
    return templates.filter(template => {
      if (filter !== 'all' && template.type !== filter) return false
      if (!needle) return true
      return `${template.name} ${template.template_key}`.toLowerCase().includes(needle)
    })
  }, [templates, filter, search])

  const counts = useMemo(() => ({
    total: templates.length,
    report: templates.filter(template => template.type === 'report').length,
    email: templates.filter(template => template.type === 'email').length
  }), [templates])

  async function refreshTemplates() {
    setTemplates(await api<TemplateSummary[]>('/api/templates'))
  }

  async function refreshApiKeys() {
    setApiKeys(await api<ApiKeySummary[]>('/api/api-keys'))
  }

  useEffect(() => {
    void refreshTemplates().catch(err => setError(String(err)))
  }, [])

  async function saveNow() {
    if (!active) return
    await api(`/api/templates/${active.id}/draft`, {
      method: 'PUT',
      body: JSON.stringify({ document: templateDoc, sampleData })
    })
  }

  useEffect(() => {
    if (!active || loadedId.current !== active.id) return
    window.clearTimeout(timer.current)
    setSaveState('saving')
    void set(`template-studio:${active.id}`, { document: templateDoc, sampleData, savedAt: Date.now() })

    timer.current = window.setTimeout(async () => {
      try {
        await saveNow()
        setSaveState('saved')
      } catch {
        setSaveState('offline')
      }
    }, 700)

    return () => window.clearTimeout(timer.current)
  }, [templateDoc, sampleData, active?.id])

  async function openTemplate(id: string) {
    setError('')
    const remote = await api<TemplateRecord>(`/api/templates/${id}`)
    const local = await get<{ document: TemplateDocument; sampleData: Record<string, unknown> }>(
      `template-studio:${id}`
    )
    loadedId.current = id
    setActive(remote)
    setTemplateDoc(local?.document || remote.draft_document)
    setSampleData(local?.sampleData || remote.sample_data || {})
    setDataText(JSON.stringify(local?.sampleData || remote.sample_data || {}, null, 2))
    setSelectedId(null)
    setCreatedKey(null)
    setScreen('editor')
  }

  async function createTemplate() {
    if (!createName.trim()) return
    const created = await api<TemplateRecord>('/api/templates', {
      method: 'POST',
      body: JSON.stringify({ name: createName.trim(), type: createType })
    })
    setCreateOpen(false)
    setCreateName('')
    await refreshTemplates()
    await openTemplate(created.id)
  }

  function addBlock(type: BlockType) {
    const block: Block = { id: crypto.randomUUID(), type, props: structuredClone(defaults[type]) }
    setTemplateDoc(current => ({ ...current, blocks: [...current.blocks, block] }))
    setAddOpen(false)
    setSelectedId(block.id)
  }

  function updateBlock(id: string, patch: Record<string, unknown>) {
    setTemplateDoc(current => ({
      ...current,
      blocks: current.blocks.map(block =>
        block.id === id ? { ...block, props: { ...block.props, ...patch } } : block
      )
    }))
  }

  function updateTheme(patch: Record<string, unknown>) {
    setTemplateDoc(current => ({
      ...current,
      theme: { ...(current.theme || {}), ...patch }
    }))
  }

  function themeNumber(key: string, fallback: number) {
    const value = Number(templateDoc.theme?.[key])
    return Number.isFinite(value) ? value : fallback
  }

  function moveBlock(id: string, direction: -1 | 1) {
    setTemplateDoc(current => {
      const blocks = [...current.blocks]
      const index = blocks.findIndex(block => block.id === id)
      const target = index + direction
      if (index < 0 || target < 0 || target >= blocks.length) return current
      ;[blocks[index], blocks[target]] = [blocks[target], blocks[index]]
      return { ...current, blocks }
    })
  }

  function removeBlock(id: string) {
    setTemplateDoc(current => ({ ...current, blocks: current.blocks.filter(block => block.id !== id) }))
    setSelectedId(null)
  }

  async function publish() {
    if (!active) return
    await saveNow()
    const updated = await api<TemplateRecord>(`/api/templates/${active.id}/publish`, { method: 'POST' })
    setActive(updated)
    setSaveState('saved')
    await refreshTemplates()
  }

  async function refreshPreview() {
    if (!active) return
    await saveNow()
    const format = active.type === 'email' ? 'email' : 'html'
    const result = await api<{ html: string }>(`/api/templates/${active.id}/render`, {
      method: 'POST',
      body: JSON.stringify({ format, data: sampleData })
    })
    setPreviewHtml(result.html)
  }

  async function goPreview() {
    setScreen('preview')
    try {
      await refreshPreview()
    } catch (err) {
      setError(String(err))
    }
  }

  async function goUse() {
    setScreen('use')
    try {
      await refreshApiKeys()
    } catch (err) {
      setError(String(err))
    }
  }

  async function downloadPdf() {
    if (!active) return
    await saveNow()
    const blob = await apiBlob(`/api/templates/${active.id}/render`, {
      method: 'POST',
      body: JSON.stringify({ format: 'pdf', data: sampleData })
    })
    const href = URL.createObjectURL(blob)
    const link = window.document.createElement('a')
    link.href = href
    link.download = `${active.name.replace(/[^a-z0-9]+/gi, '-').toLowerCase() || 'report'}.pdf`
    link.click()
    URL.revokeObjectURL(href)
  }

  function applyData() {
    try {
      const parsed = JSON.parse(dataText)
      setSampleData(parsed)
      setError('')
    } catch {
      setError('Sample data must be valid JSON.')
    }
  }

  function bindingField(block: Block) {
    if (block.type === 'kpi') return 'value'
    if (block.type === 'image') return 'alt'
    if (block.type === 'table' || block.type === 'divider') return null
    return 'text'
  }

  function insertBinding(path: string) {
    if (!selected) return
    const field = bindingField(selected)
    if (!field) return
    updateBlock(selected.id, { [field]: `${String(selected.props[field] || '')}{{${path}}}` })
  }

  async function createApiKey() {
    if (!newKeyName.trim()) return
    const created = await api<CreatedApiKey>('/api/api-keys', {
      method: 'POST',
      body: JSON.stringify({ name: newKeyName.trim() })
    })
    setCreatedKey(created)
    setNewKeyName('')
    await refreshApiKeys()
  }

  async function revokeApiKey(id: string) {
    await api<void>(`/api/api-keys/${id}`, { method: 'DELETE' })
    setCreatedKey(current => current?.id === id ? null : current)
    await refreshApiKeys()
  }

  async function copy(value: string, label: string) {
    await navigator.clipboard.writeText(value)
    setCopied(label)
    window.setTimeout(() => setCopied(''), 1400)
  }

  async function importTemplatePack(file?: File) {
    if (!file) return
    if (!file.name.toLowerCase().endsWith('.zip')) {
      setError('Template packs must be ZIP files.')
      return
    }

    setPackImporting(true)
    setError('')
    try {
      const imported = await apiZip<{ template: TemplateRecord; asset_count: number }>(
        '/api/template-packs/import',
        file
      )
      await refreshTemplates()
      await openTemplate(imported.template.id)
    } catch (err) {
      setError(String(err))
    } finally {
      setPackImporting(false)
      if (packFileInput.current) packFileInput.current.value = ''
    }
  }

  if (screen === 'templates') {
    return (
      <main className="app">
        <header className="topbar landing">
          <div>
            <div className="eyebrow">ARROWSTACK</div>
            <h1>Template Studio</h1>
          </div>
          <button className="circle primary" onClick={() => setCreateOpen(true)} aria-label="New template">＋</button>
        </header>

        <section className="hero">
          <div>
            <span className="hero-kicker">Design once. Pull anywhere.</span>
            <h2>Email and report templates for your apps.</h2>
            <p>Build on mobile, publish a version, then consume it over an authenticated API.</p>
          </div>
          <div className="hero-stats">
            <button onClick={() => setFilter('all')}><strong>{counts.total}</strong><span>All</span></button>
            <button onClick={() => setFilter('report')}><strong>{counts.report}</strong><span>Reports</span></button>
            <button onClick={() => setFilter('email')}><strong>{counts.email}</strong><span>Emails</span></button>
          </div>
        </section>

        <section className="library-controls">
          <div className="search-field">
            <span>⌕</span>
            <input value={search} onChange={event => setSearch(event.target.value)} placeholder="Search templates" />
          </div>
          <div className="filter-row">
            {(['all', 'report', 'email'] as Filter[]).map(value => (
              <button key={value} className={filter === value ? 'active' : ''} onClick={() => setFilter(value)}>
                {value === 'all' ? 'All' : value === 'report' ? 'Reports' : 'Emails'}
              </button>
            ))}
          </div>
          <div className="pack-actions">
            <button
              className="pack-import"
              disabled={packImporting}
              onClick={() => packFileInput.current?.click()}
            >
              {packImporting ? 'Importing…' : '✦ Import AI pack'}
            </button>
            <a href="/api/template-packs/spec" target="_blank" rel="noreferrer">Pack format</a>
            <input
              ref={packFileInput}
              className="visually-hidden"
              type="file"
              accept=".zip,application/zip,application/x-zip-compressed"
              onChange={event => void importTemplatePack(event.target.files?.[0])}
            />
          </div>
        </section>

        {error && <div className="error-banner">{error}</div>}

        <section className="template-list">
          {visibleTemplates.map(template => (
            <button key={template.id} className="template-card refined" onClick={() => void openTemplate(template.id)}>
              <span className={`template-icon ${template.type}`}>{template.type === 'email' ? '✉' : '▤'}</span>
              <span className="template-card-body">
                <span className="template-card-topline">
                  <strong>{template.name}</strong>
                  <span className={`status-dot ${template.published_version ? 'published' : 'draft'}`} />
                </span>
                <span className="template-key">{template.template_key}</span>
                <span className="muted">
                  {template.published_version ? `Published v${template.published_version}` : 'Draft only'} · {new Date(template.updated_at).toLocaleDateString()}
                </span>
              </span>
              <span className="chevron">›</span>
            </button>
          ))}
          {!visibleTemplates.length && <div className="empty">No templates match this view.</div>}
        </section>

        <footer className="account-row">
          <span>{user.name || user.preferred_username || user.email}</span>
          <a href="/auth/logout">Sign out</a>
        </footer>

        {createOpen && (
          <div className="sheet-backdrop" onClick={() => setCreateOpen(false)}>
            <section className="sheet compact" onClick={event => event.stopPropagation()}>
              <div className="grabber" />
              <div className="sheet-heading">
                <span className="sheet-icon">＋</span>
                <div>
                  <h2>New template</h2>
                  <p>Choose the output, then build it from blocks.</p>
                </div>
              </div>
              <label>
                Name
                <input autoFocus value={createName} onChange={event => setCreateName(event.target.value)} placeholder="Weekly packing report" />
              </label>
              <div className="segmented">
                <button className={createType === 'report' ? 'active' : ''} onClick={() => setCreateType('report')}>▤ Report</button>
                <button className={createType === 'email' ? 'active' : ''} onClick={() => setCreateType('email')}>✉ Email</button>
              </div>
              <button className="button primary full large" onClick={() => void createTemplate()}>Create template</button>
            </section>
          </div>
        )}
      </main>
    )
  }

  const published = Boolean(active?.published_version)
  const pullUrl = active ? `https://templates.arrowstack.dev/api/v1/templates/${active.template_key}` : ''
  const renderUrl = active ? `${pullUrl}/render` : ''

  return (
    <main className="app editor-shell">
      <header className="topbar editor-topbar">
        <button className="circle" onClick={() => { setScreen('templates'); void refreshTemplates() }}>←</button>
        <div className="title-stack">
          <strong>{active?.name}</strong>
          <span className="template-meta">
            <span className={`mini-status ${published ? 'published' : 'draft'}`}>{published ? `v${active?.published_version}` : 'Draft'}</span>
            <span className={`save-state ${saveState}`}>
              {saveState === 'saved' ? 'Saved' : saveState === 'saving' ? 'Saving…' : 'Local only'}
            </span>
          </span>
        </div>
        <button className="publish-button" onClick={() => void publish()}>
          {published ? 'Publish update' : 'Publish'}
        </button>
      </header>

      {error && <div className="error-banner inline">{error}</div>}

      {screen === 'editor' && (
        <section className="canvas">
          <div className="editor-context">
            <div>
              <span className={`type-pill ${active?.type}`}>{active?.type === 'email' ? '✉ Email' : '▤ Report'}</span>
              <code>{active?.template_key}</code>
              {templateDoc.theme && <span className="theme-pill">Pack theme</span>}
            </div>
            <span>{templateDoc.blocks.length} blocks</span>
          </div>

          <div className="document-surface">
            {templateDoc.blocks.map((block, index) => (
              <button key={block.id} className={`block-card ${selectedId === block.id ? 'selected' : ''}`} onClick={() => setSelectedId(block.id)}>
                <span className="drag-hint">⋮⋮</span>
                <span className="block-copy">
                  <span className="block-type">{blockLabels[block.type]}</span>
                  <strong>{blockSummary(block)}</strong>
                </span>
                <span className="block-index">{String(index + 1).padStart(2, '0')}</span>
              </button>
            ))}
            <button className="add-block" onClick={() => setAddOpen(true)}>＋ Add block</button>
            {!templateDoc.blocks.length && <p className="muted center">Start by adding a block.</p>}
          </div>
        </section>
      )}

      {screen === 'preview' && (
        <section className="preview-panel">
          <div className="section-heading">
            <div>
              <span className="eyebrow">LIVE DRAFT</span>
              <h2>Preview</h2>
            </div>
            <button className="button" onClick={() => void refreshPreview()}>↻ Refresh</button>
          </div>
          {active?.type === 'report' && (
            <section className="page-setup-card">
              <div className="page-setup-heading">
                <div>
                  <span className="eyebrow">PAGE SETUP</span>
                  <h3>A4 margins</h3>
                </div>
                <span>mm</span>
              </div>
              <div className="page-margin-grid">
                {[
                  ['Top', 'pageMarginTop', 12],
                  ['Right', 'pageMarginRight', 12],
                  ['Bottom', 'pageMarginBottom', 12],
                  ['Left', 'pageMarginLeft', 12]
                ].map(([label, key, fallback]) => (
                  <label key={String(key)}>
                    {label}
                    <input
                      type="number"
                      inputMode="decimal"
                      min="0"
                      max="40"
                      step="1"
                      value={themeNumber(String(key), Number(fallback))}
                      onChange={event => updateTheme({ [String(key)]: Number(event.target.value) })}
                    />
                  </label>
                ))}
              </div>
              <label className="content-padding-control">
                Content padding <span>px</span>
                <input
                  type="range"
                  min="0"
                  max="80"
                  step="1"
                  value={themeNumber('pagePadding', 18)}
                  onChange={event => updateTheme({ pagePadding: Number(event.target.value) })}
                />
                <strong>{themeNumber('pagePadding', 18)} px</strong>
              </label>
              <button className="text-button page-reset" onClick={() => updateTheme({
                pageMarginTop: 12,
                pageMarginRight: 12,
                pageMarginBottom: 12,
                pageMarginLeft: 12,
                pagePadding: 18
              })}>Reset page setup</button>
            </section>
          )}
          <div className="segmented preview-segment">
            <button className={previewDevice === 'mobile' ? 'active' : ''} onClick={() => setPreviewDevice('mobile')}>Phone</button>
            <button className={previewDevice === 'desktop' ? 'active' : ''} onClick={() => setPreviewDevice('desktop')}>Desktop</button>
          </div>
          <div className={`preview-frame-wrap ${previewDevice}`}>
            {previewHtml ? <iframe title="Template preview" srcDoc={previewHtml} sandbox="" /> : <div className="empty">Generating preview…</div>}
          </div>
          {active?.type === 'report' && <button className="button primary full large" onClick={() => void downloadPdf()}>Download draft PDF</button>}
        </section>
      )}

      {screen === 'data' && (
        <section className="data-panel">
          <div className="section-heading">
            <div>
              <span className="eyebrow">DESIGN DATA</span>
              <h2>Sample data</h2>
            </div>
          </div>
          <p className="muted copy">This is only design-time data. Calling apps send their real data when they render.</p>
          <textarea className="json-editor" value={dataText} onChange={event => setDataText(event.target.value)} spellCheck={false} />
          <button className="button primary full large" onClick={applyData}>Apply sample data</button>
          {!!paths.length && (
            <section className="field-panel">
              <h3>Available bindings</h3>
              <div className="binding-list">
                {paths.map(path => <code key={path}>{`{{${path}}}`}</code>)}
              </div>
            </section>
          )}
        </section>
      )}

      {screen === 'use' && (
        <section className="use-panel">
          <div className="section-heading">
            <div>
              <span className="eyebrow">PUBLISHED API</span>
              <h2>Use this template</h2>
            </div>
            <span className={`publish-state ${published ? 'ready' : ''}`}>{published ? 'Ready' : 'Publish first'}</span>
          </div>

          <div className="integration-card">
            <span className="card-label">Template key</span>
            <div className="copy-row">
              <code>{active?.template_key}</code>
              <button onClick={() => void copy(active?.template_key || '', 'key')}>{copied === 'key' ? 'Copied' : 'Copy'}</button>
            </div>
          </div>

          <div className="integration-card">
            <span className="card-label">Pull published template</span>
            <div className="copy-row multiline">
              <code>GET {pullUrl}</code>
              <button onClick={() => void copy(pullUrl, 'pull')}>{copied === 'pull' ? 'Copied' : 'Copy'}</button>
            </div>
          </div>

          <div className="integration-card">
            <span className="card-label">Render with data</span>
            <div className="copy-row multiline">
              <code>POST {renderUrl}</code>
              <button onClick={() => void copy(renderUrl, 'render')}>{copied === 'render' ? 'Copied' : 'Copy'}</button>
            </div>
            <pre>{`{
  "format": "${active?.type === 'email' ? 'email' : 'pdf'}",
  "data": {
    "customer": { "name": "Example" }
  }
}`}</pre>
          </div>

          <div className="auth-card">
            <div className="auth-heading">
              <div>
                <h3>Authentication</h3>
                <p>Anonymous pulls are blocked.</p>
              </div>
              <span className="lock">⌁</span>
            </div>
            <div className="auth-option">
              <strong>API key</strong>
              <code>X-API-Key: ts_live_...</code>
            </div>
            <div className="auth-option">
              <strong>Arrowstack OAuth</strong>
              <code>Authorization: Bearer &lt;token&gt;</code>
              <span>Machine client: template-studio-api</span>
            </div>
          </div>

          <div className="key-manager">
            <div className="key-manager-heading">
              <div>
                <h3>API keys</h3>
                <p>Create one per consuming app so each can be revoked independently.</p>
              </div>
            </div>

            <div className="create-key-row">
              <input value={newKeyName} onChange={event => setNewKeyName(event.target.value)} placeholder="FieldLens production" />
              <button className="button primary" onClick={() => void createApiKey()}>Create</button>
            </div>

            {createdKey && (
              <div className="secret-reveal">
                <strong>Copy this key now</strong>
                <p>It is stored hashed and will not be shown again.</p>
                <div className="copy-row multiline secret">
                  <code>{createdKey.api_key}</code>
                  <button onClick={() => void copy(createdKey.api_key, 'secret')}>{copied === 'secret' ? 'Copied' : 'Copy'}</button>
                </div>
              </div>
            )}

            <div className="key-list">
              {apiKeys.map(key => (
                <div className="key-row" key={key.id}>
                  <span>
                    <strong>{key.name}</strong>
                    <code>{key.key_prefix}…</code>
                  </span>
                  <span className="key-meta">
                    <small>Last used {formatDate(key.last_used_at)}</small>
                    <button onClick={() => void revokeApiKey(key.id)}>Revoke</button>
                  </span>
                </div>
              ))}
              {!apiKeys.length && <p className="muted">No active API keys.</p>}
            </div>
          </div>
        </section>
      )}

      <nav className="bottom-nav four">
        <button className={screen === 'editor' ? 'active' : ''} onClick={() => setScreen('editor')}><span>✎</span>Edit</button>
        <button className={screen === 'preview' ? 'active' : ''} onClick={() => void goPreview()}><span>◉</span>Preview</button>
        <button className={screen === 'data' ? 'active' : ''} onClick={() => setScreen('data')}><span>{'{ }'}</span>Data</button>
        <button className={screen === 'use' ? 'active' : ''} onClick={() => void goUse()}><span>↗</span>Use</button>
      </nav>

      {addOpen && (
        <div className="sheet-backdrop" onClick={() => setAddOpen(false)}>
          <section className="sheet" onClick={event => event.stopPropagation()}>
            <div className="grabber" />
            <div className="sheet-heading">
              <span className="sheet-icon">＋</span>
              <div>
                <h2>Add block</h2>
                <p>Keep the structure simple; the renderer handles output details.</p>
              </div>
            </div>
            <div className="block-picker">
              {(Object.keys(blockLabels) as BlockType[]).map(type => (
                <button key={type} onClick={() => addBlock(type)}>
                  <span className="picker-icon">{type === 'heading' ? 'H' : type === 'text' ? 'T' : type === 'kpi' ? '#' : type === 'button' ? '↗' : type === 'image' ? '▧' : type === 'divider' ? '—' : '▦'}</span>
                  {blockLabels[type]}
                </button>
              ))}
            </div>
          </section>
        </div>
      )}

      {selected && screen === 'editor' && (
        <div className="sheet-backdrop light" onClick={() => setSelectedId(null)}>
          <section className="sheet block-editor" onClick={event => event.stopPropagation()}>
            <div className="grabber" />
            <div className="sheet-title-row">
              <div>
                <span className="eyebrow">EDIT BLOCK</span>
                <h2>{blockLabels[selected.type]}</h2>
              </div>
              <button className="text-button" onClick={() => setSelectedId(null)}>Done</button>
            </div>

            {(selected.type === 'heading' || selected.type === 'text') && (
              <label>
                Text
                <textarea value={String(selected.props.text || '')} onChange={event => updateBlock(selected.id, { text: event.target.value })} />
              </label>
            )}

            {selected.type === 'kpi' && (
              <>
                <label>Label<input value={String(selected.props.label || '')} onChange={event => updateBlock(selected.id, { label: event.target.value })} /></label>
                <label>Value<input value={String(selected.props.value || '')} onChange={event => updateBlock(selected.id, { value: event.target.value })} /></label>
              </>
            )}

            {selected.type === 'button' && (
              <>
                <label>Text<input value={String(selected.props.text || '')} onChange={event => updateBlock(selected.id, { text: event.target.value })} /></label>
                <label>URL<input value={String(selected.props.url || '')} onChange={event => updateBlock(selected.id, { url: event.target.value })} /></label>
              </>
            )}

            {selected.type === 'image' && (
              <>
                <label>Image URL<input value={String(selected.props.url || '')} onChange={event => updateBlock(selected.id, { url: event.target.value })} /></label>
                <label>Alt text<input value={String(selected.props.alt || '')} onChange={event => updateBlock(selected.id, { alt: event.target.value })} /></label>
                <label>
                  Image role
                  <select value={String(selected.props.variant || '')} onChange={event => updateBlock(selected.id, { variant: event.target.value })}>
                    <option value="">Auto</option>
                    <option value="logo">Logo</option>
                    <option value="hero">Hero / banner</option>
                    <option value="image">Normal image</option>
                  </select>
                </label>
                <div className="two-field-grid">
                  <label>Max width (px)<input type="number" inputMode="numeric" value={String(selected.props.maxWidth || '')} onChange={event => updateBlock(selected.id, { maxWidth: event.target.value ? Number(event.target.value) : undefined })} placeholder="Auto" /></label>
                  <label>Max height (px)<input type="number" inputMode="numeric" value={String(selected.props.maxHeight || '')} onChange={event => updateBlock(selected.id, { maxHeight: event.target.value ? Number(event.target.value) : undefined })} placeholder="Auto" /></label>
                </div>
                <label>
                  Fit
                  <select value={String(selected.props.fit || '')} onChange={event => updateBlock(selected.id, { fit: event.target.value })}>
                    <option value="">Auto</option>
                    <option value="contain">Contain</option>
                    <option value="cover">Cover</option>
                    <option value="fill">Fill</option>
                  </select>
                </label>
              </>
            )}

            {selected.type === 'table' && (
              <label>Rows data path<input value={String(selected.props.rowsPath || '')} onChange={event => updateBlock(selected.id, { rowsPath: event.target.value })} placeholder="items" /></label>
            )}

            {bindingField(selected) && !!paths.length && (
              <>
                <h3>Insert data</h3>
                <div className="binding-chips">
                  {paths.slice(0, 12).map(path => <button key={path} onClick={() => insertBinding(path)}>{path}</button>)}
                </div>
              </>
            )}

            <div className="block-actions">
              <button onClick={() => moveBlock(selected.id, -1)}>↑ Move up</button>
              <button onClick={() => moveBlock(selected.id, 1)}>↓ Move down</button>
            </div>
            <button className="danger-link" onClick={() => removeBlock(selected.id)}>Delete block</button>
          </section>
        </div>
      )}
    </main>
  )
}