'use client'

import dynamic from 'next/dynamic'
import Link from 'next/link'
import { demoNodes } from '@/lib/presets'

const FlowCanvas = dynamic(() => import('@/components/FlowCanvas'), {
  ssr: false,
  loading: () => (
    <div className="w-full h-full flex items-center justify-center bg-slate-50">
      <div className="flex items-center gap-3">
        <div className="w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin" />
        <span className="text-slate-600">Loading flow editor...</span>
      </div>
    </div>
  ),
})

export default function TbffDemo() {
  return (
    <main className="h-screen w-screen flex flex-col">
      {/* Demo Banner */}
      <div className="bg-slate-800 text-white px-4 py-2 flex items-center justify-between text-sm flex-shrink-0">
        <div className="flex items-center gap-3">
          <Link href="/" className="flex items-center gap-2 hover:opacity-80 transition-opacity">
            <div className="w-6 h-6 bg-gradient-to-br from-amber-400 to-emerald-500 rounded flex items-center justify-center font-bold text-slate-900 text-[10px]">
              rF
            </div>
            <span className="font-medium">rFunds</span>
          </Link>
          <span className="text-slate-500">|</span>
          <span className="text-slate-300">Interactive Demo</span>
        </div>
        <Link
          href="/space"
          className="px-3 py-1 bg-emerald-600 hover:bg-emerald-500 rounded text-xs font-medium transition-colors"
        >
          Create Your Own
        </Link>
      </div>

      {/* Canvas */}
      <div className="flex-1">
        <FlowCanvas initialNodes={demoNodes} mode="demo" />
      </div>
    </main>
  )
}