src/App.tsx

import React, { useState } from 'react';
import FlowCanvas from './components/Canvas/FlowCanvas';
import ChatBox from './components/Chat/ChatBox';
import { MessageSquare, LayoutGrid, Download, Trash2, Share2 } from 'lucide-react';
import { useStore } from './store/useStore';

function App() {
  const [isChatOpen, setIsChatOpen] = useState(false);
  const { updateFlow } = useStore();

  const handleClear = () => {
    if (confirm('确定要清空当前画布吗？')) {
      updateFlow([], []);
    }
  };

  const handleExport = () => {
    alert('导出功能正在开发中...');
  };

  return (
    <div className="flex h-screen w-screen overflow-hidden bg-gray-50">
      {/* Tool Sidebar */}
      <div className="hidden lg:flex flex-col w-16 bg-white border-r border-gray-200 py-6 items-center gap-8 shadow-sm">
        <div className="p-3 bg-blue-600 rounded-2xl text-white shadow-lg shadow-blue-200">
          <LayoutGrid className="w-6 h-6" />
        </div>
        
        <div className="flex flex-col gap-6 mt-auto mb-6">
          <button onClick={handleExport} title="导出图片" className="p-3 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-xl transition-all">
            <Download className="w-5 h-5" />
          </button>
          <button onClick={handleClear} title="清空画布" className="p-3 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-xl transition-all">
            <Trash2 className="w-5 h-5" />
          </button>
          <button title="分享链接" className="p-3 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-xl transition-all">
            <Share2 className="w-5 h-5" />
          </button>
        </div>
      </div>

      {/* Main Canvas Area */}
      <div className="flex-1 relative">
        <header className="absolute top-0 left-0 right-0 h-16 bg-white/80 backdrop-blur-md border-b border-gray-100 flex items-center px-6 z-10 justify-between lg:justify-start">
          <div className="flex items-center gap-3">
            <h1 className="font-bold text-xl text-gray-800 tracking-tight">AI 对话式流程图生成器</h1>
            <span className="px-2 py-0.5 bg-blue-100 text-blue-600 text-[10px] font-bold rounded uppercase tracking-wider">Beta</span>
          </div>
          <button
            className="lg:hidden p-2 text-gray-600"
            onClick={() => setIsChatOpen(true)}
          >
            <MessageSquare className="w-6 h-6" />
          </button>
        </header>
        
        <FlowCanvas />
        
        {/* Mobile Chat Toggle Button */}
        <button
          className="lg:hidden absolute bottom-6 right-6 p-4 bg-blue-600 text-white rounded-2xl shadow-xl shadow-blue-200 z-10 hover:scale-105 active:scale-95 transition-all"
          onClick={() => setIsChatOpen(true)}
        >
          <MessageSquare className="w-6 h-6" />
        </button>
      </div>

      {/* Desktop Chat Sidebar */}
      <div className="hidden lg:block h-full z-20">
        <ChatBox />
      </div>

      {/* Mobile Chat Drawer */}
      {isChatOpen && (
        <div className="fixed inset-0 z-50 lg:hidden">
          <div className="absolute inset-0 bg-black/40 backdrop-blur-sm transition-opacity" onClick={() => setIsChatOpen(false)} />
          <div className="absolute right-0 top-0 bottom-0 w-80 bg-white shadow-2xl animate-in slide-in-from-right duration-300">
            <ChatBox isMobile onClose={() => setIsChatOpen(false)} />
          </div>
        </div>
      )}
    </div>
  );
}

export default App;