// ArtisanFlow — Header mobile réutilisable + Bottom Nav

function AfScreenHeader({ title, subtitle, t, rightAction, back, onBack, tape }) {
  return (
    <div style={{ position: 'relative', flexShrink: 0 }}>
      {tape && <AfHazardBand height={4} />}
      <div style={{
        padding: '14px 20px 12px',
        background: t.bg,
        borderBottom: `1px solid ${t.border}`,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, flex: 1, minWidth: 0 }}>
          {back && (
            <button onClick={onBack} aria-label="Retour" style={{
              width: 40, height: 40, borderRadius: 6,
              background: t.bgElevated, border: `1px solid ${t.border}`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              flexShrink: 0,
            }}>
              <lucide.ChevronLeft size={22} color={t.text} strokeWidth={2.5}/>
            </button>
          )}
          <div style={{ minWidth: 0 }}>
            <div style={{
              fontSize: 22, fontWeight: 800, color: t.text,
              letterSpacing: -0.5, lineHeight: 1.1,
              overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
            }}>
              {title}
            </div>
            {subtitle && (
              <div style={{ fontSize: 12, color: t.textMuted, marginTop: 2, fontWeight: 500 }}>
                {subtitle}
              </div>
            )}
          </div>
        </div>
        {rightAction}
      </div>
    </div>
  );
}

function AfBottomNav({ active, onChange, t }) {
  const { Home, FileText, Users } = lucide;
  // `notes` = liste de tous les devis (écran `AfPaiements` / « Mes devis ») — l’onglet « Instant Note » est le CTA sur l’accueil
  const tabs = [
    { id: 'dashboard', label: 'Accueil', icon: Home },
    { id: 'notes',     label: 'Devis',  icon: FileText },
    { id: 'clients',   label: 'Clients', icon: Users },
  ];
  return (
    <div role="tablist" aria-label="Navigation principale" style={{
      height: 72, background: t.bgElevated,
      borderTop: `1px solid ${t.borderStrong}`,
      display: 'flex', flexShrink: 0,
      paddingBottom: 4,
    }}>
      {tabs.map(({ id, label, icon: Ic }) => (
        <AfTab
          key={id}
          icon={<Ic size={22} strokeWidth={active === id ? 2.6 : 2.1} />}
          label={label}
          active={active === id}
          onClick={() => onChange(id)}
          t={t}
        />
      ))}
    </div>
  );
}

Object.assign(window, { AfScreenHeader, AfBottomNav });