/**
 * AppShell — 3-Spalten-Layout
 * Bloomberg Terminal × Raumschiff-Brücke
 * 
 * Layout: Sidebar (160px) | Content (flex-grow) | CoPilot (320px)
 */

import { useState } from 'react';
import { Sidebar } from './Sidebar';
import { CoPilotPanel } from './CoPilotPanel';

interface AppShellProps {
  children: React.ReactNode;
  currentPath: string;
}

export function AppShell({ children, currentPath }: AppShellProps) {
  const [copilotOpen, setCopilotOpen] = useState(true);

  return (
    <div 
      className="h-screen flex overflow-hidden"
      style={{ background: 'var(--atlas-navy)' }}
    >
      {/* Left Sidebar Navigation */}
      <Sidebar currentPath={currentPath} />
      
      {/* Main Content Area */}
      <main 
        className="flex-1 flex flex-col overflow-hidden"
        style={{ borderLeft: '1px solid var(--atlas-border)' }}
      >
        {/* Top Bar */}
        <div 
          className="flex items-center justify-between px-4 py-2 flex-shrink-0"
          style={{ 
            background: 'var(--atlas-surface)',
            borderBottom: '1px solid var(--atlas-border)',
            minHeight: '44px'
          }}
        >
          <div className="flex items-center gap-2">
            <span 
              className="text-xs font-mono"
              style={{ color: 'var(--muted-foreground)' }}
            >
              ATLAS OS
            </span>
            <span style={{ color: 'var(--atlas-border)' }}>›</span>
            <span 
              className="text-xs font-mono"
              style={{ color: 'var(--atlas-cyan)' }}
            >
              Social Command Center
            </span>
          </div>
          
          <div className="flex items-center gap-3">
            {/* System Status */}
            <div className="flex items-center gap-1.5">
              <div className="atlas-status-dot online" />
              <span className="text-xs" style={{ color: 'var(--muted-foreground)' }}>
                Postiz
              </span>
            </div>
            
            <div 
              className="h-3 w-px"
              style={{ background: 'var(--atlas-border)' }}
            />
            
            {/* Live Clock */}
            <LiveClock />
            
            <div 
              className="h-3 w-px"
              style={{ background: 'var(--atlas-border)' }}
            />
            
            {/* Co-Pilot Toggle */}
            <button
              onClick={() => setCopilotOpen(!copilotOpen)}
              className="text-xs px-2 py-1 rounded transition-colors"
              style={{ 
                color: copilotOpen ? 'var(--atlas-cyan)' : 'var(--muted-foreground)',
                background: copilotOpen ? 'oklch(0.82 0.18 210 / 0.08)' : 'transparent',
                border: `1px solid ${copilotOpen ? 'oklch(0.82 0.18 210 / 0.25)' : 'var(--atlas-border)'}`,
                fontFamily: 'var(--font-mono)',
              }}
            >
              Co-Pilot {copilotOpen ? '▶' : '◀'}
            </button>
          </div>
        </div>
        
        {/* Page Content */}
        <div className="flex-1 overflow-auto atlas-scrollbar">
          {children}
        </div>
      </main>
      
      {/* Right Co-Pilot Panel */}
      {copilotOpen && (
        <CoPilotPanel onClose={() => setCopilotOpen(false)} />
      )}
    </div>
  );
}

function LiveClock() {
  const [time, setTime] = useState(new Date());
  
  // Update every second
  useState(() => {
    const interval = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(interval);
  });
  
  return (
    <span 
      className="text-xs"
      style={{ 
        fontFamily: 'var(--font-mono)',
        color: 'var(--muted-foreground)'
      }}
    >
      {time.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit', second: '2-digit' })}
    </span>
  );
}
