// In-app help screen: how to connect your own Claude via MCP, with the
// user's real personal URL already filled in. Replaces the old static
// /claude/ page for anything account-specific.

function HelpView({ user, onClose }) {
  const mcpUrl = user?.mcpUrl || '';
  return (
    <div className="modal-back" onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="modal" role="dialog" aria-modal="true">
        <div className="modal-h">
          <div className="modal-h-title">{t('help.title')}</div>
          <button className="icon-btn sm" onClick={onClose} aria-label={t('editor.close')}>
            <Icon.close width="14" height="14"/>
          </button>
        </div>
        <div className="modal-body">
          <div className="account-section">
            <div className="account-section-title">{t('help.sectionsTitle')}</div>
            <p className="account-note"><strong>{t('help.sectionsAgendaTitle')}</strong> — {t('help.sectionsAgendaBody')}</p>
            <p className="account-note"><strong>{t('help.sectionsCalendarTitle')}</strong> — {t('help.sectionsCalendarBody')}</p>
            <p className="account-note"><strong>{t('help.sectionsProjectsTitle')}</strong> — {t('help.sectionsProjectsBody')}</p>
          </div>

          <p>{t('help.intro')}</p>
          <div className="mcp-url-box">{mcpUrl}</div>

          <div className="account-section">
            <div className="account-section-title">{t('help.cliTitle')}</div>
            <div className="mcp-url-box">{`claude mcp add --transport http --scope user agenda ${mcpUrl}`}</div>
          </div>

          <div className="account-section">
            <div className="account-section-title">{t('help.desktopTitle')}</div>
            <p className="account-note">{t('help.desktopBody')}</p>
          </div>

          <div className="account-section">
            <div className="account-section-title">{t('help.toolsTitle')}</div>
            <p className="account-note">{t('help.toolsBody')}</p>
          </div>
        </div>
      </div>
    </div>
  );
}

window.HelpView = HelpView;