'use client'

import dynamic from 'next/dynamic'
import Link from 'next/link'
import { useState, useCallback, useEffect, useRef } from 'react'
import { starterNodes } from '@/lib/presets'
import { serializeState, deserializeState, saveToLocal, loadFromLocal, listSavedSpaces, deleteFromLocal } from '@/lib/state'
import type { FlowNode, SpaceConfig } from '@/lib/types'

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 SpacePage() {
  const [currentNodes, setCurrentNodes] = useState<FlowNode[]>(starterNodes)
  const [spaceName, setSpaceName] = useState('')
  const [showSaveDialog, setShowSaveDialog] = useState(false)
  const [showLoadDialog, setShowLoadDialog] = useState(false)
  const [savedSpaces, setSavedSpaces] = useState<SpaceConfig[]>([])
  const [copied, setCopied] = useState(false)
  const [loaded, setLoaded] = useState(false)
  const nodesRef = useRef<FlowNode[]>(starterNodes)

  // Load from URL hash on mount
  useEffect(() => {
    if (typeof window === 'undefined') return
    const hash = window.location.hash.slice(1)
    if (hash.startsWith('s=')) {
      const compressed = hash.slice(2)
      const state = deserializeState(compressed)
      if (state) {
        setCurrentNodes(state.nodes)
        nodesRef.current = state.nodes
      }
    }
    setLoaded(true)
  }, [])

  const handleNodesChange = useCallback((nodes: FlowNode[]) => {
    nodesRef.current = nodes
  }, [])

  const handleShare = useCallback(() => {
    const compressed = serializeState(nodesRef.current)
    const url = `${window.location.origin}/space#s=${compressed}`
    navigator.clipboard.writeText(url).then(() => {
      setCopied(true)
      setTimeout(() => setCopied(false), 2000)
    })
  }, [])

  const handleSave = useCallback(() => {
    if (!spaceName.trim()) return
    saveToLocal(spaceName.trim(), nodesRef.current)
    setShowSaveDialog(false)
    setSpaceName('')
  }, [spaceName])

  const handleLoadOpen = useCallback(() => {
    setSavedSpaces(listSavedSpaces())
    setShowLoadDialog(true)
  }, [])

  const handleLoadSpace = useCallback((config: SpaceConfig) => {
    setCurrentNodes(config.nodes)
    nodesRef.current = config.nodes
    setShowLoadDialog(false)
  }, [])

  const handleDeleteSpace = useCallback((name: string) => {
    deleteFromLocal(name)
    setSavedSpaces(listSavedSpaces())
  }, [])

  const handleReset = useCallback(() => {
    if (confirm('Reset canvas to a single empty funnel? This cannot be undone.')) {
      setCurrentNodes([...starterNodes])
      nodesRef.current = [...starterNodes]
      // Clear URL hash
      window.history.replaceState(null, '', window.location.pathname)
    }
  }, [])

  if (!loaded) {
    return (
      <div className="h-screen w-screen 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...</span>
        </div>
      </div>
    )
  }

  return (
    <main className="h-screen w-screen flex flex-col">
      {/* Toolbar */}
      <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">Your Space</span>
        </div>

        <div className="flex items-center gap-2">
          <button
            onClick={() => setShowSaveDialog(true)}
            className="px-3 py-1 bg-blue-600 hover:bg-blue-500 rounded text-xs font-medium transition-colors"
          >
            Save
          </button>
          <button
            onClick={handleLoadOpen}
            className="px-3 py-1 bg-slate-600 hover:bg-slate-500 rounded text-xs font-medium transition-colors"
          >
            Load
          </button>
          <button
            onClick={handleShare}
            className="px-3 py-1 bg-emerald-600 hover:bg-emerald-500 rounded text-xs font-medium transition-colors"
          >
            {copied ? 'Copied!' : 'Share'}
          </button>
          <button
            onClick={handleReset}
            className="px-3 py-1 bg-slate-700 hover:bg-red-600 rounded text-xs font-medium transition-colors"
          >
            Reset
          </button>
        </div>
      </div>

      {/* Canvas */}
      <div className="flex-1">
        <FlowCanvas
          key={JSON.stringify(currentNodes.map(n => n.id))}
          initialNodes={currentNodes}
          mode="space"
          onNodesChange={handleNodesChange}
        />
      </div>

      {/* Save Dialog */}
      {showSaveDialog && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50" onClick={() => setShowSaveDialog(false)}>
          <div className="bg-white rounded-xl shadow-2xl p-6 w-80" onClick={e => e.stopPropagation()}>
            <h3 className="text-lg font-bold text-slate-800 mb-4">Save Space</h3>
            <input
              type="text"
              value={spaceName}
              onChange={e => setSpaceName(e.target.value)}
              placeholder="Space name..."
              className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mb-4 text-slate-800"
              autoFocus
              onKeyDown={e => e.key === 'Enter' && handleSave()}
            />
            <div className="flex gap-2">
              <button
                onClick={handleSave}
                disabled={!spaceName.trim()}
                className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-500 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
              >
                Save
              </button>
              <button
                onClick={() => setShowSaveDialog(false)}
                className="px-4 py-2 text-slate-600 hover:text-slate-800 text-sm"
              >
                Cancel
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Load Dialog */}
      {showLoadDialog && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50" onClick={() => setShowLoadDialog(false)}>
          <div className="bg-white rounded-xl shadow-2xl p-6 w-96 max-h-[60vh] overflow-y-auto" onClick={e => e.stopPropagation()}>
            <h3 className="text-lg font-bold text-slate-800 mb-4">Load Space</h3>
            {savedSpaces.length === 0 ? (
              <p className="text-sm text-slate-500 py-4 text-center">No saved spaces yet.</p>
            ) : (
              <div className="space-y-2">
                {savedSpaces.map((space) => (
                  <div
                    key={space.name}
                    className="flex items-center justify-between p-3 bg-slate-50 rounded-lg hover:bg-slate-100 transition-colors"
                  >
                    <button
                      onClick={() => handleLoadSpace(space)}
                      className="flex-1 text-left"
                    >
                      <div className="text-sm font-medium text-slate-800">{space.name}</div>
                      <div className="text-[10px] text-slate-500">
                        {space.nodes.filter(n => n.type === 'funnel').length} funnels &bull;{' '}
                        {space.nodes.filter(n => n.type === 'outcome').length} outcomes &bull;{' '}
                        {new Date(space.updatedAt).toLocaleDateString()}
                      </div>
                    </button>
                    <button
                      onClick={() => handleDeleteSpace(space.name)}
                      className="text-slate-400 hover:text-red-500 p-1 transition-colors"
                    >
                      <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                      </svg>
                    </button>
                  </div>
                ))}
              </div>
            )}
            <button
              onClick={() => setShowLoadDialog(false)}
              className="w-full mt-4 px-4 py-2 text-slate-600 hover:text-slate-800 text-sm border border-slate-200 rounded-lg"
            >
              Close
            </button>
          </div>
        </div>
      )}
    </main>
  )
}