import { STEP_LABELS } from '../utils/constants.js';

const LogoSvg = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="#7ec87e" strokeWidth="2.2" strokeLinecap="round">
    <path d="M12 2C8 2 4 6 4 10c0 5 8 12 8 12s8-7 8-12c0-4-4-8-8-8z"/>
    <path d="M12 6v8M9 9l3-3 3 3"/>
  </svg>
);

const CheckSvg = () => (
  <svg width="8" height="8" viewBox="0 0 12 12" fill="none" stroke="#fff" strokeWidth="2.5" strokeLinecap="round">
    <path d="M2 6l3 3 5-5"/>
  </svg>
);

export default function Header({ step, onNav, sub }) {
  return (
    <div className="hdr">
      <div className="hdr-brand">
        <div className="hdr-logo"><LogoSvg /></div>
        <span className="hdr-title">Dabur Analytics</span>
        <span className="hdr-sub">/ {sub}</span>
      </div>

      <div className="stepper" style={{ background: 'transparent', border: 'none', height: 'auto' }}>
        {STEP_LABELS.map((label, i) => {
          const n = i + 1;
          const isDone = n < step;
          const isActive = n === step;
          const isPend = n > step;
          const cls = isDone ? 'stp done' + (n < step ? ' clickable' : '') : isActive ? 'stp active' : 'stp pend';
          return (
            <>
              <div
                key={n}
                className={cls}
                style={{ cursor: isDone ? 'pointer' : 'default' }}
                onClick={() => isDone && onNav(n)}
                title={isDone ? `Go back to ${label}` : undefined}
              >
                <div className="stp-n">
                  {isDone ? <CheckSvg /> : n}
                </div>
                <span className="stp-l" style={{
                  color: isDone ? 'rgba(255,255,255,.55)'
                    : isActive ? 'rgba(255,255,255,.88)'
                    : 'rgba(255,255,255,.35)'
                }}>
                  {label}
                </span>
              </div>
              {n < STEP_LABELS.length && (
                <div key={`line-${n}`} className="stp-line" style={{ background: 'rgba(255,255,255,.18)' }} />
              )}
            </>
          );
        })}
      </div>

      <span className="hdr-badge">Step {step} of 7</span>
    </div>
  );
}