import React, { useState, useEffect, useCallback, useRef } from 'react'
import { useParams, useNavigate } from 'react-router-dom'
import axios from 'axios'
import Pusher from 'pusher-js'
import {
  Layers,
  Settings,
  Trash2,
  Plus,
  ChevronUp,
  ChevronDown,
  ArrowLeft,
  Loader2,
  Eye,
  Palette,
  Globe,
  FileEdit,
  FileText,
  ToggleLeft,
  ToggleRight,
} from 'lucide-react'
import BlockRenderer, { BLOCK_TYPES, BLOCK_TYPE_LABELS } from './BlockRenderer'
import BlockStyleEditor from './BlockStyleEditor'
import GlobalStylesPanel from './GlobalStylesPanel'

const BASE_URL = import.meta.env.VITE_API_BASE_URL

// ─── Sidebar tab definitions ────────────────────────────────────────────────
const TABS = [
  { id: 'pages',   icon: FileText,  label: 'Pages' },
  { id: 'blocks',  icon: Layers,    label: 'Blocks' },
  { id: 'styles',  icon: Palette,   label: 'Styles' },
  { id: 'lang',    icon: Globe,     label: 'Lang' },
]

export default function PageEditor() {
  const { pageId } = useParams()
  const navigate   = useNavigate()

  const [page,            setPage]            = useState(null)
  const [blocks,          setBlocks]          = useState([])
  const [loading,         setLoading]         = useState(true)
  const [saving,          setSaving]          = useState(null)
  const [selectedBlockId, setSelectedBlockId] = useState(null)
  const [activeTab,       setActiveTab]       = useState('blocks')
  const [leftPanel,       setLeftPanel]       = useState('blocks') // 'blocks' | 'styles' | 'content' | 'lang'
  const [toast,           setToast]           = useState(null)
  const [currentPageId, setCurrentPageId] = useState(null);

  const selectedBlock = blocks.find(b => b.id === selectedBlockId) || null
  const blockRefs     = useRef({})

  // ─── Load page ──────────────────────────────────────────────────────────
  useEffect(() => { fetchPage() }, [pageId])

  // ─── Pusher live updates ─────────────────────────────────────────────────
  useEffect(() => {
    const pusher  = new Pusher(import.meta.env.VITE_PUSHER_APP_KEY, {
      cluster: import.meta.env.VITE_PUSHER_CLUSTER || 'ap2',
      forceTLS: true,
    })
    const channel = pusher.subscribe('page-builder-channel')
    channel.bind('page-updated', (data) => {
      if (data.page_slug === page?.slug) {
        setBlocks(data.blocks || [])
        showToast('Page updated in another session', 'info')
      }
    })
    return () => { channel.unsubscribe(); pusher.disconnect() }
  }, [page?.slug])

const fetchPage = async () => {
  setLoading(true)
  let id = pageId || currentPageId

  console.log('[PE:fetchPage] triggered — pageId from URL:', pageId, '| currentPageId:', currentPageId, '| resolved id:', id)
  console.log('[PE:fetchPage] BASE_URL:', BASE_URL)

  try {
    if (!id || id === 'undefined') {
      console.log('[PE:fetchPage] no id found → fetching pages list for redirect')
      const res   = await axios.get(`${BASE_URL}/admin/builder/pages`)
      console.log('[PE:fetchPage] pages list response status:', res.status, '| raw data:', res.data)
      const pages = res.data?.data ?? res.data ?? []

      if (!pages.length) throw new Error('No pages found')

      const target = pages.find(p => p.slug === 'homepage') || pages[0]
      id = target.id
      console.log('[PE:fetchPage] redirecting to page:', id, target.slug)
      setCurrentPageId(id)
      navigate(`/admin/editor/${id}`, { replace: true })
      return
    }

    console.log('[PE:fetchPage] fetching page id:', id, '| URL:', `${BASE_URL}/admin/builder/pages/${id}`)
    const res  = await axios.get(`${BASE_URL}/admin/builder/pages/${id}`)
    console.log('[PE:fetchPage] response status:', res.status, '| raw data:', res.data)
    const data = res.data?.data ?? res.data
    console.log('[PE:fetchPage] resolved page:', data, '| blocks count:', data?.blocks?.length ?? 0)
    setPage(data)
    setCurrentPageId(data.id)
    setBlocks(data.blocks || [])

  } catch (err) {
    console.error('[PE:fetchPage] ERROR:', err.message)
    console.error('[PE:fetchPage] response status:', err.response?.status, '| body:', err.response?.data)
    showToast('Failed to load page', 'error')
  } finally {
    setLoading(false)
    console.log('[PE:fetchPage] done')
  }
}

  // ─── Add block ───────────────────────────────────────────────────────────
  const addBlock = async (blockType) => {
    const id = currentPageId
    console.log('[PE:addBlock] blockType:', blockType, '| currentPageId:', id)

    if (!id || id === 'undefined') {
      console.warn('[PE:addBlock] aborted — page not loaded yet')
      showToast('Page not loaded yet', 'error')
      return
    }

    try {
      const url = `${BASE_URL}/admin/builder/pages/${id}/blocks`
      console.log('[PE:addBlock] POST', url, { block_type: blockType })
      const res      = await axios.post(url, { block_type: blockType })
      console.log('[PE:addBlock] response status:', res.status, '| new block:', res.data)
      const newBlock = res.data?.data ?? res.data
      setBlocks(prev => [...prev, newBlock])
      showToast('Block added', 'success')
    } catch (err) {
      console.error('[PE:addBlock] ERROR:', err.message)
      console.error('[PE:addBlock] response status:', err.response?.status, '| body:', err.response?.data)
      showToast('Failed to add block', 'error')
    }
  }

  // ─── Save block styles ───────────────────────────────────────────────────
  const saveBlockStyles = useCallback(async (blockId, styles) => {
    console.log('[PE:saveBlockStyles] blockId:', blockId, '| styles:', styles)
    setSaving(blockId)
    try {
      const url = `${BASE_URL}/admin/builder/blocks/${blockId}`
      console.log('[PE:saveBlockStyles] PUT', url)
      const res = await axios.put(url, { styles })
      console.log('[PE:saveBlockStyles] saved — status:', res.status)
      setBlocks(prev => prev.map(b => b.id === blockId ? { ...b, styles } : b))
    } catch (err) {
      console.error('[PE:saveBlockStyles] ERROR:', err.message)
      console.error('[PE:saveBlockStyles] response status:', err.response?.status, '| body:', err.response?.data)
      showToast('Failed to save styles', 'error')
    } finally {
      setSaving(null)
    }
  }, [])

  // ─── Save block content ──────────────────────────────────────────────────
  const saveBlockContent = useCallback(async (blockId, content) => {
    console.log('[PE:saveBlockContent] blockId:', blockId, '| content:', content)
    setSaving(blockId)
    try {
      const url = `${BASE_URL}/admin/builder/blocks/${blockId}`
      console.log('[PE:saveBlockContent] PUT', url)
      const res = await axios.put(url, { content })
      console.log('[PE:saveBlockContent] saved — status:', res.status)
      setBlocks(prev => prev.map(b => b.id === blockId ? { ...b, content } : b))
    } catch (err) {
      console.error('[PE:saveBlockContent] ERROR:', err.message)
      console.error('[PE:saveBlockContent] response status:', err.response?.status, '| body:', err.response?.data)
      showToast('Failed to save content', 'error')
    } finally {
      setSaving(null)
    }
  }, [])

  // ─── Delete block ────────────────────────────────────────────────────────
  const deleteBlock = async (blockId) => {
    if (!window.confirm('Delete this block?')) return
    console.log('[PE:deleteBlock] deleting blockId:', blockId)
    try {
      const url = `${BASE_URL}/admin/builder/blocks/${blockId}`
      console.log('[PE:deleteBlock] DELETE', url)
      const res = await axios.delete(url)
      console.log('[PE:deleteBlock] deleted — status:', res.status)
      setBlocks(prev => prev.filter(b => b.id !== blockId))
      if (selectedBlockId === blockId) setSelectedBlockId(null)
      showToast('Block deleted', 'success')
    } catch (err) {
      console.error('[PE:deleteBlock] ERROR:', err.message)
      console.error('[PE:deleteBlock] response status:', err.response?.status, '| body:', err.response?.data)
      showToast('Failed to delete block', 'error')
    }
  }

  // ─── Reorder block ───────────────────────────────────────────────────────
  const moveBlock = async (index, direction) => {
    const newIndex = direction === 'up' ? index - 1 : index + 1
    console.log('[PE:moveBlock] index:', index, '| direction:', direction, '| newIndex:', newIndex)
    if (newIndex < 0 || newIndex >= blocks.length) {
      console.log('[PE:moveBlock] out of bounds — aborting')
      return
    }

    const reordered = [...blocks]
    const [moved]   = reordered.splice(index, 1)
    reordered.splice(newIndex, 0, moved)
    const withOrder = reordered.map((b, i) => ({ ...b, sort_order: i }))
    setBlocks(withOrder)
    console.log('[PE:moveBlock] new order:', withOrder.map(b => ({ id: b.id, sort_order: b.sort_order })))

    try {
      const url = `${BASE_URL}/admin/builder/pages/${page?.id}/blocks/reorder`
      console.log('[PE:moveBlock] POST', url)
      const res = await axios.post(url, {
        order: withOrder.map(b => ({ id: b.id, sort_order: b.sort_order })),
      })
      console.log('[PE:moveBlock] reordered — status:', res.status)
    } catch (err) {
      console.error('[PE:moveBlock] ERROR:', err.message)
      console.error('[PE:moveBlock] response status:', err.response?.status, '| body:', err.response?.data)
      showToast('Failed to reorder', 'error')
      fetchPage()
    }
  }

  // ─── Style / content change handlers ────────────────────────────────────
  const handleStyleChange = (styles) => {
    if (!selectedBlockId) return
    console.log('[PE:handleStyleChange] blockId:', selectedBlockId, '| styles:', styles)
    setBlocks(prev => prev.map(b => b.id === selectedBlockId ? { ...b, styles } : b))
    clearTimeout(window._styleTimer)
    window._styleTimer = setTimeout(() => saveBlockStyles(selectedBlockId, styles), 600)
  }

  const handleContentChange = (content) => {
    if (!selectedBlockId) return
    console.log('[PE:handleContentChange] blockId:', selectedBlockId, '| content:', content)
    setBlocks(prev => prev.map(b => b.id === selectedBlockId ? { ...b, content } : b))
    clearTimeout(window._contentTimer)
    window._contentTimer = setTimeout(() => saveBlockContent(selectedBlockId, content), 600)
  }

  const showToast = (message, type = 'success') => {
    setToast({ message, type })
    setTimeout(() => setToast(null), 3000)
  }

  // ─── Tab click ───────────────────────────────────────────────────────────
  const handleTabClick = (tabId) => {
    setActiveTab(tabId)
    setLeftPanel(tabId)
    if (tabId !== 'content' && tabId !== 'block-styles') {
      setSelectedBlockId(null)
    }
  }

  // ─── Block selected — open content panel ─────────────────────────────────
  const selectBlock = (blockId) => {
    setSelectedBlockId(blockId)
    setLeftPanel('content')
  }

  // ─── Loading ──────────────────────────────────────────────────────────────
  if (loading) {
    return (
      <div className="flex items-center justify-center h-screen bg-gray-50">
        <Loader2 className="animate-spin text-indigo-500" size={32} />
      </div>
    )
  }

  // ─── Render ───────────────────────────────────────────────────────────────
  return (
    <div className="flex flex-col h-screen bg-gray-100 overflow-hidden">

      {/* ── Top bar ── */}
      <div className="shrink-0 bg-white border-b border-gray-200 shadow-sm flex items-center justify-between px-4 h-12 z-40">
        <div className="flex items-center gap-3">
          <button onClick={() => navigate('/admin/theme-edit')} className="text-gray-500 hover:text-gray-800">
            <ArrowLeft size={18} />
          </button>
          <span className="font-semibold text-sm text-gray-700">{page?.title || 'Page Editor'}</span>
          <span className="text-xs text-gray-400 bg-gray-100 px-2 py-0.5 rounded">/{page?.slug}</span>
        </div>
        <a
          href={`/${page?.slug}`}
          target="_blank"
          rel="noreferrer"
          className="flex items-center gap-1 text-xs text-gray-500 hover:text-indigo-600 px-3 py-1.5 rounded-lg hover:bg-gray-100"
        >
          <Eye size={14} />
          Preview
        </a>
      </div>

      {/* ── Main area ── */}
      <div className="flex flex-1 overflow-hidden">

        {/* ── Icon nav (56px) ── */}
        <div className="shrink-0 w-14 bg-white border-r border-gray-200 flex flex-col items-center py-3 gap-1 z-30">
          {TABS.map(({ id, icon: Icon, label }) => (
            <button
              key={id}
              onClick={() => handleTabClick(id)}
              title={label}
              className={`w-10 h-10 rounded-lg flex flex-col items-center justify-center gap-0.5 transition
                ${activeTab === id
                  ? 'bg-indigo-600 text-white'
                  : 'text-gray-500 hover:bg-gray-100 hover:text-gray-800'
                }`}
            >
              <Icon size={18} />
              <span className="text-[9px] font-medium uppercase tracking-wide leading-none">
                {label}
              </span>
            </button>
          ))}
        </div>

        {/* ── Left panel (280px) ── */}
        <div className="shrink-0 w-72 bg-white border-r border-gray-200 flex flex-col overflow-hidden z-20">
          {leftPanel === 'pages' && (
            <PagesPanel currentPageId={currentPageId} />
          )}
          {leftPanel === 'blocks' && (
            <BlocksPanel onAdd={addBlock} />
          )}
          {leftPanel === 'styles' && (
            <GlobalStylesPanel />
          )}
          {leftPanel === 'content' && selectedBlock && (
            <BlockContentPanel
              block={selectedBlock}
              isSaving={saving === selectedBlock.id}
              onChange={handleContentChange}
              onStylesOpen={() => setLeftPanel('block-styles')}
              onClose={() => { setLeftPanel('blocks'); setSelectedBlockId(null) }}
            />
          )}
          {leftPanel === 'block-styles' && selectedBlock && (
            <div className="flex flex-col h-full overflow-y-auto">
              <div className="flex items-center justify-between px-4 py-3 border-b border-gray-100 shrink-0">
                <span className="text-xs font-bold uppercase tracking-widest text-gray-600">Edit Styles</span>
                <button
                  onClick={() => setLeftPanel('content')}
                  className="text-xs text-indigo-500 hover:text-indigo-700"
                >
                  ← Back
                </button>
              </div>
              <div className="flex-1 overflow-y-auto">
                <BlockStyleEditor
                  styles={selectedBlock.styles || {}}
                  onChange={handleStyleChange}
                  onClose={() => setLeftPanel('content')}
                  embedded
                />
              </div>
            </div>
          )}
          {leftPanel === 'lang' && (
            <LangPanel />
          )}
          {/* Fallback when nothing selected */}
          {leftPanel === 'content' && !selectedBlock && (
            <BlocksPanel onAdd={addBlock} />
          )}
        </div>

        {/* ── Canvas ── */}
        <div
          className="flex-1 overflow-y-auto bg-gray-100"
          onClick={(e) => {
            if (e.target === e.currentTarget) {
              setSelectedBlockId(null)
              setLeftPanel(activeTab)
            }
          }}
        >
          {blocks.length === 0 && (
            <div className="flex flex-col items-center justify-center py-32 text-gray-400">
              <div className="w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center mb-4">
                <Plus size={24} />
              </div>
              <p className="text-sm mb-2">No blocks yet.</p>
              <p className="text-xs text-gray-400">Click a block type in the left panel to add one.</p>
            </div>
          )}

          {blocks.map((block, index) => (
            <div key={block.id}>
              <InsertZone
                onClick={() => {
                  // Insert at position — for now just adds at end
                  // Future: implement cursor-based insert
                }}
              />

              <div
                ref={el => { blockRefs.current[block.id] = el }}
                className="relative group cursor-pointer"
                onClick={() => selectBlock(block.id)}
                style={{
                  outline: selectedBlockId === block.id
                    ? '2px solid #6366f1'
                    : '2px solid transparent',
                  outlineOffset: '-2px',
                  transition: 'outline 0.15s',
                }}
              >
                <BlockToolbar
                  blockType={block.block_type}
                  index={index}
                  total={blocks.length}
                  isSaving={saving === block.id}
                  isSelected={selectedBlockId === block.id}
                  onMoveUp={() => moveBlock(index, 'up')}
                  onMoveDown={() => moveBlock(index, 'down')}
                  onEditContent={() => selectBlock(block.id)}
                  onEditStyles={() => { selectBlock(block.id); setLeftPanel('block-styles') }}
                  onDelete={() => deleteBlock(block.id)}
                />
                <BlockRenderer block={block} />
              </div>

              {index === blocks.length - 1 && (
                <InsertZone label="+ Add block at end" onClick={() => {}} />
              )}
            </div>
          ))}
        </div>
      </div>

      {/* Toast */}
      {toast && (
        <div
          className={`fixed bottom-6 right-6 z-50 px-4 py-3 rounded-xl text-white text-sm shadow-lg
            ${toast.type === 'error' ? 'bg-red-500' : toast.type === 'info' ? 'bg-blue-500' : 'bg-green-500'}`}
        >
          {toast.message}
        </div>
      )}
    </div>
  )
}

