// src/components/Header.jsx

import { useState, useEffect } from 'react';

export default function Header({ onReset, showReset }) {
  const [backendOnline, setBackendOnline] = useState(null); // null = unknown

  useEffect(() => {
    const checkBackend = async () => {
      try {
        const resp = await fetch('http://localhost:8000/', {
          method: 'GET',
          signal: AbortSignal.timeout(2000),
        });
        setBackendOnline(resp.ok || resp.status < 500);
      } catch {
        setBackendOnline(false);
      }
    };
    checkBackend();
  }, []);

  return (
    <header className="header">
      <div className="container">
        <div className="header-inner">
          {/* Logo */}
          <a
            href="#"
            className="logo"
            onClick={(e) => { e.preventDefault(); onReset && onReset(); }}
            aria-label="MultiSense-DF Home"
          >
            <div className="logo-icon" aria-hidden="true">
              <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
                <path
                  d="M3 17 L6 10 L11 14.5 L15 7 L19 17"
                  stroke="white"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
                <circle cx="11" cy="11" r="2.5" fill="rgba(255,255,255,0.9)" />
              </svg>
            </div>
            <span className="logo-text">
              MultiSense<span>-DF</span>
            </span>
          </a>

          {/* Nav */}
          <nav className="header-nav" aria-label="Status bar">
            {/* Backend status chip */}
            <div className="nav-chip" aria-live="polite">
              <span
                className={`status-dot ${backendOnline === false ? 'offline' : ''}`}
                aria-hidden="true"
              />
              {backendOnline === null
                ? 'Connecting…'
                : backendOnline
                ? 'Backend Online'
                : 'Demo Mode'}
            </div>

            {/* Research badge */}
            <div className="nav-chip">
              <span aria-hidden="true">🎓</span>
              Research Preview
            </div>

            {showReset && (
              <button
                className="btn btn-ghost"
                onClick={onReset}
                aria-label="Start a new analysis"
              >
                ← New Analysis
              </button>
            )}
          </nav>
        </div>
      </div>
    </header>
  );
}