// Shell: Sidebar + Topbar

const SIDEBAR_ITEMS = [
  { id: 'overview',  label: 'Übersicht',          icon: 'overview' },
  { id: 'pipeline',  label: 'Lead Pipeline',      icon: 'pipeline' },
  { id: 'leads',     label: 'Potenzielle Leads',  icon: 'leads' },
  { id: 'outreach',  label: 'Outreach',           icon: 'outreach' },
  { id: 'sync',      label: 'Sync & Integrationen', icon: 'sync' },
  { id: 'storage',   label: 'Speicherung',        icon: 'storage' },
  { id: 'log',       label: 'Aktivitätsprotokoll',icon: 'log' },
  { id: 'systems',   label: 'Systeme',            icon: 'systems' },
  { id: 'settings',  label: 'Einstellungen',      icon: 'settings' }
];

function Sidebar({ active, onNav }) {
  return (
    <aside style={{
      width: 232, flexShrink: 0,
      background: 'linear-gradient(180deg, var(--bg-1), var(--bg-0))',
      borderRight: '1px solid var(--border-1)',
      display: 'flex', flexDirection: 'column',
      padding: '20px 14px',
      position: 'relative', zIndex: 2
    }}>
      <div style={{ padding: '4px 8px 22px' }}>
        <window.VelunaLogo size={32} />
      </div>

      <nav style={{ display: 'flex', flexDirection: 'column', gap: 2, flex: 1 }}>
        {SIDEBAR_ITEMS.map(item => {
          const Icon = window.Icons[item.icon];
          const isActive = active === item.id;
          return (
            <button key={item.id}
              onClick={() => onNav(item.id)}
              style={{
                display: 'flex', alignItems: 'center', gap: 12,
                padding: '10px 12px',
                borderRadius: 10,
                border: 'none', background: isActive ? 'var(--accent-soft)' : 'transparent',
                color: isActive ? 'var(--accent)' : 'var(--text-2)',
                fontSize: 13, fontWeight: 500, fontFamily: 'var(--font-ui)',
                cursor: 'pointer', textAlign: 'left',
                transition: 'all 0.15s',
                position: 'relative'
              }}
              onMouseEnter={(e) => { if (!isActive) e.currentTarget.style.background = 'var(--bg-2)'; e.currentTarget.style.color = 'var(--text-1)'; }}
              onMouseLeave={(e) => { if (!isActive) e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = isActive ? 'var(--accent)' : 'var(--text-2)'; }}
            >
              {isActive && <span style={{ position: 'absolute', left: -14, top: 8, bottom: 8, width: 2, background: 'var(--accent)', borderRadius: 2 }} />}
              <Icon size={17} stroke={isActive ? 1.8 : 1.6} />
              <span style={{ flex: 1 }}>{item.label}</span>
              {item.id === 'leads' && <span className="pill pill-info" style={{ fontSize: 10, padding: '1px 6px' }}>247</span>}
              {item.id === 'sync' && <span className="pill pill-danger" style={{ fontSize: 10, padding: '1px 6px' }}>23</span>}
            </button>
          );
        })}
      </nav>

      {/* User card */}
      <div style={{
        marginTop: 12, padding: '12px',
        background: 'var(--bg-2)', borderRadius: 12,
        border: '1px solid var(--border-1)',
        display: 'flex', alignItems: 'center', gap: 10
      }}>
        <window.Avatar name="Veluna Growth" size={34} color="#22D3EE" />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--text-1)' }}>Veluna Growth</div>
          <div style={{ fontSize: 11, color: 'var(--text-3)' }}>Admin</div>
        </div>
        <button className="btn-ghost btn" style={{ padding: 6 }} title="Logout">
          <window.Icons.logout size={14} />
        </button>
      </div>
    </aside>
  );
}

