import { useState } from 'react'
import { FileText, Folder, Search, ExternalLink } from 'lucide-react'

const WIKI_PAGES = [
  {
    id: 'overview',
    title: 'System Overview',
    content: `Aether System Overview

Identity
Name: Aether
Role: Autonomous Orchestrator
Initialized: 2026-02-23

Core Directive
Transform high-level visions into production-ready software.

Infrastructure
- Gitea: http://192.168.5.35:3000
- Vaultwarden: http://localhost:8080
- AetherOS: http://localhost:3001

The Collective
- Architect: Project scoping
- Researcher: Documentation
- Engineer: Implementation
- QA Auditor: Testing
- Publisher: GitHub releases`
  },
  {
    id: 'architecture',
    title: 'Architecture',
    content: `Aether Architecture

Component Flow
User Input -> Aether Orchestrator -> Sub-agents -> Output

Data Flow
1. Planning: Architect scopes project
2. Implementation: Engineer writes code
3. Release: Publisher promotes to GitHub

Memory Architecture
- Short-term: Session context
- Long-term: /aether_core/memory/`
  },
  {
    id: 'security',
    title: 'Security Policy',
    content: `Security Policy

Credential Management
All credentials stored in Vaultwarden:
- SSH private keys
- API tokens
- Service passwords

Access Control
- SSH key authentication only
- No password authentication

Key Rotation
- SSH Keys: 90 days
- API Tokens: 60 days`
  }
]

function Wiki() {
  const [activePage, setActivePage] = useState('overview')

  const activeContent = WIKI_PAGES.find(p => p.id === activePage)?.content || ''

  return (
    <div style={{ height: '100%', display: 'flex', gap: '20px' }}>
      <div style={{ width: '240px', minWidth: '240px', borderRight: '1px solid rgba(99, 102, 241, 0.2)', paddingRight: '20px' }}>
        <div style={{ marginBottom: '20px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '10px 12px', background: 'rgba(255,255,255,0.05)', borderRadius: '8px' }}>
            <Search size={16} color="#a0a0c0" />
            <input type="text" placeholder="Search wiki..." style={{ background: 'transparent', border: 'none', color: 'inherit', fontSize: '14px', outline: 'none', width: '100%' }} />
          </div>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
          {WIKI_PAGES.map(page => (
            <button key={page.id} onClick={() => setActivePage(page.id)} style={{ display: 'flex', alignItems: 'center', gap: '10px', padding: '10px 12px', background: activePage === page.id ? 'rgba(99, 102, 241, 0.2)' : 'transparent', border: 'none', borderRadius: '8px', color: activePage === page.id ? '#6366f1' : 'inherit', fontSize: '14px', cursor: 'pointer', textAlign: 'left' }}>
              <FileText size={16} />
              {page.title}
            </button>
          ))}
        </div>
      </div>

      <div style={{ flex: 1, overflow: 'auto', whiteSpace: 'pre-wrap', lineHeight: 1.7 }}>
        {activeContent}
        <div style={{ marginTop: '40px', paddingTop: '20px', borderTop: '1px solid rgba(99, 102, 241, 0.2)', display: 'flex', alignItems: 'center', gap: '8px', fontSize: '13px', color: '#a0a0c0' }}>
          <ExternalLink size={14} />
          <span>Last updated: 2026-02-23 by Aether</span>
        </div>
      </div>
    </div>
  )
}

export default Wiki