/**
 * AppShell — Responsive Layout
 * Desktop: Sidebar (160px) | Content | CoPilot (320px)
 * Mobile:  Top-Bar | Content | Bottom-Nav + Slide-up CoPilot
 */

import { useState, useEffect } from 'react';
import { Sidebar } from './Sidebar';
import { BottomNav } from './BottomNav';
import { CoPilotPanel } from './CoPilotPanel';
import { CoPilotSheet } from './CoPilotSheet';
import { Sparkles, Menu } from 'lucide-react';

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

export function AppShell({ children, currentPath }: AppShellProps) {
  const [copilotOpen, setCopilotOpen] = useState(false);
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    const check = () => setIsMobile(window.innerWidth < 1024);
    check();
    window.addEventListener('resize', check);
    return () => window.removeEventListener('resize', check);
  }, []);

  // Desktop: Co-Pilot default open
  useEffect(() => {
    if (!isMobile) setCopilotOpen(true);
    else setCopilotOpen(false);
  }, [isMobile]);

  return (
    <div
      className="h-screen flex flex-col overflow-hidden"
      style={{ background: 'var(--atlas-navy)' }}
    >
      {/* ── TOP BAR (immer sichtbar) ── */}
      <div
        className="flex items-center justify-between px-3 flex-shrink-0"
        style={{
          background: 'var(--atlas-surface)',
          borderBottom: '1px solid var(--atlas-border)',
          minHeight: '44px',
          zIndex: 40,
        }}
      >
        {/* Left: Logo + Breadcrumb */}
        <div className="flex items-center gap-2">
          {/* Mobile: Hamburger */}
          {isMobile && (
            <button
              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
              className="p-1 rounded mr-1"
              style={{ color: 'var(--muted-foreground)' }}
            >
              <Menu size={18} />
            </button>
          )}
          <span
            className="text-xs font-mono hidden sm:inline"
            style={{ color: 'var(--muted-foreground)' }}
          >
            ATLAS OS
          </span>
          <span className="hidden sm:inline" style={{ color: 'var(--atlas-border)' }}>›</span>
          <span
            className="text-xs font-mono"
            style={{ color: 'var(--atlas-cyan)' }}
          >
            Social
          </span>
        </div>

        {/* Right: Status + Clock + CoPilot Toggle */}
        <div className="flex items-center gap-2">
          <div className="flex items-center gap-1.5">
            <div className="atlas-status-dot online" />
            <span className="text-xs hidden sm:inline" style={{ color: 'var(--muted-foreground)' }}>
              Postiz
            </span>
          </div>

          <div className="h-3 w-px hidden sm:block" style={{ background: 'var(--atlas-border)' }} />
          <LiveClock className="hidden sm:inline" />
          <div className="h-3 w-px hidden sm:block" style={{ background: 'var(--atlas-border)' }} />

          {/* Co-Pilot Toggle */}
          <button
            onClick={() => setCopilotOpen(!copilotOpen)}
            className="flex items-center gap-1.5 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)',
            }}
          >
            <Sparkles size={11} />
            <span className="hidden sm:inline">Co-Pilot</span>
          </button>
        </div>
      </div>

      {/* ── MAIN BODY ── */}
      <div className="flex flex-1 overflow-hidden">
        {/* Desktop Sidebar */}
        {!isMobile && (
          <Sidebar currentPath={currentPath} />
        )}

        {/* Mobile Slide-out Sidebar */}
        {isMobile && mobileMenuOpen && (
          <>
            <div
              className="fixed inset-0 z-40"
              style={{ background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(2px)' }}
              onClick={() => setMobileMenuOpen(false)}
            />
            <div
              className="fixed left-0 top-0 bottom-0 z-50 flex flex-col"
              style={{
                width: '220px',
                background: 'var(--atlas-navy)',
                borderRight: '1px solid var(--atlas-border)',
                animation: 'slideInLeft 0.2s cubic-bezier(0.23,1,0.32,1)',
              }}
            >
              <Sidebar currentPath={currentPath} onNavigate={() => setMobileMenuOpen(false)} />
            </div>
          </>
        )}

        {/* Content */}
        <main
          className="flex-1 flex flex-col overflow-hidden"
          style={{ borderLeft: isMobile ? 'none' : '1px solid var(--atlas-border)' }}
        >
          <div
            className="flex-1 overflow-auto atlas-scrollbar"
            style={{ paddingBottom: isMobile ? '64px' : '0' }}
          >
            {children}
          </div>
        </main>

        {/* Desktop Co-Pilot Panel */}
        {!isMobile && copilotOpen && (
          <CoPilotPanel onClose={() => setCopilotOpen(false)} />
        )}
      </div>

      {/* ── MOBILE BOTTOM NAV ── */}
      {isMobile && (
        <BottomNav currentPath={currentPath} />
      )}

      {/* ── MOBILE CO-PILOT SHEET ── */}
      {isMobile && (
        <CoPilotSheet open={copilotOpen} onClose={() => setCopilotOpen(false)} />
      )}
    </div>
  );
}

function LiveClock({ className = '' }: { className?: string }) {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const interval = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(interval);
  }, []);

  return (
    <span
      className={`text-xs ${className}`}
      style={{
        fontFamily: 'var(--font-mono)',
        color: 'var(--muted-foreground)',
      }}
    >
      {time.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit', second: '2-digit' })}
    </span>
  );
}
