'use client';

import { useEffect, useState } from 'react';
import { checkHealth } from '@/lib/api';
import { Shield } from 'lucide-react';

export default function PortalHeader() {
  const [nodeStatus, setNodeStatus] = useState<'online' | 'offline' | 'checking'>('checking');
  const [nodeVersion, setNodeVersion] = useState('');

  useEffect(() => {
    let mounted = true;
    async function poll() {
      try {
        const h = await checkHealth();
        if (!mounted) return;
        setNodeStatus('online');
        setNodeVersion(h.node);
      } catch {
        if (!mounted) return;
        setNodeStatus('offline');
      }
    }
    poll();
    const iv = setInterval(poll, 30_000);
    return () => { mounted = false; clearInterval(iv); };
  }, []);

  return (
    <header className="sticky top-0 z-40 h-14 flex items-center justify-between px-6 glass border-b border-surface-800">
      {/* Page title slot — parent fills with children */}
      <div className="flex items-center gap-3" />

      {/* Right side */}
      <div className="flex items-center gap-4">
        {/* Node status */}
        <div className="flex items-center gap-2 text-xs">
          <span
            className={`status-dot status-dot--${nodeStatus === 'online' ? 'online' : 'offline'}`}
          />
          <span className="text-surface-400">
            {nodeStatus === 'online' ? `Node ${nodeVersion}` : 'Offline'}
          </span>
        </div>

        {/* Wallet badge placeholder */}
        <div className="flex items-center gap-2 px-3 py-1.5 rounded-lg glass text-xs text-surface-300">
          <Shield className="w-3.5 h-3.5 text-accent-cyan" />
          Wallet Connected
        </div>
      </div>
    </header>
  );
}