function Topbar({ title, sub, time, onRefresh, range, onRangeChange, paused, onPauseToggle }) {
  return (
    <header style={{
      display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between',
      padding: '20px 28px 16px',
      background: 'linear-gradient(180deg, var(--bg-1), transparent)',
      borderBottom: '1px solid var(--border-1)',
      gap: 24
    }}>
      <div style={{ minWidth: 0 }}>
        <div className="screen-title" style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          {title}
          <span className="pill pill-success" style={{ fontSize: 11 }}>
            <span className="pill-dot pulse" />
            Alle Systeme operational
          </span>
        </div>
        <div className="screen-sub">{sub}</div>
      </div>

      <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexShrink: 0 }}>
        <div style={{ textAlign: 'right' }}>
          <div style={{ fontSize: 11, color: 'var(--text-4)' }}>Aktualisiert</div>
          <div className="mono" style={{ fontSize: 13, color: 'var(--text-1)', fontWeight: 500 }}>{time}</div>
        </div>
        <button className="btn btn-ghost focus-ring" onClick={onRefresh} title="Aktualisieren" style={{ padding: 8 }}>
          <window.Icons.refresh size={15} />
        </button>
        <button className="btn focus-ring" onClick={onPauseToggle} title={paused ? 'Live-Daten starten' : 'Live-Daten pausieren'} style={{ padding: 8 }}>
          {paused ? <window.Icons.play size={14} /> : <window.Icons.pause size={14} />}
        </button>
        <RangePicker value={range} onChange={onRangeChange} />
        <button className="btn btn-ghost" style={{ padding: 8, position: 'relative' }} title="Benachrichtigungen">
          <window.Icons.bell size={15} />
          <span style={{ position: 'absolute', top: 4, right: 4, width: 7, height: 7, borderRadius: '50%', background: 'var(--danger)', boxShadow: '0 0 0 2px var(--bg-1)' }} />
        </button>
      </div>
    </header>
  );
}

function RangePicker({ value, onChange }) {
  const [open, setOpen] = useState(false);
  const options = [
    { id: '1h',  label: 'Letzte Stunde' },
    { id: '24h', label: 'Letzte 24 Stunden' },
    { id: '7d',  label: 'Letzte 7 Tage' },
    { id: '30d', label: 'Letzte 30 Tage' },
    { id: '90d', label: 'Letzte 90 Tage' }
  ];
  const selected = options.find(o => o.id === value) || options[1];
  return (
    <div style={{ position: 'relative' }}>
      <button className="btn focus-ring" onClick={() => setOpen(o => !o)} style={{ gap: 8 }}>
        <window.Icons.calendar size={14} />
        <span>{selected.label}</span>
        <window.Icons.chevdown size={13} />
      </button>
      {open && (
        <>
          <div onClick={() => setOpen(false)} style={{ position: 'fixed', inset: 0, zIndex: 10 }} />
          <div className="fade-in" style={{
            position: 'absolute', right: 0, top: 'calc(100% + 6px)',
            background: 'var(--bg-3)', border: '1px solid var(--border-2)',
            borderRadius: 10, padding: 4, zIndex: 11, minWidth: 200,
            boxShadow: '0 12px 32px rgba(0,0,0,0.4)'
          }}>
            {options.map(o => (
              <button key={o.id}
                onClick={() => { onChange(o.id); setOpen(false); }}
                style={{
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                  width: '100%', padding: '8px 10px',
                  border: 'none', background: o.id === value ? 'var(--accent-soft)' : 'transparent',
                  color: o.id === value ? 'var(--accent)' : 'var(--text-2)',
                  fontSize: 12, borderRadius: 6, cursor: 'pointer', textAlign: 'left',
                  fontFamily: 'var(--font-ui)'
                }}>
                {o.label}
                {o.id === value && <window.Icons.check size={12} />}
              </button>
            ))}
          </div>
        </>
      )}
    </div>
  );
}

window.Sidebar = Sidebar;
window.Topbar = Topbar;
window.SIDEBAR_ITEMS = SIDEBAR_ITEMS;