// ─── Pages Panel ─────────────────────────────────────────────────────────────
function PagesPanel({ currentPageId }) {
  const navigate = useNavigate()
  const [pages, setPages] = useState([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)

  useEffect(() => {
    const fetchPages = async () => {
      setLoading(true)
      setError(null)
      const url = `${BASE_URL}/admin/builder/pages`
      console.log('[PE:PagesPanel] fetching pages list | URL:', url)
      try {
        const res  = await axios.get(url)
        console.log('[PE:PagesPanel] response status:', res.status, '| raw data:', res.data)
        const data = res.data?.data ?? res.data ?? []
        const list = Array.isArray(data) ? data : []
        console.log('[PE:PagesPanel] resolved', list.length, 'pages:', list.map(p => ({ id: p.id, slug: p.slug })))
        setPages(list)
      } catch (err) {
        console.error('[PE:PagesPanel] ERROR:', err.message)
        console.error('[PE:PagesPanel] response status:', err.response?.status, '| body:', err.response?.data)
        setError('Failed to load pages')
      } finally {
        setLoading(false)
        console.log('[PE:PagesPanel] done')
      }
    }
    fetchPages()
  }, [])

  return (
    <div className="flex flex-col h-full">
      {/* Header */}
      <div className="flex items-center justify-between px-4 py-3 border-b border-gray-100 shrink-0">
        <span className="text-xs font-bold uppercase tracking-widest text-gray-500">Pages</span>
        <button
          onClick={() => navigate('/admin/theme-edit')}
          className="text-xs text-indigo-500 hover:text-indigo-700 font-medium"
          title="Manage pages"
        >
          Manage
        </button>
      </div>

      {/* Body */}
      <div className="flex-1 overflow-y-auto">
        {loading && (
          <div className="flex items-center justify-center py-10">
            <Loader2 className="animate-spin text-indigo-400" size={20} />
          </div>
        )}

        {error && !loading && (
          <div className="px-4 py-6 text-center text-xs text-red-400">{error}</div>
        )}

        {!loading && !error && pages.length === 0 && (
          <div className="px-4 py-6 text-center text-xs text-gray-400">No pages found.</div>
        )}

        {!loading && !error && pages.map(page => {
          const isActive = String(page.id) === String(currentPageId)
          return (
            <button
              key={page.id}
              onClick={() => navigate(`/admin/editor/${page.id}`)}
              className={`w-full text-left px-4 py-3 border-b border-gray-50 flex items-start gap-3 transition
                ${isActive
                  ? 'bg-indigo-50 border-l-2 border-l-indigo-500'
                  : 'hover:bg-gray-50 border-l-2 border-l-transparent'
                }`}
            >
              <FileText
                size={14}
                className={`mt-0.5 shrink-0 ${isActive ? 'text-indigo-500' : 'text-gray-400'}`}
              />
              <div className="min-w-0 flex-1">
                <div className={`text-xs font-semibold truncate ${isActive ? 'text-indigo-700' : 'text-gray-700'}`}>
                  {page.title}
                </div>
                <div className="text-[10px] text-gray-400 truncate mt-0.5">/{page.slug}</div>
              </div>
              <span
                className={`shrink-0 self-center flex items-center gap-0.5 text-[10px] px-1.5 py-0.5 rounded-full font-medium ${
                  page.is_active
                    ? 'bg-green-100 text-green-600'
                    : 'bg-gray-100 text-gray-400'
                }`}
              >
                {page.is_active ? <ToggleRight size={10} /> : <ToggleLeft size={10} />}
                {page.is_active ? 'Live' : 'Off'}
              </span>
            </button>
          )
        })}
      </div>
    </div>
  )
}

// ─── Blocks Panel ────────────────────────────────────────────────────────────
function BlocksPanel({ onAdd }) {
  return (
    <div className="flex flex-col h-full">
      <div className="px-4 py-3 border-b border-gray-100 shrink-0">
        <span className="text-xs font-bold uppercase tracking-widest text-gray-500">Blocks</span>
      </div>
      <div className="px-3 py-2 border-b border-gray-100 shrink-0">
        <select className="w-full text-xs border border-gray-200 rounded-lg px-3 py-2 bg-gray-50 text-gray-700 focus:outline-none focus:border-indigo-400">
          <option>All blocks</option>
        </select>
      </div>
      <div className="flex-1 overflow-y-auto p-3">
        <div className="grid grid-cols-2 gap-2">
          {BLOCK_TYPES.map(({ value, label }) => (
            <button
              key={value}
              onClick={() => onAdd(value)}
              className="flex flex-col items-center gap-2 p-3 border border-gray-100 rounded-xl hover:border-indigo-400 hover:bg-indigo-50 transition text-center bg-white"
            >
              <BlockTypeIcon type={value} />
              <span className="text-xs font-medium text-gray-600 leading-tight">{label}</span>
            </button>
          ))}
        </div>
      </div>
    </div>
  )
}

// ─── Block Content Panel ──────────────────────────────────────────────────────
function BlockContentPanel({ block, isSaving, onChange, onStylesOpen, onClose }) {
  const [content, setContent] = useState(block.content || {})

  // Sync if block changes
  useEffect(() => { setContent(block.content || {}) }, [block.id])

  const update = (key, value) => {
    const updated = { ...content, [key]: value }
    setContent(updated)
    onChange(updated)
  }

  const updateItem = (index, key, value) => {
    const items   = [...(content.items || [])]
    items[index]  = { ...items[index], [key]: value }
    update('items', items)
  }

  const fields = {
    hero: ['title', 'subtitle', 'button_text', 'button_link'],
    cta:  ['title', 'subtitle', 'button_text', 'button_link'],
    text_section: ['title', 'body'],
  }

  return (
    <div className="flex flex-col h-full">
      {/* Header */}
      <div className="flex items-center justify-between px-4 py-3 border-b border-gray-100 shrink-0">
        <div>
          <span className="text-xs font-bold uppercase tracking-widest text-gray-600">
            {BLOCK_TYPE_LABELS[block.block_type] || block.block_type}
          </span>
          {isSaving && <span className="ml-2 text-xs text-indigo-400">Saving…</span>}
        </div>
        <button onClick={onClose} className="text-gray-400 hover:text-gray-600 text-lg leading-none">&times;</button>
      </div>

      {/* Tabs: Content | Styles */}
      <div className="flex border-b border-gray-100 shrink-0">
        <button className="flex-1 py-2 text-xs font-semibold text-indigo-600 border-b-2 border-indigo-500">
          Content
        </button>
        <button
          onClick={onStylesOpen}
          className="flex-1 py-2 text-xs font-medium text-gray-500 hover:text-gray-700"
        >
          Styles
        </button>
      </div>

      {/* Fields */}
      <div className="flex-1 overflow-y-auto p-4 space-y-3">
        {/* Simple text fields */}
        {(fields[block.block_type] || []).map(key => (
          <div key={key}>
            <label className="block text-xs text-gray-500 mb-1 capitalize">{key.replace(/_/g, ' ')}</label>
            {key === 'body' ? (
              <textarea
                value={content[key] || ''}
                onChange={e => update(key, e.target.value)}
                rows={4}
                className="w-full text-xs border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:border-indigo-400 resize-none"
              />
            ) : (
              <input
                type="text"
                value={content[key] || ''}
                onChange={e => update(key, e.target.value)}
                className="w-full text-xs border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:border-indigo-400"
              />
            )}
          </div>
        ))}

        {/* Stats / Features items */}
        {(block.block_type === 'stats' || block.block_type === 'features_with_image') && (
          <div>
            {block.block_type === 'features_with_image' && (
              <div className="mb-3">
                <label className="block text-xs text-gray-500 mb-1">Section Title</label>
                <input
                  type="text"
                  value={content.title || ''}
                  onChange={e => update('title', e.target.value)}
                  className="w-full text-xs border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:border-indigo-400"
                />
              </div>
            )}
            <label className="block text-xs text-gray-500 mb-2">Items</label>
            {(content.items || []).map((item, i) => (
              <div key={i} className="bg-gray-50 rounded-lg p-3 mb-2 space-y-2">
                <input
                  type="text"
                  value={item.title || item.number || ''}
                  onChange={e => updateItem(i, block.block_type === 'stats' ? 'number' : 'title', e.target.value)}
                  placeholder={block.block_type === 'stats' ? 'Number (e.g. 1K+)' : 'Title'}
                  className="w-full text-xs border border-gray-200 rounded px-2 py-1.5 focus:outline-none focus:border-indigo-400"
                />
                <input
                  type="text"
                  value={item.label || item.description || ''}
                  onChange={e => updateItem(i, block.block_type === 'stats' ? 'label' : 'description', e.target.value)}
                  placeholder={block.block_type === 'stats' ? 'Label' : 'Description'}
                  className="w-full text-xs border border-gray-200 rounded px-2 py-1.5 focus:outline-none focus:border-indigo-400"
                />
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  )
}

// ─── Lang Panel ───────────────────────────────────────────────────────────────
function LangPanel() {
  return (
    <div className="flex flex-col h-full">
      <div className="px-4 py-3 border-b border-gray-100">
        <span className="text-xs font-bold uppercase tracking-widest text-gray-500">Language</span>
      </div>
      <div className="flex-1 flex items-center justify-center text-gray-400 text-xs p-6 text-center">
        Language settings coming soon.
      </div>
    </div>
  )
}

// ─── Block Toolbar ────────────────────────────────────────────────────────────
function BlockToolbar({ blockType, index, total, isSaving, isSelected, onMoveUp, onMoveDown, onEditContent, onEditStyles, onDelete }) {
  return (
    <div
      className={`absolute top-0 left-1/2 -translate-x-1/2 z-30 flex items-center gap-0 rounded-b-lg overflow-hidden shadow-lg transition
        ${isSelected ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'}`}
      style={{ backgroundColor: '#6366f1' }}
    >
      <span className="px-3 py-1.5 text-xs font-bold text-white uppercase tracking-wider border-r border-indigo-400">
        {BLOCK_TYPE_LABELS[blockType] || blockType}
      </span>
      <ToolbarBtn onClick={onMoveUp}      disabled={index === 0}         title="Move up"><ChevronUp size={13} /></ToolbarBtn>
      <ToolbarBtn onClick={onMoveDown}    disabled={index === total - 1}  title="Move down"><ChevronDown size={13} /></ToolbarBtn>
      <ToolbarBtn onClick={onEditContent} title="Edit Content"><FileEdit size={13} /></ToolbarBtn>
      <ToolbarBtn onClick={onEditStyles}  title="Edit Styles">
        {isSaving ? <Loader2 size={13} className="animate-spin" /> : <Settings size={13} />}
      </ToolbarBtn>
      <ToolbarBtn onClick={onDelete} title="Delete block" danger><Trash2 size={13} /></ToolbarBtn>
    </div>
  )
}

function ToolbarBtn({ onClick, disabled, title, danger, children }) {
  return (
    <button
      onClick={e => { e.stopPropagation(); if (!disabled && onClick) onClick() }}
      title={title}
      disabled={disabled}
      className={`px-2 py-1.5 transition border-r border-indigo-400 last:border-r-0
        ${disabled ? 'opacity-30 cursor-not-allowed' : 'hover:bg-indigo-500 cursor-pointer'}
        ${danger ? 'hover:bg-red-500!' : ''} text-white`}
    >
      {children}
    </button>
  )
}

// ─── Insert Zone ──────────────────────────────────────────────────────────────
function InsertZone({ onClick, label }) {
  return (
    <div className="group relative h-5 flex items-center justify-center cursor-pointer" onClick={onClick}>
      <div className="absolute inset-x-0 top-1/2 -translate-y-1/2 h-px bg-transparent group-hover:bg-indigo-300 transition" />
      {label && (
        <div className="relative opacity-0 group-hover:opacity-100 transition flex items-center gap-1 bg-indigo-600 text-white text-xs px-3 py-0.5 rounded-full shadow">
          <Plus size={10} />
          {label}
        </div>
      )}
    </div>
  )
}

// ─── Block Type SVG Icons ─────────────────────────────────────────────────────
function BlockTypeIcon({ type }) {
  const icons = {
    features_with_image: (
      <svg width="40" height="28" viewBox="0 0 40 28" fill="none">
        <rect x="1" y="2" width="8" height="24" rx="2" fill="#e0e7ff" />
        <rect x="11" y="2" width="8" height="24" rx="2" fill="#e0e7ff" />
        <rect x="21" y="2" width="8" height="24" rx="2" fill="#e0e7ff" />
        <rect x="31" y="2" width="8" height="24" rx="2" fill="#e0e7ff" />
      </svg>
    ),
    hero: (
      <svg width="40" height="28" viewBox="0 0 40 28" fill="none">
        <rect x="1" y="1" width="38" height="26" rx="3" fill="#e0e7ff" />
        <rect x="10" y="9" width="20" height="4" rx="2" fill="#6366f1" />
        <rect x="13" y="15" width="14" height="2.5" rx="1.2" fill="#a5b4fc" />
      </svg>
    ),
    text_section: (
      <svg width="40" height="28" viewBox="0 0 40 28" fill="none">
        <rect x="4" y="5" width="22" height="4" rx="2" fill="#6366f1" />
        <rect x="4" y="12" width="32" height="2.5" rx="1.2" fill="#e5e7eb" />
        <rect x="4" y="17" width="28" height="2.5" rx="1.2" fill="#e5e7eb" />
        <rect x="4" y="22" width="20" height="2.5" rx="1.2" fill="#e5e7eb" />
      </svg>
    ),
    cta: (
      <svg width="40" height="28" viewBox="0 0 40 28" fill="none">
        <rect x="1" y="1" width="38" height="26" rx="3" fill="#fef3c7" />
        <rect x="12" y="10" width="16" height="8" rx="4" fill="#f59e0b" />
      </svg>
    ),
    stats: (
      <svg width="40" height="28" viewBox="0 0 40 28" fill="none">
        <rect x="2"  y="10" width="7" height="16" rx="1.5" fill="#6366f1" />
        <rect x="11" y="5"  width="7" height="21" rx="1.5" fill="#818cf8" />
        <rect x="20" y="12" width="7" height="14" rx="1.5" fill="#6366f1" />
        <rect x="29" y="7"  width="7" height="19" rx="1.5" fill="#818cf8" />
      </svg>
    ),
  }
  return icons[type] || <div className="w-10 h-7 bg-gray-100 rounded" />
}




<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Not Found</title>

        <style>
            /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}a{background-color:transparent}code{font-family:monospace,monospace;font-size:1em}[hidden]{display:none}html{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}*,:after,:before{box-sizing:border-box;border:0 solid #e2e8f0}a{color:inherit;text-decoration:inherit}code{font-family:Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}svg,video{display:block;vertical-align:middle}video{max-width:100%;height:auto}.bg-white{--bg-opacity:1;background-color:#fff;background-color:rgba(255,255,255,var(--bg-opacity))}.bg-gray-100{--bg-opacity:1;background-color:#f7fafc;background-color:rgba(247,250,252,var(--bg-opacity))}.border-gray-200{--border-opacity:1;border-color:#edf2f7;border-color:rgba(237,242,247,var(--border-opacity))}.border-gray-400{--border-opacity:1;border-color:#cbd5e0;border-color:rgba(203,213,224,var(--border-opacity))}.border-t{border-top-width:1px}.border-r{border-right-width:1px}.flex{display:flex}.grid{display:grid}.hidden{display:none}.items-center{align-items:center}.justify-center{justify-content:center}.font-semibold{font-weight:600}.h-5{height:1.25rem}.h-8{height:2rem}.h-16{height:4rem}.text-sm{font-size:.875rem}.text-lg{font-size:1.125rem}.leading-7{line-height:1.75rem}.mx-auto{margin-left:auto;margin-right:auto}.ml-1{margin-left:.25rem}.mt-2{margin-top:.5rem}.mr-2{margin-right:.5rem}.ml-2{margin-left:.5rem}.mt-4{margin-top:1rem}.ml-4{margin-left:1rem}.mt-8{margin-top:2rem}.ml-12{margin-left:3rem}.-mt-px{margin-top:-1px}.max-w-xl{max-width:36rem}.max-w-6xl{max-width:72rem}.min-h-screen{min-height:100vh}.overflow-hidden{overflow:hidden}.p-6{padding:1.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.pt-8{padding-top:2rem}.fixed{position:fixed}.relative{position:relative}.top-0{top:0}.right-0{right:0}.shadow{box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)}.text-center{text-align:center}.text-gray-200{--text-opacity:1;color:#edf2f7;color:rgba(237,242,247,var(--text-opacity))}.text-gray-300{--text-opacity:1;color:#e2e8f0;color:rgba(226,232,240,var(--text-opacity))}.text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}.text-gray-500{--text-opacity:1;color:#a0aec0;color:rgba(160,174,192,var(--text-opacity))}.text-gray-600{--text-opacity:1;color:#718096;color:rgba(113,128,150,var(--text-opacity))}.text-gray-700{--text-opacity:1;color:#4a5568;color:rgba(74,85,104,var(--text-opacity))}.text-gray-900{--text-opacity:1;color:#1a202c;color:rgba(26,32,44,var(--text-opacity))}.uppercase{text-transform:uppercase}.underline{text-decoration:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.tracking-wider{letter-spacing:.05em}.w-5{width:1.25rem}.w-8{width:2rem}.w-auto{width:auto}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}@-webkit-keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@-webkit-keyframes ping{0%{transform:scale(1);opacity:1}75%,to{transform:scale(2);opacity:0}}@keyframes ping{0%{transform:scale(1);opacity:1}75%,to{transform:scale(2);opacity:0}}@-webkit-keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@-webkit-keyframes bounce{0%,to{transform:translateY(-25%);-webkit-animation-timing-function:cubic-bezier(.8,0,1,1);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:translateY(0);-webkit-animation-timing-function:cubic-bezier(0,0,.2,1);animation-timing-function:cubic-bezier(0,0,.2,1)}}@keyframes bounce{0%,to{transform:translateY(-25%);-webkit-animation-timing-function:cubic-bezier(.8,0,1,1);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:translateY(0);-webkit-animation-timing-function:cubic-bezier(0,0,.2,1);animation-timing-function:cubic-bezier(0,0,.2,1)}}@media (min-width:640px){.sm\:rounded-lg{border-radius:.5rem}.sm\:block{display:block}.sm\:items-center{align-items:center}.sm\:justify-start{justify-content:flex-start}.sm\:justify-between{justify-content:space-between}.sm\:h-20{height:5rem}.sm\:ml-0{margin-left:0}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:pt-0{padding-top:0}.sm\:text-left{text-align:left}.sm\:text-right{text-align:right}}@media (min-width:768px){.md\:border-t-0{border-top-width:0}.md\:border-l{border-left-width:1px}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1024px){.lg\:px-8{padding-left:2rem;padding-right:2rem}}@media (prefers-color-scheme:dark){.dark\:bg-gray-800{--bg-opacity:1;background-color:#2d3748;background-color:rgba(45,55,72,var(--bg-opacity))}.dark\:bg-gray-900{--bg-opacity:1;background-color:#1a202c;background-color:rgba(26,32,44,var(--bg-opacity))}.dark\:border-gray-700{--border-opacity:1;border-color:#4a5568;border-color:rgba(74,85,104,var(--border-opacity))}.dark\:text-white{--text-opacity:1;color:#fff;color:rgba(255,255,255,var(--text-opacity))}.dark\:text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}}
        </style>

        <style>
            body {
                font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
            }
        </style>
    </head>
    <body class="antialiased">
        <div class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center sm:pt-0">
            <div class="max-w-xl mx-auto sm:px-6 lg:px-8">
                <div class="flex items-center pt-8 sm:justify-start sm:pt-0">
                    <div class="px-4 text-lg text-gray-500 border-r border-gray-400 tracking-wider">
                        404                    </div>

                    <div class="ml-4 text-lg text-gray-500 uppercase tracking-wider">
                        Not Found                    </div>
                </div>
            </div>
        </div>
    </body>
</html>