import { useState, useEffect } from 'react';
import { FileText, Box } from 'lucide-react';
import { ApiDocViewer } from './components/ApiDocViewer';
import BlueprintPage from './components/blueprint/BlueprintPage';
import { config } from './config';

const _origLog = console.log;
const _origError = console.error;
const _origWarn = console.warn;
console.log = (...args) => { window.electronAPI?.log('log', ...args); _origLog.apply(console, args); };
console.error = (...args) => { window.electronAPI?.log('error', ...args); _origError.apply(console, args); };
console.warn = (...args) => { window.electronAPI?.log('warn', ...args); _origWarn.apply(console, args); };

type Page = 'docs' | 'blueprint';

declare global {
  interface Window {
    electronAPI?: {
      listDocsFiles: (basePath: string) => Promise<{ name: string; path: string; relativePath: string }[]>;
      readDocFile: (filePath: string) => Promise<string | null>;
      log: (level: string, ...args: unknown[]) => void;
    };
  }
}

function App() {
  const [currentPage, setCurrentPage] = useState<Page>('docs');
  const [docsPath, setDocsPath] = useState<string>('');
  
  useEffect(() => {
    document.title = config.projectName;
  }, []);
  
  return (
    <div className="h-screen flex flex-col">
      <header className="h-12 bg-zinc-900 border-b border-zinc-800 flex items-center px-4 justify-between">
        <div className="flex items-center gap-3">
          <h1 className="text-sm font-medium text-white">{config.projectName}</h1>
        </div>
        <div className="flex items-center gap-2">
          <nav className="flex gap-1">
            <button
              onClick={() => setCurrentPage('docs')}
              className={`flex items-center gap-2 px-3 py-1.5 rounded text-sm ${
                currentPage === 'docs' 
                  ? 'bg-zinc-800 text-white' 
                  : 'text-zinc-400 hover:text-white hover:bg-zinc-800/50'
              }`}
            >
              <FileText size={16} />
              API 文档
            </button>
            <button
              onClick={() => setCurrentPage('blueprint')}
              className={`flex items-center gap-2 px-3 py-1.5 rounded text-sm ${
                currentPage === 'blueprint' 
                  ? 'bg-zinc-800 text-white' 
                  : 'text-zinc-400 hover:text-white hover:bg-zinc-800/50'
              }`}
            >
              <Box size={16} />
              3D 蓝图
            </button>
          </nav>
        </div>
      </header>
      <main className="flex-1 overflow-hidden">
        {currentPage === 'docs' ? (
          <ApiDocViewer onDocsPathChange={setDocsPath} />
        ) : (
          <BlueprintPage docsPath={docsPath} />
        )}
      </main>
    </div>
  );
}

export default App;